...
Most tooltips contain plain text, which usually describes the control or element they relate to.
A tooltip may also contain a header, status icons, dynamic text and a link,.
Examples:
Component | Regular size | With pointing tip | Small size |
|---|---|---|---|
Regular |  |  |  |
Regular with heading |  |  | |
Error See Field Validation |  |  |  |
Warning See Field Validation |  |  |  |
Informative |  |  |  |
Help |  |  |  |
Additional examples | |||
Regular with dynamic content |  | ||
Regular with structured content |  | ||
The preferred presentation of a tooltip is with a pointing tip near the cursor point, where technically feasible. Examples:
 |  |
 |  |
Placement and Positioning
Tooltips should appear adjacent to the mouse cursor. This is usually below and to the right of the cursor (except for with right-to-left languages, where the tooltip may appear to the left instead).
For validation tooltips see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/849479282/Field+Validation#Structure.
The tooltip should not move with the mouse cursor while it remains within the target area. See the Interaction section below.
The tooltip should not cover the element it relates to, which the user may need to interact with. For example:
Correct | Incorrect |
|---|---|
 |  |
Content
When applied to Buttons, tooltips should include a short and clear description of the action the user can perform. For example:
Target area | Correct | Incorrect |
|---|---|---|
 | "Generate a schedule for selected employees" Explains the main operation of the button, and what it will be applied to. | "Generate schedule" Only repeats the button text without further information, which is redundant. |
| "Search within the tree of the organization" Explains the main operation of the element, including the information it relates to. | "Will search all trees of the organization excluding dates or any other information not relevant to the organization." The text is too long, and includes unnecessary information which can be understood from the element’s context. |
Interaction
Tooltip presentation
The behavior of tooltips depends on the context of the user’s interaction. General
Detailed cursor interaction guidelines
Action | Behavior |
|---|---|
Cursor moves into a target area and remains within it for 1.5 seconds (including the loadings time of the content). | Display tooltip. The tooltip should not move with the cursor while it remains within the target area. |
Cursor leaves the target area, without moving to another target area. | Close the tooltip immediately. This resets the interaction. |
Cursor is moved to another target area in less than 1 second. | Remove the current tooltip and show the tooltip for the new target area immediately. |
Cursor remains within the same target area. | For standard content, continue to show the tooltip for 12 seconds. |
Graphs and micro charts
...
Graphs and charts usually requires a quicker response to present the information.
...
Action
...
Behavior
...
Cursor is first moved into the target area.
...
Display visual feedback of hover within 0.1 seconds.
...
Cursor remains stationary within the target area for 0.7 seconds (including the loadings time of the content).
...
Display tooltip. The tooltip should not move with the cursor while it remains within the target area.
Other interactions should follow the General interaction guidelines.
Tooltips with action options
Follow the General interaction guidelines, with the following exceptions:
...
The tooltip should continue to be shown while the mouse cursor is in either the target area OR the tooltip area.
...
Tooltips with action options
Follow the General interaction guidelines, with the following exceptions:
The tooltip should continue to be shown while the mouse cursor is in either the target area OR the tooltip area.
After the mouse cursor leaves the target area AND the tooltip area, close the tooltip after 1 second.
...
A video example of incorrect behavior:
Incorrect | Correct |
|---|---|
 |  |
Notice how the tooltip position changes as the mouse cursor moves over different parts of the elements, such as the icon, label, and drop-down arrow.
Leaving the target area should reset the interaction, as explained above.
General
Tooltips on graphs may sometimes add additional graphical elements, to help the user to visualize and interact with the data.
See the Queue Analytics example, where a vertical line has been added with the tooltip to highlight the hour:
...
Using Esc. on the keyboard should hide the tooltip while the mouse cursor is still within the target area. Leaving the target area should reset the interaction, as explained above.added with the tooltip to highlight the hour:
...
Best practices
Try to avoid using tooltips with actions in them.
...
If your content is longer than 250 chars characters → use consider using a Popover.
To show vital options. Using a tooltip should not be the only way to accomplish a task.
To just repeat what is already on the screen. Tooltips should provide additional information.
...
display the tooltip as described in Interactions above.Clicking
Using Esc. should close the tooltip as described in Interactions above on the keyboard should hide the tooltip while the mouse cursor is still within the target area.
When a tooltip is presented on a disabled button (for specific use cases), the button should be focus enabled.
Responsive design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
...
When using access methods which support hover, such as a pointer, tooltips should be shown on hover.
On touch devices, tooltips should be shown on tap-and-hold.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<script>
$(function () {
$('[data-toggle="tooltip"], [data-toggle-second="tooltip"]').tooltip({trigger: 'hover', delay: { "show": 100, "hide": 0 }});
});
</script>
<div class="card">
<div class="card-header">Tooltips <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="Aliquam sollicitudin, tincidunt mi volutpat semper" data-html="true" >
Regular Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="Aliquam sollicitudin, tincidunt mi volutpat semper" data-html="true" >
Regular Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="<header>Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper sollicitudin, tincidunt</main>" data-html="true" >
Header Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="<header>Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper sollicitudin, tincidunt</main>" data-html="true" >
Header Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-error" data-placement="right" title="<header>Error Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Error Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-error" data-placement="right" title="<header>Error Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Error Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error Minimal Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-error minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Error Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-error minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Error Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Warning Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warning" data-placement="right" title="<header>Warning Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Warning Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warning" data-placement="right" title="<header>Warning Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Warning Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Warning Minimal Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warning minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Warning Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warning minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Warning Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Information Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-info" data-placement="right" title="<header>Informative Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Information Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-info" data-placement="right" title="<header>Informative Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Information Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Information Minimal Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-info minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Information Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-info minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Information Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Help Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-help" data-placement="right" title="<header>Help Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Help Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-help" data-placement="right" title="<header>Help Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Help Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Help Minimal Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-help minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Help Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-help minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Help Tooltip
</button></script></code></pre>
</div>
</div>
</div>
</div> |
...