Popover

Usage

The ty-popover component is used to display floating content near a target element. It's perfect for offering contextual information or interactive content.

Live Editor

<div>
  <ty-button id="popover-target"> Click me </ty-button>
  <ty-popover target-id="popover-target" trigger="click" placement="right">
    <ty-text variant="title" size="sm"> This is popover content! </ty-text>
    <ty-text variant="body" size="sm"> This is popover content! </ty-text>
    <ty-text variant="body" size="sm"> This is popover content! </ty-text>
  </ty-popover>
</div>

Result

Loading...

API

Properties

Name	Description	Type	Default
trigger	Trigger action ('click' or 'hover')	String	'click'
target-id	ID of the target element	String	''
auto-close-duration	Duration before auto-closing (ms)	Number	30000
placement	Placement of the popover	String	'bottom'

Methods

Method	Description
togglePopover	Toggles the visibility of the popover.
showPopover	Shows the popover.
hidePopover	Hides the popover.

Styling

The popover uses CSS variables for easy styling and integrates a directional arrow using Floating UI for dynamic placement. The component ensures appropriate visibility and accessibility features.