In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Tooltip

A tooltip is a content cell providing information on hover.

General guidelines

Use the Tooltip to provide more information (e.g.: give more details about data in a visual, show all of a truncated text, etc.) or to explain an element’s function (e.g.: the function of an icon or a button, etc.).

Various components to apply tooltips in your design depending on the element position (top, bottom, left/right).

Picture shows a tooltip showing a definition on the top of a link
Best practices
  • Use the tooltip for brief and concise information that provides complementary information. 
  • If the information is totally essential for the user’s choice, opt to show it directly in the interface.
  • Choose a Modal or a Popover when the content requires a complementary action.
  • Adapt the opening of the tooltip in relation to the position of the element within the interface (top, bottom, left, right).
  • The tooltip generally appears on hover (for desktop versions) or on tap (for mobile versions).

 

Visual guidelines

Placement

The Tooltip superimposes itself on the screen. In relation to the position of the element within the interface, it may open from the bottom, the top, the left or the right. 

The arrow that links the tooltip to the element must be located at the same level as the target element.

Picture shows ATA definition on a toooltip on a info icon buttton.

Size

The tooltip has no minimum size. His size depends on its content : the text.

Picture shows the difference sizes of the tooltip according to the content.
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top