A short text label shown on hover/focus (pp_tooltip/1), in the spirit
of MUI's Tooltip.
<.pp_tooltip title="Delete">
<.pp_button variant="icon"><.pp_icon name="hero-trash" /></.pp_button>
</.pp_tooltip>
<.pp_tooltip title="Add to favorites" placement="right" arrow>
<.pp_icon name="hero-star" />
</.pp_tooltip>Pure CSS — Tailwind's group/group-hover:/group-focus-within:, no
JS/LiveView/hook at all, not even a small vanilla snippet like
PhoenixPaper.Ripple's. group-focus-within: (not just group-hover:)
means a keyboard user tabbing to a focusable trigger (a button, a link)
sees the tooltip too, not just a mouse user hovering it.
Two real simplifications versus MUI's Tooltip, both because there's no
JS here to do better:
placementis one of the 4 cardinal directions (top— the default —bottom,left,right), not MUI's full 12-waytop-start/top-end/etc. matrix.- No collision detection/auto-flip. MUI's
Tooltipis built on Popper/Floating UI, which repositions the tooltip on the fly if the chosenplacementwould overflow the viewport. This is a fixedposition: absoluteoffset picked once at render time — if aplacement="top"tooltip is near the top edge of the viewport, it'll render off-screen the same way a plain CSS-only tooltip anywhere else would. Pick aplacementthat fits where the trigger actually sits on the page.
title (matching MUI's prop name exactly) disables the tooltip the same
way MUI's does: nil or "" renders the trigger with no tooltip
wrapper at all, no empty bubble that would otherwise pop up on hover.
The trigger wrapper's group relative inline-flex is not gated by
paperize — like PhoenixPaper.Badge's wrapper, it's the minimum
structure the tooltip needs to position itself at all, not part of the
"paper" skin. paperize={false} still drops every class from the bubble
itself (position, color, the hover-reveal transition, everything), same
all-or-nothing contract as everywhere else.
Always an inverted surface (bg-pp-on-surface/text-pp-surface)
regardless of the current theme, the same deliberate choice
PhoenixPaper.Snackbar makes and for the same reason: Material's spec
tooltip is a dark chip on a light theme and a light chip on a dark theme,
not a themed surface.
Summary
Functions
Renders a tooltip. See the module doc.
Functions
Renders a tooltip. See the module doc.
Attributes
title(:any) - the tooltip text — nil or "" disables the tooltip (renders just the trigger). Defaults tonil.placement(:string) - Defaults to"top". Must be one of"top","bottom","left", or"right".arrow(:boolean) - a small triangle pointing at the trigger. Defaults tofalse.paperize(:boolean) - Defaults totrue.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - the trigger element.