- 1.5.0

Toggletip

Renders a button that reveals supplementary information when it is pressed.

Read more Read less

A toggletip explains the thing next to it, such as a label or a heading. Unlike a tooltip, which describes a control that has a purpose of its own, the button of a toggletip exists only to show the information. The panel opens on activation, stays open until it is dismissed, and may hold links.

Maturity: Experimental

Usage

With an icon, the label names the button for screen readers:

<.toggletip id="adoption-fee-info" label="About the adoption fee">
  <:icon><.icon name="info" /></:icon>
  The fee covers vaccinations, a microchip and the first vet visit.
  <a href="/adoption/fees">How fees are used</a>
</.toggletip>

Without an icon, the label is the button's visible text.

A toggletip holds supplementary information only. Information a user needs to complete a task, such as the rules for a password, belongs in visible text, for example the field's description. Place the toggletip beside the element it explains, never inside a <label>, a button, a link or a <summary>. Inside a label, the button's name becomes part of the name of the input the label belongs to.

The panel is the browser's popover. It opens and closes without JavaScript, closes on Esc and on a click outside, and opening one toggletip closes the others. The Doggo.Toggletip JavaScript hook announces the panel's text when it opens. See Phoenix LiveView Hooks for registering it.

Keyboard

  • Enter, Space - open or close the panel.
  • Tab - move from the button into the panel's links, if it has any.
  • Esc - close the panel.
With icon
Open in playground

The label names the button for screen readers; the icon is hidden from them.

The fee covers vaccinations, a microchip and the first vet visit. 
<.toggletip id="toggletip-single-with-icon" label="About the adoption fee">
  <:icon>ⓘ</:icon>
  The fee covers vaccinations, a microchip and the first vet visit.
</.toggletip>
With text
Open in playground
The fee covers vaccinations, a microchip and the first vet visit. 
<.toggletip id="toggletip-single-with-text" label="What does the fee cover?">
  The fee covers vaccinations, a microchip and the first vet visit.
</.toggletip>