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
-
This -
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 -
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 - 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 - 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[] - Default
-
unknown
Methods
show()hide()
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-tooltip__content--BackgroundColor |
#1b1d21
|
|
--pf-c-tooltip__content--Color |
#e0e0e0
|
|
--pf-c-tooltip--line-height |
1.5
|
|
--pf-c-tooltip--MaxWidth |
18.75rem
|
|
--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__content--PaddingTop |
0.5rem
|
|
--pf-c-tooltip__content--PaddingRight |
0.5rem
|
|
--pf-c-tooltip__content--PaddingBottom |
0.5rem
|
|
--pf-c-tooltip__content--PaddingLeft |
0.5rem
|
|
--pf-c-tooltip__content--FontSize |
0.875rem
|
|
--pf-c-tooltip__arrow--Width |
0.5rem
|
|
--pf-c-tooltip__arrow--Height |
0.5rem
|
|
--pf-c-tooltip__arrow--m-top--TranslateX |
-50
|
|
--pf-c-tooltip__arrow--m-top--TranslateY |
50
|
|
--pf-c-tooltip__arrow--m-top--Rotate |
45deg
|
|
--pf-c-tooltip__arrow--m-right--TranslateX |
-50
|
|
--pf-c-tooltip__arrow--m-right--TranslateY |
-50
|
|
--pf-c-tooltip__arrow--m-right--Rotate |
45deg
|
|
--pf-c-tooltip__arrow--m-bottom--TranslateX |
-50
|
|
--pf-c-tooltip__arrow--m-bottom--TranslateY |
-50
|
|
--pf-c-tooltip__arrow--m-bottom--Rotate |
45deg
|
|
--pf-c-tooltip__arrow--m-left--TranslateX |
50
|
|
--pf-c-tooltip__arrow--m-left--TranslateY |
-50
|
|
--pf-c-tooltip__arrow--m-left--Rotate |
45deg
|
|
--pf-c-tooltip__arrow--Width |
0.5rem
|
|
--pf-c-tooltip--line-height |
1.5
|
|
--pf-c-tooltip--MaxWidth |
18.75rem
|
|
--pf-c-tooltip--BoxShadow |
var(--pf-global--BoxShadow--md,
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),
0 0 0.25rem 0 rgba(3, 3, 3, 0.06))
|
|
--pf-global--BoxShadow--md |
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 |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-tooltip__content--PaddingRight |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-tooltip__content--PaddingBottom |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-tooltip__content--PaddingLeft |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-c-tooltip__content--FontSize |
var(--pf-global--FontSize--sm, 0.875rem)
|
|
--pf-global--FontSize--sm |
0.875rem
|
|
--pf-c-tooltip__content--Color |
var(--pf-global--Color--light-100, #ffffff)
|
|
--pf-global--Color--light-100 |
#ffffff
|
|
--pf-c-tooltip__content--BackgroundColor |
var(--pf-global--BackgroundColor--dark-100, #151515)
|
|
--pf-global--BackgroundColor--dark-100 |
#151515
|
CSS Shadow Parts
None
