PatternFly Elements
Tooltip
Overview
Patternfly tooltip
A Tooltip is a floating text area triggered by a user that provides helpful or contextual information.
Left Tooltip
Left-Start Tooltip
Left-End Tooltip
Right Tooltip
Right-Start Tooltip
Right-End Tooltip
Top Tooltip
Top-Start Tooltip
Top-End Tooltip
Bottom Tooltip
Bottom-Start Tooltip
Bottom-End Tooltip
No Position Tooltip
Offset Tooltip
Installation
npm install @patternfly/pfe-tooltipUsage
Slots
- Default Slot
-
This slot wraps around the element that should be used to invoke the tooltip content to display. Typically this would be an icon, button, or other small sized element.
content-
This slot renders the content that will be displayed inside of the tooltip. Typically this would include a string of text without any additional elements. This element is wrapped with a div inside of the component to give it the stylings and background colors.
Attributes
position-
The placement of the tooltip, relative to the invoking content
- DOM Property
position- Type
-
Placement - Default
-
'top'
offset-
Optional tooltip offset: a comma separated coordinate pair of numbers
html <pfe-tooltip offset="5,6">...</pfe-tooltip>- DOM Property
offset- Type
-
array - Default
-
[0, 15]
Methods
show()-
Show the tooltip
hide()-
Hide the tooltip
Events
NoneCSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-tooltip__content--BackgroundColor |
Sets the background color for the tooltip content. |
#1b1d21 |
--pf-c-tooltip__content--Color |
Sets the font color for the tooltip content. |
#e0e0e0 |
--pf-c-tooltip--line-height |
Sets the font color for the tooltip content. |
1.5 |
--pf-c-tooltip--MaxWidth |
Maximum width for the tooltip. |
18.75rem |
--pf-c-tooltip--BoxShadow |
Box shadow for the tooltip. |
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__content--PaddingTop |
Top padding for the tooltip. |
0.5rem |
--pf-c-tooltip__content--PaddingRight |
Right padding for the tooltip. |
0.5rem |
--pf-c-tooltip__content--PaddingBottom |
Bottom padding for the tooltip. |
0.5rem |
--pf-c-tooltip__content--PaddingLeft |
Left Padding for the tooltip. |
0.5rem |
--pf-c-tooltip__content--FontSize |
Font size for the tooltip content. |
0.875rem |
--pf-c-tooltip__arrow--Width |
Tooltip arrow width. |
0.5rem |
--pf-c-tooltip__arrow--Height |
Tooltip arrow height. |
0.5rem |
--pf-c-tooltip__arrow--m-top--TranslateX |
Positions the tooltip arrow along the x axis for |
-50% |
--pf-c-tooltip__arrow--m-top--TranslateY |
Positions the tooltip arrow along the y axis for |
50% |
--pf-c-tooltip__arrow--m-top--Rotate |
Rotates the tooltip arrow based on degrees of movement for |
45deg |
--pf-c-tooltip__arrow--m-right--TranslateX |
Positions the tooltip arrow along the x axis for |
-50% |
--pf-c-tooltip__arrow--m-right--TranslateY |
Positions the tooltip arrow along the y axis for |
-50% |
--pf-c-tooltip__arrow--m-right--Rotate |
Rotates the tooltip arrow based on degrees of movement for |
45deg |
--pf-c-tooltip__arrow--m-bottom--TranslateX |
Positions the tooltip arrow along the x axis for |
-50% |
--pf-c-tooltip__arrow--m-bottom--TranslateY |
Positions the tooltip arrow along the y axis for |
-50% |
--pf-c-tooltip__arrow--m-bottom--Rotate |
Rotates the tooltip arrow based on degrees of movement for |
45deg |
--pf-c-tooltip__arrow--m-left--TranslateX |
Positions the tooltip arrow along the x axis for |
50% |
--pf-c-tooltip__arrow--m-left--TranslateY |
Positions the tooltip arrow along the y axis for |
-50% |
--pf-c-tooltip__arrow--m-left--Rotate |
Rotates the tooltip arrow based on degrees of movement for |
45deg |
CSS Shadow Parts
None