Tooltip

The Tooltip component provides you with help text when the user hovers over an element.

Live Examples

Storybook: components-tooltip--default

Storybook: components-tooltip--custom-delay

Storybook: components-tooltip--top-placement

Code Examples

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@nostromo/ui-core'
 
export default function TooltipExample() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover over me</TooltipTrigger>
        <TooltipContent>
          <p>This is a tooltip</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

With Buttons

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button } from '@nostromo/ui-core'
 
export default function TooltipWithButton() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover over button</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>This is a tooltip on a button</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Props

Prop	Type	Default	Description
`delayDuration`	`number`	`700`	Delay before tooltip shows (ms)
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Tooltip position
`align`	`"start" \| "center" \| "end"`	`"center"`	Tooltip alignment

Toast Progress