Tooltips

Floating labels that briefly explain an action, function, or an element. Their content is exclusively text. If richer media is desired, consider using a popover instead.

Styles

Base Style

.example-button {
/* To make the tooltip appear */
.d-tooltip-hover();
}
.example-tooltip {
.d-tooltip__bottom-center();
}

Inverted Style

The default visual style is a black background. Sometimes though, a lighter background is desired.

.example-button {
/* To make the tooltip appear */
.d-tooltip-hover();
}
.example-tooltip--inverted {
.d-tooltip__bottom-center--inverted();
}

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.

<div class="d-tooltip__top-center"></div>