Tooltip

View Storybook

A tooltip is a floating label that briefly explains an action, function, or an element. Its content is exclusively text and shouldn't be vital information for users. If richer media is desired, consider using a popover instead.

Classes

Class Applies to Description
.d-tooltip N/A Applies tooltip's base styles.
.d-tooltip--show .d-tooltip Shows the tooltip.
.d-tooltip--hide .d-tooltip Hides the tooltip.
.d-tooltip--hover .d-btn Allows the tooltip to become visible on hover or focus-visible; applies to the element triggering the tooltip. This is a CSS-only solution and not recommended.
.d-tooltip--inverted .d-tooltip Inverts styles to work on dark backgrounds.
.d-tooltip__arrow--{$direction} .d-tooltip Defines which side of the tooltip its arrow appears. This is required as no arrow is assigned by default. Examples below.

Examples

Base Styles

Arrow Directions

No arrow direction is assigned by default. You must select a direction. Twelve directions are offered: three on each face of the tooltip.

Accessibility

Item Applies to Description
role="tooltip" .d-tooltip Ensures more reliable voiceover support.
aria-describedby="#id" .d-btn Reads out the tooltip content as a supplementary description for its trigger when the trigger is focused. The aria-describedby value should be the trigger's CSS ID.