Tooltip

A lightweight tooltip that appears on hover and focus using aria-describedby for accessibility. Supports four placement directions and an optional show delay.

Import

tsx

import { Tooltip } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

Props

Prop	Type	Default	Description
content	`ReactNode`	—	Tooltip body text or node.
children	`ReactElement`	—	The trigger element. Must be a single React element.
placement	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred position of the tooltip relative to the trigger.
delay	`number`	`0`	Delay in milliseconds before the tooltip appears.

Examples

Placements

tsx

import { Tooltip, Button } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', padding: '2rem' }}>
      <Tooltip content="Top tooltip" placement="top">
        <Button variant="outline">Top</Button>
      </Tooltip>
      <Tooltip content="Bottom tooltip" placement="bottom">
        <Button variant="outline">Bottom</Button>
      </Tooltip>
      <Tooltip content="Left tooltip" placement="left">
        <Button variant="outline">Left</Button>
      </Tooltip>
      <Tooltip content="Right tooltip" placement="right">
        <Button variant="outline">Right</Button>
      </Tooltip>
    </div>
  )
}

With delay

tsx

import { Tooltip, Button } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <Tooltip content="Appears after 300ms" delay={300}>
      <Button>Hover me</Button>
    </Tooltip>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */