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
Tooltip on the top
Tooltip on the right
Tooltip on the bottom
Tooltip on the left
<div class="tooltip" role="tooltip">
<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
Primary - .tooltip.tooltip-primary
Tooltip on the top
Tooltip on the right
Tooltip on the bottom
Tooltip on the left
Secondary - .tooltip.tooltip-secondary
Tooltip on the top
Tooltip on the right
Tooltip on the bottom
Tooltip on the left
Four directions
Hover over the buttons below to see the tooltips.
<div class="tooltip top in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
<div class="tooltip right in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
<div class="tooltip bottom in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
<div class="tooltip left in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
Validation state
Here is the way an error tooltip should look like:
Tooltip on the top
Tooltip on the right
Tooltip on the bottom
Tooltip on the left
<div class="tooltip tooltip-error top in" role="tooltip">
<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.