Skip to content
Patternfly Logo

Tooltip

A tooltip is in-app messaging used to identify elements on a page with short, clarifying text.

Examples

Top

Bottom

Left

Left with top and bottom positions


Bottom with left and right positions


Left aligned text

Documentation

Overview

A tooltip is used to provide contextual information for another component on hover. The tooltip itself is made up of two elements: arrow and content. One of the directional modifiers (.pf-m-left, .pf-m-top, etc.) is required on the tooltip component.

Accessibility

Attribute
Applied to
Outcome
role="tooltip"
.pf-c-tooltip
Adds a tooltip role to the tooltip component. Required
aria-describedby="[id of .pf-c-tooltip__content]" or aria-labelledby="[id of .pf-c-tooltip__content]"
[element that triggers the tooltip]
Makes the contents of the tooltip accessible to assistive technologies by associating the tooltip text with the element that triggers the tooltip. Use aria-labelledby if the tooltip provides a label for the element. Use aria-describedby if the element already has an accessible label that is different from the tooltip text. Required

Usage

Class
Applied to
Outcome
.pf-c-tooltip
<div>
Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. Required
.pf-c-tooltip__arrow
<div>
Creates an arrow pointing towards the element the tooltip describes. Required
.pf-c-tooltip__content
<div>
Creates the body of the tooltip. Required
.pf-m-left{-top/bottom}
.pf-c-tooltip
Positions the tooltip to the left (or left top/left bottom) of the element.
.pf-m-right{-top/bottom}
.pf-c-tooltip
Positions the tooltip to the right (or right top/right bottom) of the element.
.pf-m-top{-left/right}
.pf-c-tooltip
Positions the tooltip to the top (or top left/top right) of the element.
.pf-m-bottom{-left/right}
.pf-c-tooltip
Positions the tooltip to the bottom (or bottom left/bottom right) of the element.
.pf-m-text-align-left
.pf-c-tooltip__content
Modifies tooltip content to text align left.

CSS variables

.pf-c-tooltip--pf-c-tooltip--MaxWidth
18.75rem
.pf-c-tooltip--pf-c-tooltip--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-tooltip--pf-c-tooltip__content--PaddingTop
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingRight
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingBottom
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingLeft
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--Color
#fff
.pf-c-tooltip--pf-c-tooltip__content--BackgroundColor
#151515
.pf-c-tooltip--pf-c-tooltip__content--FontSize
0.875rem
.pf-c-tooltip--pf-c-tooltip__arrow--Width
0.5rem
.pf-c-tooltip--pf-c-tooltip__arrow--Height
0.5rem
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--TranslateY
50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--TranslateX
50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--Rotate
45deg

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines