Tooltip

Display informative text hovering and focusing on an element

Hover or focus over the links below to see tooltips:

Hover me

Usage

When activated, tooltips display a text label identifying an element, such as a description of its function.

<a href="#" data-tooltip alt="Alt text" title="This is a link" role="tooltip" aria-label="Tooltip message">Hover me</a>

Variables

List of variables used. Customize the component’s design by changing or overriding these values:

  --tooltip-background: var(--cssui-gray-darkest);
  --tooltip-padding: 4px 6px;
  --tooltip-text-color: var(--cssui-gray-light);
  --tooltip-fontsize: .75rem;
  /* --tooltip-radius: 0px */
← Tabs