Skip to content

Tooltip

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

Examples

Top

Right

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) #ffffff
: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

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines