Tooltip
A Tooltip
is a text-based popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It usually appears after a short delay and disappears either when the Escape
key is pressed or when the mouse pointer moves away from the element.
While the tooltip is displayed, the focus remains on the triggering element.
Because the tooltip itself is not included in the tabbing order and does not receive focus, it is highly discouraged to use interactive elements such as links, inputs, or buttons in floating tip.
Usually Tooltip
used as an improved alternative to native title
attribute, which is not accessible. It's useful with interactive Icon
components, but can be used with any other element, including inlined context inside Markdown text.
For positioning floating content to the trigger element, Tooltip
use Floating UI.
This is paragraph text with inline tooltip!
Nuxt.jsAccessibility
The element that serves as the tooltip container has role="tooltip"
. The element that triggers the tooltip references the tooltip element with aria-describedby
. It's fully accessible with keyboard and screen readers.
Props
Prop | Type | Default | Description |
---|---|---|---|
content | String | undefined | Tooltip content |
tabbable | Boolean | false | Whether tooltip is tabbable or not |
maxWidth | String | 240px | Max width of the tooltip |
offset | Number | 4 | Offset from the trigger element in pixels |
delay | Number | 200 | Delay in milliseconds before showing the tooltip |
strategy | String | absolute | Strategy to use for positioning the tooltip. Uses @floating-ui/dom strategy values |
placement | String | top | Tooltip placement. Check Floating UI API for list of possible values |
Slots
Slot | Description |
---|---|
default | Slot for Tooltip trigger |
Design Tokens
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
tooltip: {
trigger: {
outline: {
focusVisible: '2px solid {color.primary.500}',
}
},
content: {
backgroundColor: {
initial: '{color.gray.700}',
dark: '{color.gray.800}',
},
color: '{color.gray.100}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
fontWeight: '{typography.fontWeight.normal}',
borderWidth: {
initial: '0px',
dark: '1px'
},
borderStyle: {
initial: 'none',
dark: 'solid'
},
borderColor: {
initial: 'transparent',
dark: '{color.gray.700}',
},
borderRadius: '{elements.radii.base}',
padding: '{space.3} {space.4}',
}
},
}
})