Examples
Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Left with top and bottom positions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Bottom with left and right positions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
Left aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
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{-top/bottom} | .pf-c-tooltip | Positions the tooltip to the left (or left top/left bottom) of the element. |
.pf-m-right{-top/bottom} | .pf-c-tooltip | Positions the tooltip to the right (or right top/right bottom) of the element. |
.pf-m-top{-left/right} | .pf-c-tooltip | Positions the tooltip to the top (or top left/top right) of the element. |
.pf-m-bottom{-left/right} | .pf-c-tooltip | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
.pf-m-text-align-left | .pf-c-tooltip__content | Modifies tooltip content to text align left. |
CSS variables
.pf-c-tooltip | --pf-c-tooltip--MaxWidth | 18.75rem | |
.pf-c-tooltip | --pf-c-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--PaddingTop | 0.5rem | |
.pf-c-tooltip | --pf-c-tooltip__content--PaddingRight | 0.5rem | |
.pf-c-tooltip | --pf-c-tooltip__content--PaddingBottom | 0.5rem | |
.pf-c-tooltip | --pf-c-tooltip__content--PaddingLeft | 0.5rem | |
.pf-c-tooltip | --pf-c-tooltip__content--Color | #fff | |
.pf-c-tooltip | --pf-c-tooltip__content--BackgroundColor | #151515 | |
.pf-c-tooltip | --pf-c-tooltip__content--FontSize | 0.875rem | |
.pf-c-tooltip | --pf-c-tooltip__arrow--Width | 0.5rem | |
.pf-c-tooltip | --pf-c-tooltip__arrow--Height | 0.5rem | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-top--TranslateX | -50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-top--TranslateY | 50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-top--Rotate | 45deg | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-right--TranslateX | -50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-right--TranslateY | -50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-right--Rotate | 45deg | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-bottom--TranslateX | -50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-bottom--TranslateY | -50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-bottom--Rotate | 45deg | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-left--TranslateX | 50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-left--TranslateY | -50% | |
.pf-c-tooltip | --pf-c-tooltip__arrow--m-left--Rotate | 45deg |
View source on GitHub