Vinyl UI

Tooltip

Short hint on hover or focus (press on native).

Vinyl styling: Night-black chip with a magenta rim and VT323 type; bar-wipes in.

Installation

npx shadcn@latest add @vinyl/tooltip

The @vinyl registry URL in components.json decides whether you get the web or the native version (see installation for web / native).

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild><Button variant="outline">Hover me</Button></TooltipTrigger>
    <TooltipContent>Press PLAY to start</TooltipContent>
  </Tooltip>
</TooltipProvider>

API

Same API as shadcn/ui's Tooltip on the web, and React Native Reusables' Tooltip on native. Vinyl only changes styling and motion.

On this page