Overlays Tooltip

Tooltip

Lightweight hover and focus hints with Floating UI placement.

The Tooltip component provides lightweight hover and focus hints with Floating UI positioning. Use it for short, contextual guidance that should stay attached to a trigger element.

Import

use PUI

# or

import PUI.Popover

Basic Tooltip

Display a tooltip on hover or focus:

<.tooltip>

  <.button variant="outline">Hover me</.button>

  <:tooltip>This is a helpful tooltip</:tooltip>

</.tooltip>

Placement

Tooltips support four placement options:

<.tooltip placement="top">

  <span>Top</span>

  <:tooltip>Top tooltip</:tooltip>

</.tooltip>



<.tooltip placement="bottom">

  <span>Bottom</span>

  <:tooltip>Bottom tooltip</:tooltip>

</.tooltip>



<.tooltip placement="left">

  <span>Left</span>

  <:tooltip>Left tooltip</:tooltip>

</.tooltip>



<.tooltip placement="right">

  <span>Right</span>

  <:tooltip>Right tooltip</:tooltip>

</.tooltip>

Interactive Demo

Tooltip Placements

Rich Tooltip

Rich Content

Tooltips can contain short formatted content:

<.tooltip id="details-tooltip" placement="bottom">

  <.button variant="outline">Hover for details</.button>

  <:tooltip>

    <div class="w-56 space-y-2">

      <p class="text-sm font-medium">Tooltip content</p>

      <p class="text-xs text-muted-foreground">

        Keep tooltips short and contextual so they remain easy to scan.

      </p>

    </div>

  </:tooltip>

</.tooltip>

Variants

Use the variant attribute to switch between predefined tooltip styles.

Default (Dark)

The default variant uses a dark background with light text:

<.tooltip variant="default">

  <.button variant="outline">Default</.button>

  <:tooltip>Dark tooltip</:tooltip>

</.tooltip>

Light

The light variant uses a white background with a border, suitable for lighter interfaces:

<.tooltip variant="light">

  <.button variant="outline">Light</.button>

  <:tooltip>Light tooltip</:tooltip>

</.tooltip>

Unstyled / Headless

Use variant="unstyled" when you want to provide all tooltip classes yourself:

<.tooltip

  variant="unstyled"

  class="rounded bg-zinc-950 px-3 py-1.5 text-sm text-white aria-hidden:pointer-events-none aria-hidden:opacity-0 invisible not-aria-hidden:visible not-aria-hidden:opacity-100"

>

  <button type="button" class="underline">Hover me</button>

  <:tooltip>Custom tooltip styling</:tooltip>

</.tooltip>

Variants

Custom Arrow Styling

Override the default arrow color with arrow_class. The arrow automatically matches the tooltip variant, but you can provide any Tailwind classes to customize it.

Note: For variant="light", include ring-1 ring-border shadow-sm in your arrow_class to keep the arrow visible on light backgrounds.

<.tooltip variant="light" arrow_class="bg-blue-500 ring-1 ring-border shadow-sm">

  <.button variant="outline">Custom arrow</.button>

  <:tooltip>Blue arrow on light tooltip</:tooltip>

</.tooltip>

<.tooltip variant="default" arrow_class="bg-red-500">

  <.button variant="outline">Red arrow</.button>

  <:tooltip>Red arrow on dark tooltip</:tooltip>

</.tooltip>

Custom Arrow

API Reference

Tooltip Attributes

Name Type Default Description
id string auto-generated Unique identifier
placement string "top" Position: "top", "bottom", "left", "right"
variant string "default" "default", "light", "dark", or "unstyled"
arrow_class string "" Custom CSS classes for the arrow element
class string "" Additional CSS classes

Tooltip Slots

Name Required Description
inner_block ✓ Trigger element
tooltip ✓ Tooltip content (supports class)