Tooltips

Tooltips display information about the item that the mouse is hovering over. Read more about tooltips in the UX Guidelines.

Use when

Tooltips should be displayed for all icons in the interface.
Tooltips can also be very helpful for elements such as textboxes, buttons and dropdowns etc., since they can help the user understand what kind of information they should enter or what will happen when an element is clicked.
Links also benefit from tooltips so that the user knows where she will be directed when clicking it.

For this component you need JavaScript! We recommend to create your own scripts following the structure from the examples below.
You can try out this 3rd party library Popper for positioning the tooltips.

Basic design

Static tooltip

Hover over the links below to see tooltips:

Background color variant - `.tooltip.tooltip-primary`

Four directions

Hover over the buttons below to see the tooltips.

Validation state

Here is the way an error tooltip should look like:

Form validation ensures that the user enters the data that is required and in a correct format, by highlighting errors in their input. Read more about input validation in the UX Guidelines.

Click inside the fields below to see the tooltips.

				
// Tooltip html template
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip label
    </div>
</div>

// Error tooltip html template
<div class="tooltip tooltip-error" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Error tooltip label
    </div>
</div>

// Tooltip on left and visible ("in"), position by declaring top and left values
<div class="tooltip left in" role="tooltip" style="top: 280px; left: 192px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>

// Tooltip on right and visible
<div class="tooltip right in" role="tooltip" style="top: 56px; left: 73px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>

// Background color variant tooltip on top and visible
<div class="tooltip tooltip-primary top in" role="tooltip" style="top: -8px; left: 356px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>

// Error tooltip on top and visible
<div class="tooltip tooltip-error top in" role="tooltip" style="top: -8px; left: 356px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>