V-/Srcv0.1.0beta

// tooltip

Tooltip

A small glass pill on hover or focus.

// install
npx shadcn add @vsrc/tooltip

Props

Only the vsrc surface is documented here. Everything else passes through to Radix Tooltip.

// TooltipContent

proptypedefaultnotes
glass"subtle" | "regular" | "heavy" | LiquidGlassOptions | false—Optics override for the pill. A preset name replaces the tuned values, an object merges over them, `false` disables refraction entirely.

Optics

TIP_OPTICS: scale −32, chroma 2, border 0.2, mapBlur 5, blur 2, saturate 1.3 — switch-class tuning for the second-smallest pane in the registry.

Accessibility

  • Opens on focus as well as hover — keyboard users get the same hint.
  • Radix wires aria-describedby to the trigger automatically.

Source

The exact file the CLI copies into your project — you own it after install.

// registry/vsrc/ui/tooltip.tsx
"use client";

import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { mergeGlass, type GlassPreset, type LiquidGlassOptions } from "vsrc/react";

import { GlassSurface } from "@/registry/vsrc/ui/glass-surface";
import { cn } from "@/lib/utils";

const TIP_OPTICS: LiquidGlassOptions = {
  scale: -32,
  chroma: 2,
  border: 0.2,
  mapBlur: 5,
  blur: 2,
  saturate: 1.3,
  fallbackBlur: 2,
};

const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;

function TooltipContent({
  className,
  sideOffset = 6,
  glass,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content> & { glass?: LiquidGlassOptions | GlassPreset | false }) {
  return (
    <TooltipPrimitive.Portal>
      <GlassSurface asChild glass={mergeGlass(TIP_OPTICS, glass)}>
        <TooltipPrimitive.Content
          data-slot="tooltip-content"
          sideOffset={sideOffset}
          className={cn(
            "animate-glass-in relative z-50 rounded-full px-3 py-1.5 text-xs text-foreground",
            className,
          )}
          {...props}
        />
      </GlassSurface>
    </TooltipPrimitive.Portal>
  );
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };