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

Accessibility

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

PropTypeDefaultDescription
contentStringundefinedTooltip content
tabbableBooleanfalseWhether tooltip is tabbable or not
maxWidthString240pxMax width of the tooltip
offsetNumber4Offset from the trigger element in pixels
delayNumber200Delay in milliseconds before showing the tooltip
strategyStringabsoluteStrategy to use for positioning the tooltip. Uses @floating-ui/dom strategy values
placementStringtopTooltip placement. Check Floating UI API for list of possible values

Slots

SlotDescription
defaultSlot for Tooltip trigger

Design Tokens

tokens.config.ts
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}',
      }
    },
  }
})
Edit this page on GitHub
Table of Contents