Tooltip

A tooltip is a small, temporary, overlay window that provides additional information about an on-screen element.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-tooltip--pf-v6-c-tooltip--MaxWidth
18.75rem
.pf-v6-c-tooltip--pf-v6-c-tooltip--BoxShadow
0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingBlockStart
0.5rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingInlineEnd
1rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingBlockEnd
0.5rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingInlineStart
1rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--Color
(In light theme) #ffffff
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--BackgroundColor
(In light theme) #292929
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--FontSize
0.75rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--BorderRadius
6px
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--Width
0.9375rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--Height
0.9375rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--BackgroundColor
(In light theme) #292929
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--BoxShadow
0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-top--TranslateX
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-top--TranslateY
50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-top--Rotate
45deg
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-right--TranslateX
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-right--TranslateY
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-right--Rotate
45deg
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-bottom--TranslateX
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-bottom--TranslateY
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-bottom--Rotate
45deg
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-left--TranslateX
50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-left--TranslateY
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-left--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--InsetBlockEnd
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--InsetInlineStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--TranslateX
-50%
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--TranslateY
50%
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetBlockStart
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetInlineStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--TranslateX
-50%
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--TranslateY
-50%
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--InsetBlockStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--InsetInlineEnd
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--TranslateX
50%
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--TranslateY
-50%
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetBlockStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetInlineStart
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--TranslateX
-50%
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--TranslateY
-50%
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-left-top, .pf-m-right-top)--pf-v6-c-tooltip__arrow--InsetBlockStart
0
.pf-v6-c-tooltip:is(.pf-m-left-top, .pf-m-right-top)--pf-v6-c-tooltip__arrow--TranslateY
50%
.pf-v6-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetBlockStart
auto
.pf-v6-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetBlockEnd
0
.pf-v6-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left)--pf-v6-c-tooltip__arrow--InsetInlineStart
0
.pf-v6-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left)--pf-v6-c-tooltip__arrow--TranslateX
50%
.pf-v6-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetInlineEnd
0
.pf-v6-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetInlineStart
auto