HTML

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

Tooltip top

Copied to clipboard

Tooltip right

Copied to clipboard

Tooltip bottom

Copied to clipboard

Tooltip left

Copied to clipboard

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 .pf-c-tooltip Positions the tooltip to the left of the element.
.pf-m-right .pf-c-tooltip Positions the tooltip to the right of the element.
.pf-m-top .pf-c-tooltip Positions the tooltip to the top of the element.
.pf-m-bottom .pf-c-tooltip Positions the tooltip to the bottom of the element.

CSS Variables

--pf-c-tooltip--MaxWidthc_tooltip_MaxWidth18.75rem
--pf-c-tooltip__arrow--Heightc_tooltip__arrow_Height0.9375rem
--pf-c-tooltip__arrow--Widthc_tooltip__arrow_Width0.9375rem
--pf-c-tooltip__arrow--m-bottom--Transformc_tooltip__arrow_m_bottom_Transformtranslate(-50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-left--Transformc_tooltip__arrow_m_left_Transformtranslate(50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-right--Transformc_tooltip__arrow_m_right_Transformtranslate(-50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-top--Transformc_tooltip__arrow_m_top_Transformtranslate(-50%,50%) rotate(45deg)
--pf-c-tooltip__content--BackgroundColorc_tooltip__content_BackgroundColor#151515
--pf-c-tooltip__content--Colorc_tooltip__content_Color#fff
--pf-c-tooltip__content--FontSizec_tooltip__content_FontSize0.875rem
--pf-c-tooltip__content--PaddingBottomc_tooltip__content_PaddingBottom1rem
--pf-c-tooltip__content--PaddingLeftc_tooltip__content_PaddingLeft1.5rem
--pf-c-tooltip__content--PaddingRightc_tooltip__content_PaddingRight1.5rem
--pf-c-tooltip__content--PaddingTopc_tooltip__content_PaddingTop1rem