- 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.

The fee covers vaccinations, a microchip and the first vet visit.

How fees are used

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required id * :string
label :string

The name of the button. It should state what the information is about,

 Read more Read less

for example "About the adoption fee", so that several toggletips on a page can be told apart. With the :icon slot, the label is visually hidden.

Set either label or labelledby.
labelledby :string

The DOM ID of an element that labels the button. If set, the button only

 Read more Read less

shows the icon and the :icon slot must be set as well.
rest :global

Any additional HTML attributes.
icon :slot

An icon for the button. It is hidden from the accessibility tree, since the label names the button.

 
<:icon>ⓘ</:icon>
Required inner_block * :slot

The supplementary information. It may hold links.

 
<p>The fee covers vaccinations, a microchip and the first vet visit.</p>
<p>
  <Phoenix.Component.link navigate="/adoption/fees">
    How fees are used
  </Phoenix.Component.link>
</p>