Tooltip

Components Tooltip

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

A small label that appears on hover or keyboard focus. Pure CSS, no JavaScript and no dependencies, so it works in live and dead views.

On hover or focus

A label on hover or keyboard focus. Pure CSS - no JS, no dependencies - and the bubble inverts against the page in both colour schemes. placement puts it top, bottom, left or right; arrow adds the pointer.

heex

<.tooltip label="Copied to clipboard">
  <.button color="gray" variant="outline">Hover me</.button>
</.tooltip>

Icon buttons

The classic use: a glyph gets its name on hover while aria-label carries it for screen readers - the tooltip is a sighted-user convenience, not the accessible name.

heex

<div class="flex items-center justify-center gap-3">
  <.tooltip label="Bold">
    <.button color="gray" variant="ghost" size="icon" aria-label="Bold">
      <.icon name="hero-bold" />
    </.button>
  </.tooltip>
  <.tooltip label="Italic">
    <.button color="gray" variant="ghost" size="icon" aria-label="Italic">
      <.icon name="hero-italic" />
    </.button>
  </.tooltip>
  <.tooltip label="Link">
    <.button color="gray" variant="ghost" size="icon" aria-label="Link">
      <.icon name="hero-link" />
    </.button>
  </.tooltip>
</div>

View Code

Hide Code

Rich content

The :content slot takes markup when one line isn't enough - keep it glanceable; a tooltip is still a label, not a panel. For interactive content reach for popover instead.

heex

<.tooltip placement="bottom">
  <:content>
    <span class="font-semibold">Deploys locked</span><br />ask in #releases to unlock
  </:content>
  <.badge color="warning" label="Locked" />
</.tooltip>

View Code

Hide Code

Properties

Attribute	Type	Default	Description
`arrow`	`boolean`	`true`	show the arrow pointing at the trigger
`class`	`any`	`nil`	extra classes for the wrapper
`content_class`	`any`	`nil`	extra classes for the tooltip bubble
`disabled`	`boolean`	`false`	when true, no tooltip is rendered
`id`	`string`		id for the tooltip bubble; autogenerated if not set
`label`	`string`	`nil`	the tooltip text (or use the :content slot)
`placement`	`string`	`"top"`	which side of the trigger the tooltip appears on one of: "top", "bottom", "left", "right"
`rest`	`global`
`:content` slot	`slot`		rich tooltip content; overrides the label attr
`:inner_block` slot	`slot`		the trigger content

On this page

Hire us

20+ years in web app development, our experienced engineers and designers deliver stunning, functional results. Limited availability.

Learn more

Stay up to date

Get notified about updates and when we release something.