Tooltip

Stable

Radix UI floating micro-callouts providing immediate contextual telemetry, hotkey hints, and security notes upon keyboard focus or cursor hover.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Tooltip, 
  TooltipTrigger, 
  TooltipContent, 
  TooltipProvider, 
  SimpleTooltip 
} from '@siberui/react';

Basic Usage & SimpleTooltip Convenience

Use SimpleTooltip for instantaneous one-line wrapping, or compose multi-element triggers with Tooltip primitives.

tsx

<div className="flex items-center justify-center gap-4">
  <SimpleTooltip label="Inspect quantum node details">
    <Button variant="secondary">HOVER OVER NODE</Button>
  </SimpleTooltip>
</div>

Visual Variants (Neon Cyan, Neon Purple, Destructive)

Choose between neon (Cyan), neonPurple (Purple), destructive (Rose), or default.

tsx

<div className="flex flex-wrap gap-6 items-center justify-center">
  <SimpleTooltip variant="neon" label="SYSLOG STREAM ACTIVE">
    <Button variant="neon" size="icon">
      <Zap className="h-4 w-4" />
    </Button>
  </SimpleTooltip>

  <SimpleTooltip variant="neonPurple" label="QUANTUM LATTICE READY">
    <Button variant="outline" size="icon" className="border-purple-500/30 text-purple-400">
      <Cpu className="h-4 w-4" />
    </Button>
  </SimpleTooltip>

  <SimpleTooltip variant="destructive" label="RESTRICTED: AIRGAP ENCLAVE">
    <Button variant="destructive" size="icon">
      <Lock className="h-4 w-4" />
    </Button>
  </SimpleTooltip>
</div>

Directional Placements (Top, Bottom, Left, Right)

Position tooltips along any cardinal orientation using the side prop.

tsx

<div className="flex flex-wrap gap-4 items-center justify-center">
  <SimpleTooltip side="top" variant="neon" label="TOP CALLOUT">
    <Button variant="secondary" size="sm">TOP</Button>
  </SimpleTooltip>
  <SimpleTooltip side="bottom" variant="neon" label="BOTTOM CALLOUT">
    <Button variant="secondary" size="sm">BOTTOM</Button>
  </SimpleTooltip>
  <SimpleTooltip side="left" variant="neon" label="LEFT CALLOUT">
    <Button variant="secondary" size="sm">LEFT</Button>
  </SimpleTooltip>
  <SimpleTooltip side="right" variant="neon" label="RIGHT CALLOUT">
    <Button variant="secondary" size="sm">RIGHT</Button>
  </SimpleTooltip>
</div>

Frosted Cyber-Glass Tooltip Trigger

Layer tooltips over frosted acrylic glass substrates with perimeter laser sweeps.

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex items-center justify-center">
  <SimpleTooltip variant="neon" label="CIRCUIT MESH: 100% NOMINAL">
    <Button variant="glass" leftIcon={<Radio className="h-4 w-4 text-cyan-400" />}>
      INSPECT CIRCUIT SUBSTRATE
    </Button>
  </SimpleTooltip>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Icon Deck

Composite mission defense card with icon toolbars.

SENSOR SUITE CONTROL

ONLINE

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">SENSOR SUITE CONTROL</CardTitle>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
  </CardHeader>

  <CardContent className="p-6 flex justify-around">
    <SimpleTooltip variant="neon" label="OPTICAL SENSOR [ACTIVE]">
      <Button variant="ghost" size="icon"><Radio className="h-4 w-4 text-cyan-400" /></Button>
    </SimpleTooltip>
    <SimpleTooltip variant="neon" label="QUANTUM ENCLAVE [ARMED]">
      <Button variant="ghost" size="icon"><Shield className="h-4 w-4 text-emerald-400" /></Button>
    </SimpleTooltip>
    <SimpleTooltip variant="destructive" label="TERMINATE LINK [CAUTION]">
      <Button variant="ghost" size="icon"><Lock className="h-4 w-4 text-rose-400" /></Button>
    </SimpleTooltip>
  </CardContent>
</Card>

API Reference

PROPERTIES (5)← swipe to inspect →

Property	Description	Type	Default
label	Text string or ReactNode to display within the tooltip callout.	React.ReactNode	-
variant	Visual color styling and glow theme.	"default" \| "neon" \| "neonPurple" \| "destructive"	"default"
side	Preferred orientation relative to trigger anchor.	"top" \| "right" \| "bottom" \| "left"	"top"
showArrow	Whether to render the pointing directional arrow glyph.	boolean	true
delayDuration	Delay in milliseconds before the tooltip appears.	number	400

Accessibility

ARIA Tooltip: Triggers receive aria-describedby pointing automatically to the generated tooltip identifier.
Focus & Hover: Displays on both mouse hover and keyboard Tab focus.

Best Practices

Icon Buttons: Always provide tooltips on icon-only buttons to convey their action to sighted and assistive users.