We use Tooltips to provide more information for the users to identify an element, such as a description of its function, and guide them to take action.
How they work
To add a new tooltip you have to add a
title attribute with the custom tooltip text in the HTMLnode that should to have a tooltip.
<button type="button" class="class" title="your custom tooltip text">click me</button>
A tooltip is displayed automatically when the user hovers the pointer over an action button, and removed when the user clicks the control or move the mouse. The tooltip can also be triggered by focusing on that specific element with the keyboard (tab key), or tapping on it.
Our application relies on Bootstrap's tooltips. Check our their documentation for basic aspects regarding Tooltips configuration.
Behavior & motion
A tooltip is displayed upon hovering over an action button. It shows up over 150ms and fades out over 75ms.
Tooltips in buttons with icons
Tooltips in Table header
Tooltips in Table rows