Liferay.Design / Lexicon
shift
F
Get StartedResources
Part of Liferay, IncPowered by Gatsby and Netlify

Popovers and Tooltips

Sign In

Popovers and Tooltips are patterns used to show helpful information in two different ways.

Popovers

VIEW IN CLAY

four different popovers with the arrow to the left, or right or top or down

Usage

Popovers are used together with the question mark icon to communicate to the user that there is useful information for them to read. Popovers contain helpful information such as an explanation of a context.

help icon

Dos and Don'ts

  1. For readability, keep a distance of 8px between text and the icon.
keep 8 pixels between title and help icon

Do

do not place it nearer than 8 pixels

Don't


  1. Keep a distance of 16px between text and the icon.
keep 16 pixels between a section title and help icon

Do

do not place it nearer than 16 pixels

Don't



Attributes

keep 16 pixels between a section title and help icon

Tooltips

VIEW IN CLAY

Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.

Two examples of tooltips. The first one has an extensive description of an Application. The second one says "Add Template".

Positions

Tooltips arrows can be placed in 9 different positions:

Nine tooltips with their position name within.

Usage

  • Tooltips are used to help explain an icon button's meaning.
  • They can also be used with links and images.
  • Tooltips should be brief and contain a small amount of text. Lexicon recommends a maximum of 280 characters. If your description is longer than 280 characters, please use a popover instead.
  • The tooltip appears on hover state and disappears on mouse out. This pattern does not exist on mobile, as hover is not a possible state on mobile devices.
  • Make sure you properly position the arrow to point to the correct interface element. Improper placement can confuse the user.
  • When possible, try to not overlap other interaction elements in the same component.

Dos and Don'ts

Use tooltips on elements that trigger an action, such as button icons.

tooltip on button icon hover action

Do

tooltip on plain text hover action

Don't


How can this be improved? Contribute today!
Menu