| Table of Contents | ||||
|---|---|---|---|---|
|
Description
Tooltips are small text like bubbles that appear when the user hovers an element.
 |
For the purpose of this document, tooltips and infotips are the same
Usage & Behaviour
General guidelines
Structure
Most tooltips contain plain text which usually describes the control/object they point to.
Content can also be tooltips with a header, icons, dynamic content, actionable buttons, links, tables Etc...
Examples:
...
Component
...
Regular size
...
Small size
...
Regular
...
Regular with heading
...
Error
see Field Validation
...
...
Warning
see Field Validation
...
Informative
...
Help
...
...
Additional examples (from different apps)
...
Regular with dynamic content (Calendar | statistics)
...
Regular with heading - 2 lines (Calendar)
...
Regular with structured content (Queue Analytics, Forecast)
...
Content
When the tooltip is applied to buttons, use user action-oriented copy that communicates the value in a straight forward manner.
See examples in the table:
...
Target area
...
Correct
...
Incorrect
...
"Generate a schedule for selected employees"
Rationale: explaining the main operation of the button including who it works on
...
"Generate schedule"
Rationale: repeating the same text as the button is redundant
...
"Search within the listed tree of organisation"
Rationale: explaining the main operation of the field including who it works on
...
"will search upon all trees of organisation excluding the dates or any other non-organisation relevant information. "
Rationale: Too long, and using unnecessary information which can be understood from context of the field and screen
Placement or Positioning
Preferred usage for a tooltip is with a small "triangle" at the outline to point mouse cursor (when technically feasible).
See examples:
|  |
 |  |
Positioning
The position of the tooltip should be where the mouse cursor last position. See Interaction section
Usually to the right (in LTR and below of the target area.
Avoid using the tooltip covering an element the user will interact with.
For example:
Correct | Incorrect |
|---|---|
|  |
Interaction
Tooltip presentation
The following steps describe how should the tooltip be presented according to user behavior and context
Regular (e.g. truncation of any sort):
...
Mouse cursor enters the target area: display visual feedback of hover within 0.1 seconds.
...
| Table of Contents | ||||
|---|---|---|---|---|
|
Description
Tooltips are small text bubbles that appear when the user hovers over an element.
|
(For the purpose of this document, tooltips and infotips are the same).
Usage & Behaviour
General guidelines
Structure
Most tooltips contain plain text, which usually describes the control or element they relate to.
A tooltip may also contain a header, icons, dynamic content, actionable buttons, links, tables, and other content elements.
Examples:
Component | Regular size | Small size | ||||||
|---|---|---|---|---|---|---|---|---|
Regular |  |  | ||||||
Regular with heading |  | |||||||
Error See Field Validation |  |  | ||||||
Warning see Field Validation |  |  | ||||||
Informative |  |  | ||||||
Help |  |  | ||||||
Additional examples (from different applications) | ||||||||
Regular with dynamic content (Calendar | Statistics) |  | |||||||
Regular with 2 line header (Calendar)
|  | |||||||
Regular with structured content (Queue Analytics, Forecast) |  | |||||||
The preferred presentation of a tooltip is with a small triangle near the cursor point, where technically feasible. Examples:
| |
| |
Placement and Positioning
Tooltips should appear adjacent to the cursor. This is usually below and to the right of the cursor (except for with right-to-left (RTL) languages, where the tooltip may appear to the left instead).
The tooltip should not move with the cursor while it remains within the target area. See Interaction 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 organisation" Explains the main operation of the element, including the information it relates to. | "Will search all trees of the organisation excluding dates or any other information not relevant to the organisation." The text is too long, and includes unnecessary information which can be understood from the element’s context. |
Interaction
Tooltip presentation
The following steps describe how should the tooltip be presented according to user behavior and context.
The behavior of tooltips depends on the context of the user’s interaction.
Regular (e.g. truncation of any sort):
Mouse cursor enters the target area: displayvisual feedback of hoverwithin0.1seconds.If cursor remains stationary within the target area for1.5seconds (including the loading time of content), display tooltip on the location of the cursor currently within the target area (position of tooltip doesn't change while the cursor is inside target area)If cursor had moved to another target area in less than1second, remove current tooltip and show tooltip for the new target after0.1secondsKeep displaying the tooltip until the cursor has left the target area for12seconds orunlimiteddepending on the content complexity. Once the cursor left the target area close the tooltip after 0.1 seconds
General interaction guidelines
Action | Behavior |
|---|---|
Cursor is moved into the target area within 0.1 seconds. | Display visual feedback of hover |
Cursor remains stationary within the target area 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. | Close the tooltip after 0.1 seconds. |
Cursor is moved to another target area in less than 1 second |
...
. | Remove the current tooltip |
...
. |
...
area. |
...
Keep displaying the tooltip until the cursor has left the target area for 12 seconds or unlimited depending on the content complexity. Once the cursor left the target area close the tooltip after 0.1 seconds
...
Cursor remains within the same target area. | For standard content, continue to show the tooltip for 12 seconds. |
Graphs and micro charts
It usually requires more quick response presenting the information.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |
...
Screen thumbnail | |
|---|---|
...
...
...
...
https://www.nngroup.com/articles/tooltip-guidelines/
...
...
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/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/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 src="http://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></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">Plain 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" >
Plain 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" >
Plain 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">Plain 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">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">Info 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" >
Info 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" >
Info 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>
</div>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip({delay: { "show": 100, "hide": 0 }});
$('.is-invalid').on('shown.bs.tooltip', function () {
var x = $(this).offset().left + $(this).width();
var y = $(this).offset().top;
$('.bs-tooltip-right').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
});
})
</script> |
...