Tooltip

A tooltip is a small, temporary, overlay window that provides additional information about an on-screen element.

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.

Edit this page on GitHub