Table of Contents

outlineminLevel	true1
stylemaxLevel	square3

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 &

...

Behavior

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, status icons, dynamic content, actionable buttons, links, tables, and other content elementstext and a link,.

Examples:

Component	Regular size	With pointing tip	Small size
Regular	Image Modified	Image Added	Image Modified
Regular with heading	Image Modified	Image Added
Error See Field Validation	Image Modified	Image Added	Image Modified
Warning

see

See Field Validation	Image Modified	Image Added	Image Modified
Informative	Image Modified	Image Added	Image Modified
Help	Image Modified	Image Added	Image Modified
Additional examples

(from different applications)


Regular with dynamic content

(Calendar | Statistics)

Image Removed

Image Added
Regular with

2 line header (Calendar) AnchorStructuredStructured

Image Removed

Regular with structured content (Queue Analytics, Forecast)

Image Removed

structured content

Image Added

The preferred presentation of a tooltip is with a small triangle pointing tip near the cursor point, where technically feasible. Examples:

Image Modified	Image Added
Image Modified

Image Removed

Image Modified

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 (RTL) 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 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
Image Modified	Image Modified

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

Image Removed

Image Added

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

Image Modified

"Search within the tree of the

organisation

organization"

Explains the main operation of the element, including the information it relates to.

"Will search all trees of the

organisation

organization excluding dates or any other information not relevant to the

organisation

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

is moved

moves into

the

a target area

within 0.1 seconds.

Display visual feedback of hover

Cursor remains stationary within the 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

after 0.1 seconds

immediately. This resets the interaction.
Cursor is moved to another target area in less than 1 second.	Remove the current tooltip

.
After 0.1 seconds,

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

...

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

...

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.

Target area

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

A video example of incorrect behavior:

Incorrect	Correct
Image Added	Image Added

Notice how the tooltip position changes position within the same component on different elements such as Iconas the mouse cursor moves over different parts of the elements, such as the icon, label, and dropdown 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 focus on the visualto visualize and interact with the data.
See example in the Queue Analytics example, where a vertical line is has been added with the tooltip to help maintain focus of highlight the hour:
Image RemovedUsing "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 using tooltips with actions in them.

Use A formatted structure is easier to read than big chunk (see in additional examples under Content)short, well-structured content which is easy to read. See Content above.

Don’t use:

If you reach more than 250 chars, reconsider the tooltip and use a pop-overTooltips should not be used as your content is longer than 250 characters → consider using a Popover.
To show vital options. Using a tooltip should not be the only way to accomplish a task (should not be vital for the task)Just .
To just repeat what is already on the screen (i.e. redundant). Tooltips should provide additional information.

Transition

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

An animated transition should be used when the tooltip appears. See video:

...

Accessibility compliance

Focus management

We already set general guidelines described in /wiki/spaces/UX/pages/308969693Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focusing on an element with which has a tooltip should:

Display 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

...

as described in Interactions above.
Using Esc. 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.

Tooltip behavior depends on the platform and access method being used.

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
https://zpl.io/

anKN0QA

b6JJj6K

Image Removed

Image Added

Code

Html macro

sanitize	false

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

Version	Old Version 40	New Version Current
Changes made by	Asaf Ben-Oved	Asaf Ben-Oved
Saved on	Jul 29, 2020	Mar 04, 2024

Content Comparison

Versions Compared

Key

Description

Usage &

Behavior

General guidelines

Structure

Placement and Positioning

Content

Interaction

Tooltip presentation

Detailed cursor interaction guidelines

Tooltips with action options

Target area

General

Best practices

Transition

Accessibility compliance

Focus management

Design

Responsive design

Design

Code