Skip to Content
Patternfly Logo

Tooltip

Tooltips are used to provide short, clarifying descriptions of elements on a page. They are typically used to clarify the meaning of icons.

ExamplesDocumentationCSS Variables

Examples

Top

Bottom

Left

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

AttributeApplied toOutcome
role="tooltip".pf-c-tooltipAdds 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

ClassApplied toOutcome
.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.pf-c-tooltipPositions the tooltip to the left of the element.
.pf-m-right.pf-c-tooltipPositions the tooltip to the right of the element.
.pf-m-top.pf-c-tooltipPositions the tooltip to the top of the element.
.pf-m-bottom.pf-c-tooltipPositions the tooltip to the bottom of the element.
.pf-m-text-align-left.pf-c-tooltip__contentModifies tooltip content to text align left.

CSS Variables

.pf-c-tooltip--pf-c-tooltip--MaxWidthc_tooltip_MaxWidth
18.75rem
.pf-c-tooltip--pf-c-tooltip--BoxShadowc_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--PaddingTopc_tooltip__content_PaddingTop
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingRightc_tooltip__content_PaddingRight
1rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingBottomc_tooltip__content_PaddingBottom
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingLeftc_tooltip__content_PaddingLeft
1rem
.pf-c-tooltip--pf-c-tooltip__content--Colorc_tooltip__content_Color
#fff
.pf-c-tooltip--pf-c-tooltip__content--BackgroundColorc_tooltip__content_BackgroundColor
#151515
.pf-c-tooltip--pf-c-tooltip__content--FontSizec_tooltip__content_FontSize
0.875rem
.pf-c-tooltip--pf-c-tooltip__arrow--Widthc_tooltip__arrow_Width
0.9375rem
.pf-c-tooltip--pf-c-tooltip__arrow--Heightc_tooltip__arrow_Height
0.9375rem
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--TranslateXc_tooltip__arrow_m_top_TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--TranslateYc_tooltip__arrow_m_top_TranslateY
50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--Rotatec_tooltip__arrow_m_top_Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--TranslateXc_tooltip__arrow_m_right_TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--TranslateYc_tooltip__arrow_m_right_TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--Rotatec_tooltip__arrow_m_right_Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--TranslateXc_tooltip__arrow_m_bottom_TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--TranslateYc_tooltip__arrow_m_bottom_TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--Rotatec_tooltip__arrow_m_bottom_Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--TranslateXc_tooltip__arrow_m_left_TranslateX
50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--TranslateYc_tooltip__arrow_m_left_TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--Rotatec_tooltip__arrow_m_left_Rotate
45deg