Skip to content
Versions v3 v2 v1

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/elements

Then 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

Tooltip

This is some content

Installation

npm install @patternfly/elements

Usage

Left Tooltip

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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

Tooltip
This is some content
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 top positioned arrows.

-50
--pf-c-tooltip__arrow--m-top--TranslateY

Positions the tooltip arrow along the y axis for top positioned arrows.

50
--pf-c-tooltip__arrow--m-top--Rotate

Rotates the tooltip arrow based on degrees of movement for top positioned arrows.

45deg
--pf-c-tooltip__arrow--m-right--TranslateX

Positions the tooltip arrow along the x axis for right positioned arrows.

-50
--pf-c-tooltip__arrow--m-right--TranslateY

Positions the tooltip arrow along the y axis for right positioned arrows.

-50
--pf-c-tooltip__arrow--m-right--Rotate

Rotates the tooltip arrow based on degrees of movement for right positioned arrows.

45deg
--pf-c-tooltip__arrow--m-bottom--TranslateX

Positions the tooltip arrow along the x axis for bottom positioned arrows.

-50
--pf-c-tooltip__arrow--m-bottom--TranslateY

Positions the tooltip arrow along the y axis for bottom positioned arrows.

-50
--pf-c-tooltip__arrow--m-bottom--Rotate

Rotates the tooltip arrow based on degrees of movement for bottom positioned arrows.

45deg
--pf-c-tooltip__arrow--m-left--TranslateX

Positions the tooltip arrow along the x axis for left positioned arrows.

50
--pf-c-tooltip__arrow--m-left--TranslateY

Positions the tooltip arrow along the y axis for left positioned arrows.

-50
--pf-c-tooltip__arrow--m-left--Rotate

Rotates the tooltip arrow based on degrees of movement for left positioned arrows.

45deg

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify