Tooltip

Used to display hints when hovered.

"use client"

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

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <div className="flex min-h-[200px] items-center justify-center gap-6">
        <Tooltip>
          <TooltipTrigger className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white">
            Hover me
          </TooltipTrigger>
          <TooltipContent>Simple tooltip</TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

Examples

Component tooltip-demo-two not found in registry.

Component tooltip-demo-three not found in registry.

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/tooltip.json

Usage

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@/components/ui/tooltip"
 
        <Tooltip>
          <TooltipTrigger className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white">
            Hover me
          </TooltipTrigger>
          <TooltipContent>
            Simple tooltip
          </TooltipContent>
        </Tooltip>

Theme Toggler Typing Animation

On This Page

Examples Installation Usage

Support Ebon UI by giving it a star on GitHub!

A lot of work goes into maintaining and improving Ebon UI. Your stars help show your support and encourage further development.