amezquita design systemGet started

Composition

Tooltip

Contextual label revealed on hover or focus — supplements an icon or truncated text

Markdown version for agents

Import
import { Tooltip } from '@amezquita/design-system/components/composition/Tooltip'

Live render

    Props

    PropTypeDescription
    contentReact.ReactNode
    childrenReact.ReactElement
    side?'top' | 'right' | 'bottom' | 'left'
    delayDuration?number
    open?boolean
    defaultOpen?boolean
    onOpenChange?(open: boolean) => void

    Tokens

    TokenTypeValue
    --tooltip-arrow-sizedimension8px
    --tooltip-border-radiusdimension4px
    --tooltip-delay-durationnumber400
    --tooltip-font-weightfontWeight500
    --tooltip-max-widthdimension260px
    --tooltip-side-offsetnumber6

    Usage example

    tsx
    <Tooltip content="Copy to clipboard">
  <Button variant="ghost" icon={<CopyIcon size={16} aria-hidden="true" />} aria-label="Copy to clipboard">
    Copy
  </Button>
</Tooltip>

    Sub-components

    Imported from the same path as Tooltip.