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.

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip--MaxWidth
18.75rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip--BoxShadow
0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--Color
(In light theme) #fff
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--BackgroundColor
(In light theme) #292929
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--FontSize
0.75rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__content--BorderRadius
6px
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--Width
0.9375rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--Height
0.9375rem
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--BackgroundColor
(In light theme) #292929
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--BoxShadow
0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-top--TranslateX
-50%
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-top--TranslateY
50%
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-top--Rotate
45deg
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-right--TranslateX
-50%
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-right--TranslateY
-50%
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-right--Rotate
45deg
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-bottom--TranslateX
-50%
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-bottom--TranslateY
-50%
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-bottom--Rotate
45deg
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-left--TranslateX
50%
:where(:root, .pf-v6-c-tooltip)--pf-v6-c-tooltip__arrow--m-left--TranslateY
-50%
:where(:root, .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
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.