Tooltip
Tooltips are used to provide short, clarifying descriptions of elements on a page. They are typically used to clarify the meaning of icons.
ExamplesPropsCSS VariablesExamples
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| appendTo | Element | ((ref: Element) => Element) | No | () => document.body | The element to append the tooltip to, defaults to body |
| aria | 'describedby' | 'labelledby' | No | 'describedby' | Aria-labelledby or aria-describedby for tooltip |
| boundary | 'scrollParent' | 'window' | 'viewport' | HTMLElement | No | 'window' | If enableFlip is true, the tooltip responds to this boundary |
| children | ReactElement<any> | Yes | The reference element to which the tooltip is relatively placed to | |
| className | string | No | '' | Tooltip additional class |
| content | React.ReactNode | Yes | Tooltip content | |
| distance | number | No | 15 | Distance of the tooltip to its target, defaults to 15 |
| enableFlip | boolean | No | true | If true, tries to keep the tooltip in view by flipping it if necessary |
| entryDelay | number | No | 500 | Delay in ms before the tooltip appears |
| exitDelay | number | No | 500 | Delay in ms before the tooltip disappears |
| flipBehavior | 'flip' | ('top' | 'bottom' | 'left' | 'right')[] | No | ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'] | The desired position to flip the tooltip to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the tooltip to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with tooltip is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the tooltip on the left. |
| isAppLauncher | boolean | No | false | If true, displays as an application launcher |
| maxWidth | string | No | tooltipMaxWidth && tooltipMaxWidth.value | Maximum width of the tooltip (default 12.5rem) |
| position | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | 'top' | Tooltip position. Note: With 'enableFlip' set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior prop. |
| trigger | string | No | 'mouseenter focus' | Tooltip trigger: click, mouseenter, focus, manual |
| isContentLeftAligned | boolean | No | false | Flag to indicate that the text content is left aligned |
| isVisible | boolean | No | false | value for visibility when trigger is 'manual' |
| zIndex | number | No | 9999 | z-index of the tooltip |
| tippyProps | Partial<TippyProps> | No | {} | additional Props to pass through to tippy.js |
| id | string | No | '' | ID |
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) | ||
