Liferay.Design / Lexicon-1
Get StartedNews
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Popovers and Tooltips

Sign In

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


Popovers are short helpful and/or descriptive pieces of information that appear on hover state.

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


Popovers are used together with the question mark icon as an affordance to let the user understand there is something to read that can be useful. Popovers contain information such as help to understand a context.

help icon


popover attributes


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

the four different positions of a tooltip arrow in a tooltip, 4 tooltip cases


Tooltips are used in with icon buttons to help understanding the metaphor they transmit. They can be also used with links or images.

The tooltip appears on hover state and disappears when hover ends. This pattern does not exist in mobile a hover is not a possible state.

Please make a right use of the arrow positioning as it could drive to misunderstandings when it doesn’t point to the correct interface element.


tooltip attributes

Something to improve? Report an issue!