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

					


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

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them.

Options

Background color variant - .tooltip.tooltip-primary

					


<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>

Four directions

Hover over the buttons below to see the tooltips.

					


<div class="tooltip top in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>




<div class="tooltip right in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>




<div class="tooltip bottom in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>




<div class="tooltip left in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>

Validation state

Here is the way an error tooltip should look like:

					


<div class="tooltip tooltip-error top in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Tooltip on the left
    </div>
</div>

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.