Tooltip

A popup that displays information related to an element when focused or hovered.

Installation

npx lovdacn@latest add tooltip

(You can also use the shortened lvcn alias, e.g., npx lvcn@latest add tooltip)

This copies the component source into your project (typically components/ui/tooltip.tsx) and installs any required dependencies.

Registry dependencies: utils, text

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
import { Text } from "@/components/ui/text"

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">
          <Text>Hover</Text>
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <Text>Add to library</Text>
      </TooltipContent>
    </Tooltip>
  )
}

Styles

lvcn components are available across all style packs:

StyleNotes
defaultClassic rounded system
new-yorkCompact, refined
novaSharp corners (default in many setups)
luma / lyra / maia / miraRadius & font variants
rhea / sera / vegaPill, zero-radius, balanced

Style is set at project init via lvcn.json (style + styleEngine).

Platform

These components target Expo / React Native with NativeWind or Uniwind. They use Platform.select where web and native need different behavior.