Popover

<ts-popover> vv0.4.0

The ts-popover component.

Open in Storybook for interactive demos.

Preview

<ts-popover placement="bottom" trigger="click">Content</ts-popover>

Property	Attribute	Type	Default	Description
`dismissible`	`dismissible`	`boolean`	`true`	Whether the popover closes on outside click or Escape.
`open`	`open`	`boolean`	`false`	Whether the popover is currently visible.
`placement`	`placement`	`"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "right" \| "top" \| "top-end" \| "top-start"`	`'bottom'`	Placement of the popover relative to the trigger.
`trigger`	`trigger`	`"click" \| "hover" \| "manual"`	`'click'`	How the popover is triggered.

Event	Detail	Bubbles	Composed	Description
`tsClose`	`void`	Yes	Yes	Emitted when the popover closes.
`tsOpen`	`void`	Yes	Yes	Emitted when the popover opens.

Method	Signature	Description
`hide`	`hide() => Promise<void>`	Programmatically hide the popover.
`show`	`show() => Promise<void>`	Programmatically show the popover.

Name	Description
`(default)`	Default slot for popover content.
`trigger`	The element that triggers the popover.

Use ::part() to style internal elements:

ts-popover::part(arrow) {
  /* your custom styles */
}

<ts-popover placement="bottom" trigger="click">Content</ts-popover>

import { TsPopover } from '@tessera-ui/react';

<TsPopover dismissible placement="bottom">Content</TsPopover>