Components

Tooltip

A small dark label on an ink-filled box — flat, sharp, no radius. Wrap a trigger in .ds-tooltip-host and it reveals a child .ds-tooltip on hover or keyboard focus, no JavaScript required.

CSS-only

Hover or tab to the trigger to reveal the tooltip. The .ds-tooltip-host wrapper shows its child .ds-tooltip on :hover / :focus-within, positioned above by default.

Hover / focus host
Recalculates the full pricing matrix 
<span class="ds-tooltip-host">
  <button class="ds-button">Hover me</button>
  <span class="ds-tooltip">Recalculates the full pricing matrix</span>
</span>

Placement

Add --top (default), --bottom, --left, or --right to the .ds-tooltip to move it around the trigger.

top · bottom · left · right
Above the trigger Below the trigger To the left To the right 
<span class="ds-tooltip-host">
  <button class="ds-button">Bottom</button>
  <span class="ds-tooltip ds-tooltip--bottom">Below the trigger</span>
</span>

Bare box

The .ds-tooltip on its own is just a small dark box — useful inside a JS-positioned layer.

.ds-tooltip
Tabular rate · €/day 
<span class="ds-tooltip">Tabular rate · €/day</span>

React

The Tooltip wraps a trigger and shows the label on hover / focus, positioned with inline styles.

<Tooltip> 
import { Tooltip, Button } from "@diametral/design-system/react";

<Tooltip label="Recalculates the full pricing matrix" placement="top">
  <Button>Hover me</Button>
</Tooltip>