Tooltip

Stable

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

Examples

Basic Usage

tsx
<SimpleTooltip label="Add to library">
  <Button variant="outline">Hover</Button>
</SimpleTooltip>

Cyber Variants

tsx
<div className="flex gap-4">
  <SimpleTooltip variant="neon" label="SYSLOG ACTIVE">
    <Button variant="neon"><Info className="w-4 h-4" /></Button>
  </SimpleTooltip>
  <SimpleTooltip variant="destructive" label="DANGER">
    <Button variant="destructive"><Info className="w-4 h-4" /></Button>
  </SimpleTooltip>
</div>

API Reference

PropertyDescriptionTypeDefault
labelThe text or React Node to display in the tooltip.ReactNode-
variantVisual style."default" | "neon" | "neonPurple" | "destructive"-
sidePreferred position."top" | "right" | "bottom" | "left"-
showArrowWhether to show the pointing arrow.booleantrue