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 VariablesExamples
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 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 | .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. |
.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 | 1rem | ||
| .pf-c-tooltip | --pf-c-tooltip__content--PaddingBottom | 0.5rem | ||
| .pf-c-tooltip | --pf-c-tooltip__content--PaddingLeft | 1rem | ||
| .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.9375rem | ||
| .pf-c-tooltip | --pf-c-tooltip__arrow--Height | 0.9375rem | ||
| .pf-c-tooltip | --pf-c-tooltip__arrow--m-top--Transform | translate(-50%, 50%) rotate(45deg) | ||
| .pf-c-tooltip | --pf-c-tooltip__arrow--m-right--Transform | translate(-50%, -50%) rotate(45deg) | ||
| .pf-c-tooltip | --pf-c-tooltip__arrow--m-bottom--Transform | translate(-50%, -50%) rotate(45deg) | ||
| .pf-c-tooltip | --pf-c-tooltip__arrow--m-left--Transform | translate(50%, -50%) rotate(45deg) | ||
