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.

Basic design

Static tooltip

Hover over the links below to see tooltips:

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

Options

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>

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