Skip to main content
Version: Previous

Web Components - Tooltip

The alpha-tooltip component is used to provide extra information about another element when the user hovers over it.

Set-up​

import { provideDesignSystem, alphaTooltip } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaTooltip());

Usage​

Live Editor
<div>
  <alpha-button id="anchor">Hover me</alpha-button>
  <alpha-tooltip anchor="anchor">Tooltip text</alpha-tooltip>
</div>
Result
Loading...

Use cases​

Tooltips are often used to supplement UI elements and provide additional information. Tooltips will often provide accessible names or add additional context to other UI components (such as icon buttons). While tooltips are natively provided to elements via the title attribute, they are notoriously difficult to style. Additionally, they are only invoked on hover, and not on focus.

Additional resources​