Documentation
Tooltip

Tooltip

A floating tooltip built on @radix-ui/react-tooltip with a scale fade animation.

💡

Wrap your app root with TooltipProvider once to configure shared settings like delayDuration.

Installation

# Package
npm install @lumina-ui/react
 
# CLI
npx lumina-ui add tooltip
# deps: @radix-ui/react-tooltip framer-motion clsx

Setup

// layout.tsx or _app.tsx
import { TooltipProvider } from '@lumina-ui/react'
 
export default function Layout({ children }) {
  return <TooltipProvider>{children}</TooltipProvider>
}

Usage

import { Tooltip, TooltipTrigger, TooltipContent } from '@lumina-ui/react'
import { Button } from '@lumina-ui/react'
 
export default function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover me</Button>
      </TooltipTrigger>
      <TooltipContent>
        This is a tooltip
      </TooltipContent>
    </Tooltip>
  )
}

Positioning

<TooltipContent side="right" align="start" sideOffset={8}>
  Right-aligned tooltip
</TooltipContent>

Props — TooltipProvider

PropTypeDefaultDescription
delayDurationnumber400Delay in ms before showing

Props — Tooltip

PropTypeDefaultDescription
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Change handler
defaultOpenbooleanfalseInitial open state
delayDurationnumber—Override provider delay

Props — TooltipContent

PropTypeDefaultDescription
side'top' | 'right' | 'bottom' | 'left''top'Preferred side
sideOffsetnumber6Distance from trigger in px
align'start' | 'center' | 'end''center'Alignment along axis

Accessibility

  • role="tooltip" on the content
  • Associated to the trigger via aria-describedby (managed by Radix)
  • Animation disabled when prefers-reduced-motion is set
DialogAccordion