PatternFly Elements - Home 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

This is some content

Left-Start Tooltip

This is some content

Left-End Tooltip

This is some content

Right Tooltip

This is some content

Right-Start Tooltip

This is some content

Right-End Tooltip

This is some content

Top Tooltip

This is some content

Top-Start Tooltip

This is some content

Top-End Tooltip

This is some content

Bottom Tooltip

This is some content

Bottom-Start Tooltip

This is some content

Bottom-End Tooltip

This is some content

No Position Tooltip

This is some content

Offset Tooltip

This is some content

Installation

npm install @patternfly/pfe-tooltip

Usage

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

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