Things

A popup that displays information related to an element when it receives keyboard focus or mouse hover.

The Tooltip component displays a small popup with additional information when users hover over or focus on an element. It provides contextual help without cluttering the interface. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/tooltip.json

Usage

tsx

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

function MyComponent() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button>Hover</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  )
}

Tooltip

Quick Install

Usage

Examples

Default

Different Positions