Tooltip

The Tooltip component is a compact, accessible way to provide additional context or brief information on hover or focus. Perfect for clarifying buttons, icons, or other UI elements, Tooltips enhance usability by offering extra detail without cluttering the interface.

Preview Code

Hover me

This is a tooltip!

<div x-data="tooltip">
    <button x-ref="trigger" class="demo-button">Hover me</button>
    <div x-ref="content" x-cloak class="px-2 py-1 bg-white border border-zinc-300 rounded-lg shadow-lg shadow-black/5">
        This is a tooltip!
        <div x-ref="arrow" class="rounded-sm border"></div>
    </div>
</div>

Structure

<div x-data="tooltip">
  <button x-ref="trigger"></button>
  <div x-ref="content" x-cloak>
      <div x-ref="arrow"></div>
  </div>
</div>

API Reference

x-data="tooltip"

The root component containing the state and functionality.

Property	Type	Description	Default
open	boolean	The open state of the tooltip	false
openDelay	number	Delay in milliseconds before showing the tooltip on hover	500
closeDelay	number	Delay in milliseconds before hiding the tooltip	0
placement	enum "top" | "right" | "bottom" | "left"	Preferred placement of the tooltip relative to the trigger element	top
offset	number	Distance in pixels between tooltip and trigger	10
flip	boolean	Wether the tooltip should flip when not enough space is available	true
shift	object	Shifts tooltip position for view optimization	{ "padding": 10 }
arrow	boolean	Display an arrow pointing to the trigger. Needs an element with x-ref="arrow" inside the content element.`	true
onOpenChange	function	Callback when tooltip open state changes	null