Tooltip

Style

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.

Light theme

Dark theme

Responsive design

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

Small screens

Interaction states

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

Best practices

Accessibility

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

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.

Pairing

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

Spacing

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.