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

With an inline text:

<p>
  Did you know that the
  <.tooltip id="labrador-info">
    Labrador Retriever
    <:tooltip>
      <p><strong>Labrador Retriever</strong></p>
      <p>
        Labradors are known for their friendly nature and excellent
        swimming abilities.
      </p>
    </:tooltip>
  </.tooltip>
  is one of the most popular dog breeds in the world?
</p>

If the inner block contains a link or another focusable element, add the contains_link attribute and put aria-describedby on that element. Its value is the id of the component with -tooltip appended:

<p>
  Did you know that the
  <.tooltip id="labrador-info" contains_link>
    <.link navigate={~p"/labradors"} aria-describedby="labrador-info-tooltip">
      Labrador Retriever
    </.link>
    <:tooltip>
      <p><strong>Labrador Retriever</strong></p>
      <p>
        Labradors are known for their friendly nature and excellent
        swimming abilities.
      </p>
    </:tooltip>
  </.tooltip>
  is one of the most popular dog breeds in the world?
</p>

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 described element, which shows the tooltip.
• Esc - hide the tooltip while it is shown, without moving the focus.