PhoenixPaper.Tooltip (PhoenixPaper v0.1.0)

Copy Markdown View Source

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:

  • placement is one of the 4 cardinal directions (top — the default — bottom, left, right), not MUI's full 12-way top-start/top-end/etc. matrix.
  • No collision detection/auto-flip. MUI's Tooltip is built on Popper/Floating UI, which repositions the tooltip on the fly if the chosen placement would overflow the viewport. This is a fixed position: absolute offset picked once at render time — if a placement="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 a placement that 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

pp_tooltip(assigns)

Renders a tooltip. See the module doc.

Attributes

  • title (:any) - the tooltip text — nil or "" disables the tooltip (renders just the trigger). Defaults to nil.
  • placement (:string) - Defaults to "top". Must be one of "top", "bottom", "left", or "right".
  • arrow (:boolean) - a small triangle pointing at the trigger. Defaults to false.
  • paperize (:boolean) - Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the trigger element.