Tooltip

New

Overview

Show a little tooltip on hover.

HEEx

<div class="tooltip-examples flex gap-2.5 items-center flex-wrap">
  <Button.button
    id="example-tip-save"
    kind={:outline}
    phx-click={JS.push("demo-action", value: %{action: "Saved to collection"})}
  >
    Save
  </Button.button>
  <Tooltip.tooltip id="example-tip-save-tooltip">Save to your collection</Tooltip.tooltip>

  <Button.button id="example-tip-info" kind={:outline}>Autosave</Button.button>
  <Tooltip.tooltip id="example-tip-info-tooltip">
    Your changes are saved automatically
  </Tooltip.tooltip>

  <Link.link id="example-tip-code" color={:blue} href="https://hexdocs.pm/phoenix_live_view/">
    Phoenix LiveView
  </Link.link>
  <Tooltip.tooltip id="example-tip-code-tooltip" side={:bottom}>
    Open the Phoenix LiveView documentation
  </Tooltip.tooltip>
</div>

Add this module

terminal

mix dizzy.add tooltip

Component API

Tooltip.tooltip

Attributes

Attributes for Tooltip.tooltip
Name	Type	Default	Values
`delay_ms`	`:integer`	0	—
`id`	`:string`	Required	—
`side`	`:atom`	:top	:top, :top_start, :top_end, :bottom, :bottom_start, :bottom_end, :left, :left_start, :left_end, :right, :right_start, :right_end

Slots

Slots for Tooltip.tooltip
Name	Required	Attributes
`inner_block`	Required	—

JavaScript hook

DizzyTooltip

Attaches the tooltip to its preceding sibling without replacing or styling that trigger. It shows on hover or focus, dismisses with Escape, and uses Floating UI to position itself while avoiding clipping at edges.

Included in the packaged Dizzy hooks. mix dizzy.add wires this hook into your LiveSocket configuration automatically.