# V tooltip 14

> System status dots revealing service name, uptime, and latency

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-tooltip-14).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-tooltip-14
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-tooltip-14-light-417c5854f518d833.png
- Registry item: https://ui.cnippet.dev/r/v-tooltip-14.json
- Categories: tooltip
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-tooltip-14.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/tooltip`

## Files

### `registry/default/variants/v-tooltip-14.tsx`

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/registry/default/ui/tooltip";

type ServiceStatus = "operational" | "degraded" | "down";

type Service = {
  name: string;
  uptime: string;
  latency: string;
  status: ServiceStatus;
};

const services: Service[] = [
  {
    latency: "12 ms",
    name: "API Gateway",
    status: "operational",
    uptime: "99.99%",
  },
  {
    latency: "8 ms",
    name: "Auth Service",
    status: "operational",
    uptime: "99.97%",
  },
  {
    latency: "340 ms",
    name: "Image CDN",
    status: "degraded",
    uptime: "98.12%",
  },
  {
    latency: "22 ms",
    name: "Database",
    status: "operational",
    uptime: "99.95%",
  },
  { latency: "—", name: "Email Worker", status: "down", uptime: "94.60%" },
  {
    latency: "18 ms",
    name: "Search Index",
    status: "operational",
    uptime: "99.90%",
  },
];

const dotClass: Record<ServiceStatus, string> = {
  degraded: "bg-amber-400",
  down: "bg-red-500",
  operational: "bg-emerald-500",
};

const statusLabel: Record<ServiceStatus, string> = {
  degraded: "Degraded",
  down: "Down",
  operational: "Operational",
};

export function Pattern() {
  return (
    <div className="flex items-center gap-3 rounded-xl border bg-card p-4">
      <span className="text-muted-foreground text-xs">Services</span>
      <TooltipProvider>
        <div className="flex items-center gap-2">
          {services.map(({ name, uptime, latency, status }) => (
            <Tooltip key={name}>
              <TooltipTrigger className="cursor-default">
                <span
                  aria-label={`${name}: ${statusLabel[status]}`}
                  className={`block size-2.5 rounded-full ${dotClass[status]}`}
                />
              </TooltipTrigger>
              <TooltipContent className="space-y-0.5 p-2.5">
                <p className="font-medium">{name}</p>
                <p className="text-muted-foreground">{statusLabel[status]}</p>
                <p className="text-muted-foreground">Uptime {uptime}</p>
                <p className="text-muted-foreground">Latency {latency}</p>
              </TooltipContent>
            </Tooltip>
          ))}
        </div>
      </TooltipProvider>
    </div>
  );
}
```