There are different ways to render a tooltip. This component renders a <div> with the tooltip role, which is hidden unless the element is hovered on or focused. For example CSS for this kind of tooltip, refer to ARIA: tooltip role.

A simpler alternative for styled text-only tooltips is to use a data attribute and the attr CSS function. Doggo does not provide a component for that kind of tooltip, since it is controlled by attributes only. You can check Pico CSS for an example implementation.

Maturity: Developing

The markup may change. A rewrite on top of the Popover API is being considered, which would put the tooltip in the top layer, so that an ancestor with overflow: hidden can no longer clip it. That would change the elements this component emits and the attributes your stylesheet targets.

Usage

A tooltip describes a control that already has a purpose of its own, such as an icon button. Render the control in the inner block and spread the attributes it receives on it, which point aria-describedby at the tooltip:

<.tooltip id="delete-info" :let={trigger}>
  <.button phx-click="delete" {trigger}>Delete</.button>
  <:tooltip>Deletes the row and its history.</:tooltip>
</.tooltip>

If the control already has a description, list both ids in one aria-describedby, since a second attribute of the same name is ignored:

<.tooltip id="delete-info" :let={trigger}>
  <.button
    phx-click="delete"
    aria-describedby={"delete-hint " <> trigger["aria-describedby"]}
  >
    Delete
  </.button>
  <:tooltip>Deletes the row and its history.</:tooltip>
</.tooltip>

Do not use a tooltip to explain text or to hide information behind an info icon. The tooltip is announced when the control is focused, and a control that exists only to show it does nothing when it is pressed. Put the information in visible text instead, or behind a toggletip, whose button exists to reveal it.

This component needs the Doggo.Tooltip JavaScript hook for Esc to dismiss the tooltip. See Phoenix LiveView Hooks for registering it.

Your stylesheet decides when the tooltip is visible. Show it on :hover and :focus-within, and hide it when the root element has the data-dismissed attribute, which the hook sets. See the example CSS.

Keyboard

• Tab - focus the control, which shows the tooltip.
• Esc - hide the tooltip while it is shown, without moving the focus.