Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Examples

Default

Hover me

Add to library testing again

 
<c-tooltip>
  <c-tooltip-trigger>
    <c-button variant="outline">Hover me</c-button>
  </c-tooltip-trigger>
  <c-tooltip-content>
    <p>Add to library testing again</p>
  </c-tooltip-content>
</c-tooltip>

Custom Styling

Styled Tooltip

Custom styled tooltip 

<c-tooltip>
  <c-tooltip-trigger>
    <c-button>Styled Tooltip</c-button>
  </c-tooltip-trigger>
  <c-tooltip-content
    tooltip-content-classes="bg-primary text-primary-foreground"
    side="bottom"
    arrow-classes="bg-primary"
  >
    <p class="flex items-center gap-2">
      <c-lucide-icon icon="info" size="14"></c-lucide-icon>
      Custom styled tooltip
    </p>
  </c-tooltip-content>
</c-tooltip>

API Reference

Tooltip

Root component that manages tooltip state and timing.

Prop Type Default Description
delay-duration number 700 Duration from when the mouse enters the trigger until the tooltip opens (in milliseconds)
skip-delay-duration number 300 How long to wait before opening if tooltip was recently closed (in milliseconds)
disable-hoverable-content boolean false Prevents the tooltip from remaining open when hovering over the tooltip content
open boolean false Controlled open state of the tooltip

TooltipTrigger

The element that triggers the tooltip to appear.

Prop Type Default Description
tooltip-trigger-classes string "" Additional CSS classes to apply to the trigger

TooltipContent

The content displayed when the tooltip is open.

Prop Type Default Description
tooltip-content-classes string "" Additional CSS classes to apply to the content
side "top" | "right" | "bottom" | "left" top The preferred side of the trigger to render against
align "start" | "center" | "end" center The preferred alignment against the trigger
side-offset number 4 Distance in pixels from the trigger
align-offset number 0 Offset along the alignment axis
avoid-collisions boolean false Whether to avoid collisions with viewport boundaries (inverted: false means enable collision avoidance)
collision-padding number 8 Padding from viewport boundaries when avoiding collisions

Events

openchange

Fired when the tooltip open state changes.

interface OpenChangeEvent {
  detail: {
    open: boolean;
    tooltipId: string;
  };
}

Usage Notes

  • The tooltip automatically handles hover and focus interactions
  • Use delay-duration to control how long users must hover before the tooltip appears
  • Use skip-delay-duration to provide instant tooltips when moving between triggers quickly
  • The tooltip will stay open when hovering over the content unless disable-hoverable-content is true
  • Positioning is handled automatically using Floating UI with collision detection