Table of Contents

outline	true
style	square

Description

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

Image Removed

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 header, icons, dynamic content, actionable buttons, links, tables Etc...

Examples:

...

Image Removed

...

Image Removed

...

Error

see Field Validation

...

Image Removed

...

Warning

see Field Validation

...

Image Removed

...

Image Removed

...

Image Removed

...

Image Removed

Regular with heading - 2 lines (Calendar)

...

Image Removed

...

Image Removed

...

Image Removed

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 table

...

Ribbon button

Image Removed

...

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

Image Removed

"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 tooltip is with a small "triangle" at the outline to point mouse cursor (when technically feasible).

See examples:

Image Removed

Positioning

...

Usually to the right (in LTR and below of the target area.

...

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 target area: display visual feedback of hover within 0.1 seconds..
If cursor remains stationary within target area for 1.5 seconds,
1. Display tooltip on location of the cursor currently within target area (position of tooltip doesn't change while cursor is inside target area)
If cursor had moved to another target area in less than 1 second, remove current tooltip and show tooltip for new target after 0.1 seconds
Keep displaying the tooltip until the cursor has left the target area for 12 seconds or unlimited depending on the content complexity
1. Once the cursor left the target area close the tooltip after 0.1 seconds

Graph or micro chart

Usually require more quick response presenting information.

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

For example:

Image Removed

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

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

A video example of an incorrect behaviour:

Notice how the tooltip changes position within the same component on different elements such as Icon, label, and dropdown arrow)
View file
name Screen Recording 2019-07-28 at 11.58.44.mov
height 250

General

...

Best practices

Tooltips should not be used as the only way to accomplish a task (should not be vital for the task)
A formatted structure is easier to read than big chunk (see in additional examples under Content)
Keep it short - If you reach more than 250 chars, reconsider the tooltip and use a pop-over
Try to avoid tooltip with actions in them
Tooltips should be informative and should not just repeat what is already on the screen (i.e. redundant)

Transition

Tooltip should appear with an animated transition and not at once

See video:

View file

name	Screen Recording 2019-12-29 at 10.24.57.mov
height	150

Accessibility compliance

Focus management

We already set a 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 772244056
Clicking Esc. should dismiss the tooltip as described above in 772244056

Screen reader support

Should be done automatically by the screen reader.

Contrast & size compliance

Complied by design

Design

...

Image Removed

...

Image Removed

delete this section when finished

https://www.appcues.com/blog/tooltips

https://docs.microsoft.com/en-us/windows/desktop/uxguide/ctrl-tooltips-and-infotips

https://www.nngroup.com/articles/tooltip-guidelines/

New LUX design

...

sanitize	false

...

Table of Contents

minLevel	1
maxLevel	3

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 text and a link,.

Examples:

Component	Regular size	With pointing tip	Small size
Regular	Image Added	Image Added	Image Added
Regular with heading	Image Added	Image Added
Error See Field Validation	Image Added	Image Added	Image Added
Warning See Field Validation	Image Added	Image Added	Image Added
Informative	Image Added	Image Added	Image Added
Help	Image Added	Image Added	Image Added
Additional examples
Regular with dynamic content	Image Added
Regular with structured content	Image Added

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

Image Added	Image Added
Image Added	Image Added

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

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

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

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. For complex content, continue to show the tooltip for an unlimited time.

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 parts of an element which the tooltip relates to. All parts of the target area should be treated as one single target area.

A video example of incorrect behavior:

Incorrect	Correct
Image Added	Image Added

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:

...

Best practices

Try to avoid using tooltips with actions in them.

Use short, well-structured content which is easy to read. See Content above.

Don’t use:

If 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.
To just repeat what is already on the screen. Tooltips should provide additional information.

Transition

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

...

Accessibility compliance

Focus management

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

Focusing on an element which has a tooltip should:

display the tooltip 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/b6JJj6K	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 32	New Version Current
Changes made by	Asaf Ben-Oved	Asaf Ben-Oved
Saved on	Apr 19, 2020	Mar 04, 2024

Content Comparison

Versions Compared

Key

Description

Usage & Behaviour

General guidelines

Structure

Content

Placement or Positioning

Interaction

Tooltip presentation

Target area

General

Best practices

Transition

Accessibility compliance

Focus management

Screen reader support

Contrast & size compliance

Design

New LUX design

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

Responsive design

Design

Code