Tooltip

A Tooltip is a floating text area triggered by a user that provides helpful or contextual information.

Tooltip component sample

A tooltip can be placed on a light or dark background. It includes text wrapped in a background container that can sometimes have a drop shadow. The background container also includes an arrow that can point to different icons.

Tooltip component style

Light theme

Tooltip component, light theme

Dark theme

Tooltip component, dark theme

Content

Content in a tooltip is limited to text only and should be brief and helpful to a user.

Warning
If content needs to be more thorough or interactive elements need to be included, use a Popover or Modal component instead.

Icon pairing

A tooltip should always be paired with an icon, link, or other small element.

Tooltip component icon pairing

Orientations

A tooltip is available in several orientations depending on the amount of content or available screen space. When choosing an orientation, be mindful of how a tooltip can potentially cover up important content or get cut off by the browser window.

Tooltip component orientations

How a user interacts with a tooltip depends on what size the screen is.

  • On large screens, a tooltip disappears after a user moves their cursor away from the icon.
  • On large screens, a tooltip disappears after the focus indicator is moved away from the icon.
  • On small screens, a tooltip disappears after a user taps the icon again.
Tooltip component behavior

A tooltip can be used on both large and small screens depending on the amount of content or available screen space.

Breakpoints

A tooltip mostly remains the same on large and small screens.

Large screens

Tooltip component responsive design, large screens

Small screens

Tooltip component responsive design, small screens

A tooltip appears next to an icon on hover, focus, or when tapped.

Tooltip component interaction states, hovered or tapped

Accessibility

Do not use a dark theme (white) tooltip on a light environment because it will blend into the background too much.

Tooltip component best practice 1

Orientation

Content within a tooltip should not be cut off by the browser window. Change the tooltip orientation or break the text into multiple lines if it does.

Tooltip component best practice 2

Pairing

Do not add a tooltip to things that do not require further explanation, like obvious links or components.

Tooltip component best practice 3

A Tooltip uses PatternFly 4 spacers to define spacing values between elements. Every tooltip orientation contains the same amount padding in between the arrow and icon.

Tooltip component spacing, light theme
Tooltip component spacing, dark theme

To give feedback about anything on this page or to request a new Component, contact us.

To learn more about how to use foundational elements, visit the Foundations section.