Tooltips

Tooltips display information about the item that the mouse is hovering over.

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! Bootstrap's tooltip plugin handles positioning via Popper, which is already bundled into bootstrap.bundle.min.js — no separate Popper script is required. We recommend creating your own initialiser 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

Primary - .tooltip.tooltip-primary

Secondary - .tooltip.tooltip-secondary

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.

Click inside the fields below to see the tooltips.