Tooltips

Tooltip components are used to display additional information when a user hovers, focuses, or taps on the element.

Implementation

Tooltips can be implemented on almost any element Denali provides. To acheive this add the class of tooltip to the element. To specify the text in the tooltip add the data-tooltip="Some text" attribute with the text.

Currently we do not support icons in a tooltip, but are working towards a solution.

<span class="link d-tooltip" data-tooltip="I’m the tooltip text.">Tooltip Default</span>

Position

By default tooltips are positioned on the bottom, but give you the ability to position it left, right, or top. Just add the class-left, -right, or -top to the exsiting class.

<div class="flex space-between m-t-40">
    <span class="link d-tooltip-right" data-tooltip="I’m the right tooltip.">Tooltip Right</span>
    <span class="link d-tooltip-top" data-tooltip="I’m the top tooltip.">Tooltip Top</span>
    <span class="link d-tooltip-left" data-tooltip="I’m the left tooltip.">Tooltip Left</span>
</div>

Small

By default tooltips are 1.2rem font size, but in some context you need a smaller tooltip. By adding the -small to the exsiting class you’ll change the font size to 1rem resulting in a smaller tooltip.

<div class="flex space-between">
    <span class="link d-tooltip-small" data-tooltip="I’m the small tooltip.">Small Tooltip</span>
    <span class="link d-tooltip-left-small" data-tooltip="I’m the left small tooltip.">Small Tooltip Left</span>
</div>

Other Elements

Here’s an example of applying a tooltip to a regular icon.

<i class="d-icon d-user-profile-circle is-medium d-tooltip-small" data-tooltip="Profile"></i>

Variables

You can use these variables to change the visual appearence when creating your own Denali themes in SCSS.