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 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 tooltip-right" data-tooltip="I’m the right tooltip.">Tooltip Right</span>
    <span class="link tooltip-top" data-tooltip="I’m the top tooltip.">Tooltip Top</span>
    <span class="link 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 tooltip-small" data-tooltip="I’m the small tooltip.">Small Tooltip</span>
    <span class="link 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 tooltip-small" data-tooltip="Profile"></i>

Variables

You can use these variables in a override.css file to customize this component.

Variable Name CSS Property
$tooltip-text-color color
$tooltip-bg-color background
$tooltip-corner-radius border-radius
$tooltip-text-size font-size
$tooltip-padding padding
$tooltip-small-text-size font-size
$tooltip-small-padding padding