Tooltip
A tooltip is in-app messaging used to identify elements on a page with short, clarifying text.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-tooltip/pf-tooltip.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
Default
Installation
npm install @patternfly/elementsUsage
Left Tooltip
View HTML Source
<pf-tooltip position="left">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Left-Start Tooltip
View HTML Source
<pf-tooltip position="left-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Left-End Tooltip
View HTML Source
<pf-tooltip position="left-end">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Right Tooltip
View HTML Source
<pf-tooltip position="right">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Right-Start Tooltip
View HTML Source
<pf-tooltip position="right-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Right-End Tooltip
View HTML Source
<pf-tooltip position="right-end">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Top Tooltip
View HTML Source
<pf-tooltip position="top">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Top-Start Tooltip
View HTML Source
<pf-tooltip position="top-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Top-End Tooltip
View HTML Source
<pf-tooltip position="top-end">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Bottom Tooltip
View HTML Source
<pf-tooltip position="bottom">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Bottom-Start Tooltip
View HTML Source
<pf-tooltip position="bottom-start">
<pf-button>Tooltip</pf-button>
<div slot="content">
This is some content
</div>
</pf-tooltip>
Bottom-End Tooltip
View HTML Source
<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-
The position of the tooltip, relative to the invoking content
- DOM Property
position- Type
-
Placement - Default
-
'top'
content-
Tooltip content. Overridden by the content slot
- DOM Property
content- Type
-
string | undefined - Default
-
unknown
no-flip-
If false, prevents the tooltip from trying to remain in view by flipping itself when necessary
- DOM Property
noFlip- Type
-
boolean - Default
-
false
trigger-
- DOM Property
trigger- Type
-
string | Element | undefined - Default
-
unknown
flip-behavior-
The flip order when flip is enabled and the initial position is not possible. There are 12 options:
top,bottom,left,right,top-start,top-end,bottom-start,bottom-end,left-start,left-end,right-start,right-end. The default is [oppositePlacement], where only the opposite placement is tried.- DOM Property
flipBehavior- Type
-
Placement[] | 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
