Tooltip

The tooltip plugin initializes custom, floating tooltips using the @floating-ui/dom library based on the data-tooltip attribute. It automatically positions the tooltip relative to the trigger element and handles arrow placement.

In development, it is implemented in assets/js/modules/tooltip.js and is initialized automatically by assets/js/main.js.

Markup Requirements

To use the plugin, simply add the data-tooltip attribute to any element. The text displayed inside the tooltip is pulled from the title attribute or the data-tooltip attribute itself.

Add data-tooltip on the trigger element.
Provide the tooltip text using the title attribute.

Notes:

The plugin removes the default title attribute to prevent the browser’s native tooltip from displaying, storing its value internally in data-tooltip-text.
It dynamically creates a single tooltip DOM element and reuses it for all instances to optimize performance.
The tooltip is repositioned automatically on scroll or resize via the autoUpdate feature of Floating UI, ensuring it always stays attached to the element.
It includes logic to flip and shift the tooltip if it reaches the boundaries of the screen.

Markup Example

Below is an example markup of the plugin used with an icon from the pricing page. Key details are included in the HTML comments:


<!-- Start: Tooltip wrapper / element -->
<span class="shrink-0">
  <!-- Start: Tooltip trigger element with data-tooltip and title -->
  <i data-lucide="help-circle" data-tooltip
    class="size-4 cursor-help text-muted-foreground/50 transition-colors hover:text-foreground"
    title="Launch personalized email and SMS workflows."></i>
  <!-- End: Tooltip trigger element -->
</span>
<!-- End: Tooltip wrapper / element -->

Demo Example

View the complete code sample on this page.

Tooltip