Examples
On icon with dynamic content
When the tooltip is used as a wrapper and its content will dynamically update, the aria prop should have a value of "none" passed in. This prevents assistive technologies from announcing the tooltip contents more than once. Additionally, the aria-live prop should have a value of "polite" passed in, in order for assistive technologies to announce when the tooltip contents gets updated.
When using a React or selector ref with a tooltip that has dynamic content, the aria and aria-live props do not need to be manually passed in.
Options
position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true.
Entry delay (ms) Exit delay (ms) Animation duration (ms)
flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the starting position. The second option ensures that there are 3 escape positions for every possible starting position (default). This setting is ignored if position prop is set to 'auto'.
Props
Tooltip
| Name | Type | Default | Description |
|---|---|---|---|
| contentrequired | React.ReactNode | Tooltip content | |
| animationDuration | number | 300 | CSS fade transition animation duration |
| appendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | () => document.body | The element to append the tooltip to, defaults to body |
| aria | 'describedby' | 'labelledby' | 'none' | 'describedby' | aria-labelledby or aria-describedby for tooltip. The trigger will be cloned to add the aria attribute, and the corresponding id in the form of 'pf-tooltip-#' is added to the content container. If you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'. |
| aria-live | 'off' | 'polite' | triggerRef ? 'polite' : 'off' | Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the default behavior is 'polite' in order to ensure the tooltip contents is announced to assistive technologies. Otherwise the default behavior is 'off'. |
| children | ReactElement<any> | The trigger reference element to which the Tooltip is relatively placed to. If you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead. Usage: <Tooltip><Button>Reference</Button></Tooltip> | |
| className | string | '' | Tooltip additional class |
| distance | number | 15 | Distance of the tooltip to its target, defaults to 15 |
| enableFlip | boolean | true | If true, tries to keep the tooltip in view by flipping it if necessary |
| entryDelay | number | 300 | Delay in ms before the tooltip appears |
| exitDelay | number | 300 | Delay in ms before the tooltip disappears, Avoid passing in a value of "0", as users should be given ample time to move their mouse from the trigger to the tooltip content without the content being hidden. |
| flipBehavior | | 'flip' | ( | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' )[] | ['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. |
| id | string | `pf-tooltip-${pfTooltipIdCounter++}` | id of the tooltip |
| isContentLeftAligned | boolean | false | Flag to indicate that the text content is left aligned |
| isVisible | boolean | false | value for visibility when trigger is 'manual' |
| maxWidth | string | tooltipMaxWidth.value | Maximum width of the tooltip (default 18.75rem) |
| minWidth | string | 'trigger' | Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width. | |
| onTooltipHidden | () => void | () => {} | Callback when tooltip's hide transition has finished executing |
| position | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | '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. The 'auto' position chooses the side with the most space. The 'auto' position requires the 'enableFlip' prop to be true. |
| trigger | string | 'mouseenter focus' | Tooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop) |
| triggerRef | HTMLElement | (() => HTMLElement) | React.RefObject<any> | The trigger reference element to which the Tooltip is relatively placed to. If you can wrap the element with the Tooltip, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Tooltip triggerRef={() => document.getElementById('reference-element')} /> | |
| zIndex | number | 9999 | z-index of the tooltip |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-tooltip | --pf-v5-c-tooltip--MaxWidth | 18.75rem | ||
| .pf-v5-c-tooltip | --pf-v5-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-v5-c-tooltip--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__content--PaddingTop | 0.5rem | ||
--pf-v5-c-tooltip__content--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__content--PaddingRight | 0.5rem | ||
--pf-v5-c-tooltip__content--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__content--PaddingBottom | 0.5rem | ||
--pf-v5-c-tooltip__content--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__content--PaddingLeft | 0.5rem | ||
--pf-v5-c-tooltip__content--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__content--Color | #fff | ||
--pf-v5-c-tooltip__content--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__content--BackgroundColor | #151515 | ||
--pf-v5-c-tooltip__content--BackgroundColor --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__content--FontSize | 0.875rem | ||
--pf-v5-c-tooltip__content--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--Width | 0.9375rem | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--Height | 0.9375rem | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--BackgroundColor | #151515 | ||
--pf-v5-c-tooltip__arrow--BackgroundColor --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--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-v5-c-tooltip__arrow--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-top--TranslateX | -50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-top--TranslateY | 50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-top--Rotate | 45deg | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-right--TranslateX | -50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-right--TranslateY | -50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-right--Rotate | 45deg | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-bottom--TranslateX | -50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-bottom--TranslateY | -50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-bottom--Rotate | 45deg | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-left--TranslateX | 50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-left--TranslateY | -50% | ||
| .pf-v5-c-tooltip | --pf-v5-c-tooltip__arrow--m-left--Rotate | 45deg | ||
| .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) | --pf-v5-c-tooltip__arrow--Bottom | undefined, 0 | ||
--pf-v5-c-tooltip__arrow--Bottom var(--pf-v5-c-tooltip--m-top--Bottom, 0) undefined, 0 | ||||
| .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) | --pf-v5-c-tooltip__arrow--Left | undefined, 50% | ||
--pf-v5-c-tooltip__arrow--Left var(--pf-v5-c-tooltip--m-top--Left, 50%) undefined, 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) | --pf-v5-c-tooltip__arrow--TranslateX | -50% | ||
--pf-v5-c-tooltip__arrow--TranslateX --pf-v5-c-tooltip__arrow--m-top--TranslateX -50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) | --pf-v5-c-tooltip__arrow--TranslateY | 50% | ||
--pf-v5-c-tooltip__arrow--TranslateY --pf-v5-c-tooltip__arrow--m-top--TranslateY 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) | --pf-v5-c-tooltip__arrow--Rotate | 45deg | ||
--pf-v5-c-tooltip__arrow--Rotate --pf-v5-c-tooltip__arrow--m-top--Rotate 45deg | ||||
| .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) | --pf-v5-c-tooltip__arrow--Top | undefined, 0 | ||
--pf-v5-c-tooltip__arrow--Top var(--pf-v5-c-tooltip--m-bottom--Top, 0) undefined, 0 | ||||
| .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) | --pf-v5-c-tooltip__arrow--Left | undefined, 50% | ||
--pf-v5-c-tooltip__arrow--Left var(--pf-v5-c-tooltip--m-bottom--Left, 50%) undefined, 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) | --pf-v5-c-tooltip__arrow--TranslateX | -50% | ||
--pf-v5-c-tooltip__arrow--TranslateX --pf-v5-c-tooltip__arrow--m-bottom--TranslateX -50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) | --pf-v5-c-tooltip__arrow--TranslateY | -50% | ||
--pf-v5-c-tooltip__arrow--TranslateY --pf-v5-c-tooltip__arrow--m-bottom--TranslateY -50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) | --pf-v5-c-tooltip__arrow--Rotate | 45deg | ||
--pf-v5-c-tooltip__arrow--Rotate --pf-v5-c-tooltip__arrow--m-bottom--Rotate 45deg | ||||
| .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) | --pf-v5-c-tooltip__arrow--Top | undefined, 50% | ||
--pf-v5-c-tooltip__arrow--Top var(--pf-v5-c-tooltip--m-left--Top, 50%) undefined, 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) | --pf-v5-c-tooltip__arrow--Right | undefined, 0 | ||
--pf-v5-c-tooltip__arrow--Right var(--pf-v5-c-tooltip--m-left--Right, 0) undefined, 0 | ||||
| .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) | --pf-v5-c-tooltip__arrow--TranslateX | 50% | ||
--pf-v5-c-tooltip__arrow--TranslateX --pf-v5-c-tooltip__arrow--m-left--TranslateX 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) | --pf-v5-c-tooltip__arrow--TranslateY | -50% | ||
--pf-v5-c-tooltip__arrow--TranslateY --pf-v5-c-tooltip__arrow--m-left--TranslateY -50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) | --pf-v5-c-tooltip__arrow--Rotate | 45deg | ||
--pf-v5-c-tooltip__arrow--Rotate --pf-v5-c-tooltip__arrow--m-left--Rotate 45deg | ||||
| .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) | --pf-v5-c-tooltip__arrow--Top | undefined, 50% | ||
--pf-v5-c-tooltip__arrow--Top var(--pf-v5-c-tooltip--m-right--Top, 50%) undefined, 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) | --pf-v5-c-tooltip__arrow--Left | undefined, 0 | ||
--pf-v5-c-tooltip__arrow--Left var(--pf-v5-c-tooltip--m-right--Left, 0) undefined, 0 | ||||
| .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) | --pf-v5-c-tooltip__arrow--TranslateX | -50% | ||
--pf-v5-c-tooltip__arrow--TranslateX --pf-v5-c-tooltip__arrow--m-right--TranslateX -50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) | --pf-v5-c-tooltip__arrow--TranslateY | -50% | ||
--pf-v5-c-tooltip__arrow--TranslateY --pf-v5-c-tooltip__arrow--m-right--TranslateY -50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) | --pf-v5-c-tooltip__arrow--Rotate | 45deg | ||
--pf-v5-c-tooltip__arrow--Rotate --pf-v5-c-tooltip__arrow--m-right--Rotate 45deg | ||||
| .pf-v5-c-tooltip:is(.pf-m-left-top, .pf-m-right-top) | --pf-v5-c-tooltip__arrow--Top | 0 | ||
| .pf-v5-c-tooltip:is(.pf-m-left-top, .pf-m-right-top) | --pf-v5-c-tooltip__arrow--TranslateY | 50% | ||
--pf-v5-c-tooltip__arrow--TranslateY --pf-v5-c-tooltip__arrow--m-top--TranslateY 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom) | --pf-v5-c-tooltip__arrow--Top | auto | ||
| .pf-v5-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom) | --pf-v5-c-tooltip__arrow--Bottom | 0 | ||
| .pf-v5-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left) | --pf-v5-c-tooltip__arrow--Left | 0 | ||
| .pf-v5-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left) | --pf-v5-c-tooltip__arrow--TranslateX | 50% | ||
--pf-v5-c-tooltip__arrow--TranslateX --pf-v5-c-tooltip__arrow--m-left--TranslateX 50% | ||||
| .pf-v5-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right) | --pf-v5-c-tooltip__arrow--Right | 0 | ||
| .pf-v5-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right) | --pf-v5-c-tooltip__arrow--Left | auto | ||
View source on GitHub
