A Tooltip is a floating text area triggered by a user that provides helpful or contextual information.
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.
Content in a tooltip is limited to text only and should be brief and helpful to a user.
A tooltip should always be paired with an icon, link, or other small element.
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.
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.
A tooltip can be used on both large and small screens depending on the amount of content or available screen space.
A tooltip mostly remains the same on large and small screens.
A tooltip appears next to an icon on hover, focus, or when tapped.
Do not use a dark theme (white) tooltip on a light environment because it will blend into the background too much.
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.
Do not add a tooltip to things that do not require further explanation, like obvious links or components.
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.