Tooltips

The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.

Tooltips in Back Office are generated dynamically using the external JS library - Drooltip. For now we use tooltips only when hovering over the search result on desktop. Tooltips are disabled on mobile and tablets.

Example of the tooltip in search results

Design guideline

Default tooltip used in BO is displayed on the right side of the component, other version will be added later depending on the needs.