Tooltip

Popup text label on hover/focus via Radix UI

Default

Usage

import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@tryvienna/ui'

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>This is a tooltip</TooltipContent>
</Tooltip>

Examples

Default

Default

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>This is a tooltip</TooltipContent>
</Tooltip>

All Sides

All Sides

<div className="flex items-center gap-8">
  {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
    <Tooltip key={side}>
      <TooltipTrigger asChild>
        <Button variant="outline" size="sm">
          {side}
        </Button>
      </TooltipTrigger>
      <TooltipContent side={side}>Tooltip on {side}</TooltipContent>
    </Tooltip>
  ))}
</div>

API Reference

Tooltip

Also accepts all props from TooltipPrimitive.Root.

TooltipProvider

Prop	Type	Default	Description
delayDuration	number	0

Also accepts all props from TooltipPrimitive.Provider.

TooltipTrigger

Also accepts all props from TooltipPrimitive.Trigger.

TooltipContent

Prop	Type	Default	Description
sideOffset	number	0

Also accepts all props from TooltipPrimitive.Content.

Data Attributes

Component	data-slot
Tooltip	"tooltip-content"
TooltipProvider	"tooltip-provider"
TooltipTrigger	"tooltip-trigger"
TooltipContent	"tooltip-content"