A pure-CSS tooltip that appears on hover or keyboard focus. No JavaScript required.

Examples

<.tooltip label="Add to library">
  <.button size="sm">Hover me</.button>
</.tooltip>

<.tooltip placement="right" label="Settings" />

Rich content via the :content slot:

<.tooltip placement="bottom">
  <:content>
    Saved <span class="font-semibold">2 minutes ago</span>
  </:content>
  <.icon name="hero-check-circle" class="w-5 h-5" />
</.tooltip>

Disabling at runtime

Pass disabled to render the trigger without any tooltip. To toggle from the client (e.g. only show tooltips while a sidebar is collapsed), add or remove the pc-tooltip--suppressed class on the wrapper - JS.add_class/2, JS.remove_class/2, or any client-side binding works.

Accessibility

The bubble carries role="tooltip" and an id (autogenerated, or pass your own). For screen readers to announce it, reference that id from the focusable trigger element with aria-describedby:

<.tooltip id="save-tip" label="Save (⌘S)">
  <.icon_button aria-describedby="save-tip">
    <.icon name="hero-check" />
  </.icon_button>
</.tooltip>

The tooltip already opens on keyboard focus (focus-within), so with the id wired it is fully keyboard and screen-reader accessible.

Attributes

• id (:string) - id for the tooltip bubble; autogenerated if not set.
• label (:string) - the tooltip text (or use the :content slot). Defaults to nil.
• placement (:string) - which side of the trigger the tooltip appears on. Defaults to "top". Must be one of "top", "bottom", "left", or "right".
• disabled (:boolean) - when true, no tooltip is rendered. Defaults to false.
• arrow (:boolean) - show the arrow pointing at the trigger. Defaults to true.
• class (:any) - extra classes for the wrapper. Defaults to nil.
• content_class (:any) - extra classes for the tooltip bubble. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required) - the trigger content.
• content - rich tooltip content; overrides the label attr.