• overlays
  • Popover

overlays

Tailwind CSS Popover

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

Require FlyonUI JS

We leveraged FloatingUI to elevate our popover experience to the next level.

Class Name
Type
Description
tooltipComponentBase class for popover component.
tooltip-togglePartBase class for toggling the display of popover.
tooltip-contentPartPlaces for popover content with popper.
tooltip-bodyPartContainer for popover content.
tooltip-primaryColorPopover with ‘primary’ color.
tooltip-secondaryColorPopover with ‘secondary’ color.
tooltip-accentColorPopover with ‘accent’ color.
tooltip-infoColorPopover with ‘info’ color.
tooltip-successColorPopover with ‘success’ color.
tooltip-warningColorPopover with ‘warning’ color.
tooltip-errorColorPopover with ’error’ color.
tooltip-shown:{tw-utility-class}VariantAdds specific tailwind classes when the popover is open.

Default

Basic example

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

The example below demonstrates a default popover triggered upon a click event.

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

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

On focus

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

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 false disables interaction, causing the tooltip or popover to close when clicking inside tooltip-content. By default, it is set to true. Note that this class selector works exclusively with [--trigger:focus].

The provided example disables interaction with the popover content.

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.

When set to absolute, the tooltip/popover will be positioned relative to its parent element with the relative class, thereby confining the popover/tooltip within that container. By default, the value is fixed.

The provided example showcases the behavior of tooltips/popovers when utilizing the absolute positioning strategy.

Prevent popper

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

When set to true, Popper will be prevented from calculating its position, resulting in the tooltip/popover remaining static and ceasing recalculation if there is insufficient space upon scrolling. By default, its value is false.

The provided example showcases the behavior of tooltips/popovers when prevent-popper is set to true.

JavaScript behavior