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.
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.