Tooltip

The Tooltip component adds a tooltip to add context to elements on the page. The Toolip has a black background by default, however, it can be styled with the scheme prop as demonstrated below.

Pro tip: the tooltip does not add additional HTML markup elements to the DOM tree, it leverages a CSS pseudo-class approach that utilizes the text prop value, which in turn, is the value used for the HTML aria-label attribute. For displaying more informationt to a user in a tooltip-esque manner, you can, for example, create a custom pop-over-esque component with PointerBox and or a combination of the other components.

Default example

Text with a `top` tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip text="¡Hola!, Tooltip!">Text with a `top` tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

Turning on the Tooltip by default

Text with a `top` tooltip on by default using the `show` prop. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip show text="¡Hola!, Tooltip!">Text with a `top` tooltip on by default using the `show` prop.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

With different placement

You can choose between top and bottom placement of the tooltip.

Text with a `bottom`-placed tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip placement='bottom' text="¡Hola!, from down under!">Text with a `bottom`-placed tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

With different alignments

Text with a `left`-aligned tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip align='left' text="¡Hola!, from the left side!">Text with a `left`-aligned tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>
Text with a `right`-aligned tooltip. Text outside the Tooltip text container.
Text with a `left`-aligned tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip align='right' text="¡Hola!, from the right side!">Text with a `right`-aligned tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>
<BorderBox p={3} my={1}>
  <Text><Tooltip align='left' placement='bottom' text="¡Hola!, from the left side!">Text with a `left`-aligned tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>
Text with a `right`-aligned tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip align='right' placement='bottom' text="¡Hola!, from the right side!">Text with a `right`-aligned tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

Configurable duration

The default appearance duration for the tooltip is .15 seconds. This is configurable, however, as shown below

Text with a custom duration tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip duration={.75} text="¡Hola!, with a custom duration!">Text with a custom duration tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

Configurable schemes (colors)

Text with a purple-scheme tooltip. Text outside the Tooltip text container.
Text with a green-scheme tooltip. Text outside the Tooltip text container.
Text with a red-scheme tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip scheme='purple' text="¡Hola!, with a purple scheme!">Text with a purple-scheme tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>
<BorderBox p={3} my={1}>
  <Text><Tooltip align='left' scheme='green' text="¡Hola!, with a green scheme and left-alignment!">Text with a green-scheme tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>
<BorderBox p={3} my={1}>
  <Text><Tooltip align='right' scheme='red' placement='bottom' text="¡Hola!, with a red scheme and right-alignment!">Text with a red-scheme tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

Disabling drop-shadow

By default, tooltips have a subtle drop-shadow defined. You can turn this off by passing down the noDropShadow prop as demonstrated

Text with a disabled drop-shadow and purple-scheme tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip noDropShadow scheme='purple' text="¡Hola!, with a disabled drop-shadow and purple scheme!">Text with a disabled drop-shadow and purple-scheme tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

Allowing tooltip text to wrap

By default, tooltip text will not wrap; the text will visually flow on the main axis, e.g. left-to-right, or right-to-left. Passing down the wrap prop will allow a tooltip to wrap to a new line within the tooltip container.

Text with a wrapping tooltip. Text outside the Tooltip text container.
<BorderBox p={3} my={1}>
  <Text><Tooltip wrap text="¡Hola!, I'm a tooltip that wraps!">Text with a wrapping tooltip.</Tooltip> Text outside the Tooltip text container.</Text>
</BorderBox>

System props

Tooltip components get COMMON and TYPOGRAPHY system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
alignStringCan be either left or right.
placementStringCan be one of top, bottom
noDelayBooleanWhen set to true, tooltip appears without any delay
noDropShadowBooleanWhen set to true, tooltip does not render with a drop-shadow
textStringText used in aria-label (for accessibility) and for the actual tooltip value.
wrapBooleanUse true to allow text within tooltip to wrap.