Overlays

Popover

Popovers provide contextual information and interactive features to enhance user interaction and understanding within an interface.

Default

Basic example

The popover component extends the functionality of the tooltip component by triggering upon click and enabling user interaction.

Colors

Semantic variants

Use modifier class `tooltip-{semantic-color}` with component class `tooltip-body` for colored popover.

Directions

Popover placements

Utilize the JavaScript option class `[--placement:{direction}]` to specify the popover placement in various directions. Here, `direction` can be `top`, `bottom`, `left`, or `right`. By default, the popover is positioned at the `top`.

Illustrations

Ratings & reviews

Below given example shows rating & reviews popover on click.

Options usage

Trigger — On Click

Use the JavaScript option class `[--trigger:{event}]` to specify the event that opens the tooltip. The event options include `hover`, or `click`. By default, the tooltip/popover is triggered on the `hover` event.

Trigger — On Hover

Utilize the provided example to trigger the tooltip/popover on the `Hover` event.

Interaction

To enable interactivity within the tooltip or popover content, use the JavaScript option class `[--interaction:{boolean}]`. Setting this option to `true` enable interaction, causing the tooltip or popover to remain open when clicking inside `tooltip-content`. By default, it is set to `false`. Note that this class selector works exclusively with `[--trigger:click]`.

Tooltip strategy

Use the JavaScript option class `[--strategy:{position}]` to determine the placement strategy of the tooltip/popover. The `position` parameter can be set to either `fixed` or `absolute`.

Prevent popper

Use the JavaScript option class `[--prevent-popper:{boolean}]` to manage the placement calculation with Popper.

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`tooltip`	component	Base class for popover component.
`tooltip-toggle`	part	Base class for toggling the display of popover.
`tooltip-content`	part	Places for popover content with popper.
`tooltip-body`	part	Container for popover content.
`tooltip-primary`	color	Popover with 'primary' color.
`tooltip-secondary`	color	Popover with 'secondary' color.
`tooltip-accent`	color	Popover with 'accent' color.
`tooltip-info`	color	Popover with 'info' color.
`tooltip-success`	color	Popover with 'success' color.
`tooltip-warning`	color	Popover with 'warning' color.
`tooltip-error`	color	Popover with 'error' color.
`tooltip-shown:{tw-utility-class}`	variant	Adds specific tailwind classes when the popover is open.