PatternFly.org Contribute on Github
PatternFly Elements

Tooltip

Overview

A tooltip is in-app messaging used to identify elements on a page with short, clarifying text.

Default

Tooltip
This is some content

Installation

npm install @patternfly/elements

Usage

Left Tooltip

Tooltip
This is some content 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 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-2023 Red Hat, Inc. Deploys by Netlify