Description

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

Open

(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

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

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

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

Content

When applied to Buttons, tooltips should include a short and clear description of the action the user can perform. For example:

Interaction

Tooltip presentation

The behavior of tooltips depends on the context of the user’s interaction.

Detailed cursor interaction guidelines

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:

• 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

Code