...

Table of Contents

outline	true
style	square

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

Examples:

Component	Regular size
Regular

Image Removed

Image Added

Regular with heading

Image Removed

Image Added

Error

see Field Validation

Image Removed

Image Added

Warning

see Field Validation

Image Removed

Image Added

Informative

Image Removed

Image Added

Help

Image Removed

Image Added
Additional examples (from different apps)
Regular with dynamic content (Calendar \| statistics)

Image Removed

Image Added

Regular with heading - 2 lines (Calendar)

Anchor

	Structured
	Structured

Image Removed

Image Added

Regular with structured content (Queue Analytics, Forecast)

Image Removed

Image Added

Regular with actions(e.g. buttons)

Image Removed

Image Added

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

Image Removed

Image Added

"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

Image Added

"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:Image Removed

...

Positioning

Position of tooltip should be where 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:
Image RemovedImage Added

Interaction

Tooltip presentation

...

Regular (e.g. truncation of any sort):

Mouse cursor enters the target area: display visual feedback of hover within 0.1 seconds..
If cursor remains stationary within the target area for 1.5 seconds,
1. 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 than 1 second, remove current tooltip and show tooltip for the 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 requires more quick response presenting the 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 an internal target area.

A video example of an incorrect behaviour behavior:

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

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

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 filename

Screen Recording 2019-12-29 at 10.24.57.mov

...

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
Tooltips#Interaction
Clicking Esc. should dismiss the tooltip
as described
as described above in
772244056
Tooltips#Interaction

Screen reader support

Should be done automatically by the screen reader.

Contrast & size compliance

Complied by design

Design

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

Image Removed

Image Added

https://zpl.io/anKN0QA

Image Removed

Image Added

...

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

Html macro

sanitize	false

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

...

Version	Old Version 32	New Version 33
Changes made by	Asaf Ben-Oved	Asaf Ben-Oved
Saved on	Apr 19, 2020	May 10, 2020

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