Description

Tooltips are small text bubbles that appear when the user hovers over an element.

Verint LUX Design System > Tooltips > tooltip with point 01.png

(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 behavior of tooltips depends on the context of the user’s interaction.

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. After 0.1 seconds, show the tooltip for the new target area.
Cursor remains within the same target area.	For standard content, continue to show the tooltip for 12 seconds. For complex content, continue to show the tooltip for an unlimited time.

Graphs and micro charts

It usually requires more quick response presenting the information.

Mouse cursor enters the target area: display visual feedback of hover within 0.1 seconds..
If cursor remains stationary within the target area for 0.7 seconds
<Continue as regular or tooltip>

For example:

Verint LUX Design System > Tooltips > image2019-12-18_11-33-52.png

Tooltips with action

Follow the same Regular tooltip interaction with the following changes

While the mouse cursor is on the target area OR tooltip area, keep displaying the tooltip
Once the cursor left the target AND tooltip area, close the tooltip after 1 seconds

Target area

The target area should include all elements to which the tooltip is pointing.
All parts of the target area should be treated as an internal target area.

A video example of incorrect behavior:

Notice how the tooltip changes position within the same component on different elements such as Icon, label, and dropdown arrow)

Screen Recording 2019-07-28 at 11.58.44.mov

General

Tooltips on graphs may sometimes add additional graphical elements to help the user focus on the visual.
See example in Queue Analytics where a vertical line is added with tooltip to help maintain focus of hour:
Using "Esc" on the keyboard should hide the tooltip while the mouse cursor is still within the target area. Getting out of the target area should reset the interaction as explained above.

Best practices

Try to avoid tooltip with actions in them

Use A formatted structure is easier to read than big chunk (see in additional examples under Content)

Don’t use:

If you reach more than 250 chars, reconsider the tooltip and use a pop-over
Tooltips should not be used as the only way to accomplish a task (should not be vital for the task)
Just repeat what is already on the screen (i.e. redundant)

Transition

The tooltip should appear with an animated transition and not at once

See video:

Screen Recording 2019-12-29 at 10.24.57.mov

Accessibility compliance

Focus management

We already set general guidelines described in /wiki/spaces/UX/pages/308969693

Focusing on an element with tooltip should

Display the tooltip with the same time constraints described above in Tooltips#Interaction
Clicking Esc. should dismiss the tooltip as described above in Tooltips#Interaction

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Zeplin link	Screen thumbnail
https://zpl.io/b6JJj6K
https://zpl.io/anKN0QA

Code

<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>