Tooltip

Extended from Reka UI Tooltip

A tooltip opens on hover or focus of the trigger button and is useful when additional descriptive text would take up too much room on the page and may not be relevant to all users.

Because the tooltip relies on hover to activate, and there is no hover on touch devices, this component will detect if a device supports touch and, if so, automatically render a Popover instead.

It is NOT recommended to insert a link or button inside a tooltip, as non-mouse users will be unable to access the link or button, and even mouse users may have trouble reaching it as the tooltip may disappear before they can move their cursor to the link or button. If you find yourself needing this use case, consider using Popover instead.

Direction

Using the side prop allows you to control on which side of the triggering element the tooltip will attempt to appear. If there is not enough room on that side, the tooltip will switch to the opposite side.

Positioned on top (default)

Positioned on right

Positioned on bottom

Positioned on left

Headings

This example shows the recommended styling for headings within a tooltip.

This tooltip contains a heading

Delay

This example shows how to delay the appearance of the tooltip. Only applies on non-touch devices.

This tooltip will appear after 500ms

Collision padding

This example shows how to tell the tooltip that there is a sticky element it should treat as the edge of visibility and flip the tooltip to the opposite side when reached. This is useful when there is a sticky navbar or CTA banner on the page and you want to ensure the tooltip remains visible and doesn't appear partially hidden underneath it.

This tooltip will flip when it gets 100px away from the top of the viewport

External control

This example shows how to control the visibility of the tooltip from an external source. It can still be opened and closed via hover and un-hover, but the buttons also have the ability to show and hide the tooltip.

This tooltip is controlled by the show/hide buttons

Light variant

Use the light variant if the tooltip will appear against a dark background.

This tooltip only contains text

This tooltip contains a heading

EsTooltip props

Name
collisionPadding
Type
number or object
Default
0
Description
The distance in pixels from the viewport edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
Name
delayDuration
Type
number
Default
0
Description
The delay in milliseconds between hover and the tooltip appearing. Only applies on non-touch devices.
Name
show
Type
boolean or undefined
Default
undefined
Description
The controlled open state of the popover.
Name
side
Type
String
Default
'top'
Description
Specifies on which side of the trigger button the tooltip should attempt to appear. Can be 'top', 'right', 'bottom', or 'left'.
Name
triggerClass
Type
String
Default
''
Description
Classes, if any, that should be applied to the trigger button.
Name
variant
Type
String
Default
'dark'
Description
Determines whether the tooltip appears with a darker or lighter background. Can be 'dark' or 'light'.

EsTooltip slots

Name
trigger
Default
n/a
Description
Required. The icon and/or content to put inside the trigger button.

EsTooltip events

Name
update:show
Type
boolean
Description
Event handler called when the open state of the tooltip changes.