Tooltip
Overview
A tooltip is in-app messaging used to identify elements on a page with short, clarifying text.
Default
Installation
npm install @patternfly/elements
Usage
Left Tooltip
<pf-tooltip position="left">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Left-Start Tooltip
<pf-tooltip position="left-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Left-End Tooltip
<pf-tooltip position="left-end">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Right Tooltip
<pf-tooltip position="right">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Right-Start Tooltip
<pf-tooltip position="right-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Right-End Tooltip
<pf-tooltip position="right-end">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Top Tooltip
<pf-tooltip position="top">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Top-Start Tooltip
<pf-tooltip position="top-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Top-End Tooltip
<pf-tooltip position="top-end">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Bottom Tooltip
<pf-tooltip position="bottom">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Bottom-Start Tooltip
<pf-tooltip position="bottom-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Bottom-End Tooltip
<pf-tooltip position="bottom-end">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
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
- DOM Property
position
- Type
-
Placement
- Default
-
'top'
content
-
Tooltip content. Overridden by the content slot
- DOM Property
content
- Type
-
string | undefined
- Default
-
unknown
Methods
show()
hide()
Events
None
CSS 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