Tooltip

Tooltip wrapper. This component displays an additional text around the given element(s) on focus, key press, or hover, to improve accessibility on all devices. It is fully supported by screen readers.

---

Props

• label (string): aria-label HTML attribute to set to the element.
• [OPTIONAL] id (string): id HTML attribute to set to the element.
• [OPTIONAL] modifiers (string): List of modifiers to apply to the element. Defaults to "top".
• [OPTIONAL] description (string): Description to display instead of the label (toggletip mode). In this mode, the label prop will still be displayed on hover/focus, but this time, as soon as the user clicks or presses a key on the tooltip children, label will be replaced by the description prop. See Tooltips & Toogletip.

---

Syntax

React

<UITooltip label="My label" modifiers="top">
  <button>i</button>
</UITooltip>

Vue

<UITooltip label="My label" modifiers="top">
  <button>i</button>
</UITooltip>

Svelte

<UITooltip label="My label" modifiers="top">
  <button>i</button>
</UITooltip>

HTML

<div class="ui-tooltip ui-tooltip--top" aria-label="My label" role="tooltip">
  <button>i</button>
</div>

---

Syntax - toggletip mode (initial)

React

<UITooltip label="More info" modifiers="left" description="Additional informations">
  <button>i</button>
</UITooltip>

Vue

<UITooltip label="More info" modifiers="left" description="Additional informations">
  <button>i</button>
</UITooltip>

Svelte

<UITooltip label="More info" modifiers="left" description="Additional informations">
  <button>i</button>
</UITooltip>

HTML

<div
  role="tooltip"
  class="ui-tooltip ui-tooltip--left"
  aria-label="More info"
>
  <button>i</button>
</div>

---

Syntax - toggletip mode (active)

React

<UITooltip label="More info" modifiers="left" description="Additional informations">
  <button>i</button>
</UITooltip>

Vue

<UITooltip label="More info" modifiers="left" description="Additional informations">
  <button>i</button>
</UITooltip>

Svelte

<UITooltip label="More info" modifiers="left" description="Additional informations">
  <button>i</button>
</UITooltip>

HTML

<div
  class="ui-tooltip ui-tooltip--left"
  aria-label="More info"
  role="tooltip"
>
  <button>i</button>
  <span class="ui-tooltip__description" role="status">Additional information</span>
</div>