Tooltip

A tooltip that appears on hover/focus after a delay.

<span
  data-controller="zag-tooltip"
  data-zag-tooltip-open-delay-value="300"
  class="relative inline-block"
>
  <button
    data-part="trigger"
    class="border-input bg-popover focus-visible:ring-ring rounded-lg border px-4 py-2 text-sm font-medium shadow-sm focus:outline-none focus-visible:ring-2"
  >
    Hover or focus me
  </button>
  <div data-part="positioner">
    <div
      data-part="content"
      hidden
      class="bg-foreground text-background z-50 rounded px-2 py-1 text-xs font-medium shadow"
    >
      Saves your changes (⌘S)
    </div>
  </div>
</span>

Parts

trigger, positioner, arrow, arrow-tip, content.

Values

Attribute	Type	Default	Description
data-zag-tooltip-open-value	Boolean	false	Open by default.
data-zag-tooltip-open-delay-value	Number	1000	Delay (ms) before showing.
data-zag-tooltip-close-delay-value	Number	500	Delay (ms) before hiding.
data-zag-tooltip-placement-value	String	"bottom"	Popper placement.
data-zag-tooltip-gutter-value	Number	8	Gap (px) between trigger and content.
data-zag-tooltip-interactive-value	Boolean	false	Keep open while hovering the content.
data-zag-tooltip-close-on-escape-value	Boolean	true	Close on Escape.
data-zag-tooltip-close-on-pointer-down-value	Boolean	true	Close when the trigger is pressed.

Events

Emits zag-tooltip:change — detail is { open }.

Programmatic control

open(), close(), isOpen.