Tooltip

A popup that displays Warcraft-styled information when the element receives keyboard focus or the mouse hovers over it.

Examples

Default

<Tooltip>
  <TooltipTrigger asChild>
    <Button>Default</Button>
  </TooltipTrigger>
  <TooltipContent>
    <TooltipTitle>Hearthstone</TooltipTitle>
    <TooltipBody>Binds when picked up</TooltipBody>
  </TooltipContent>
</Tooltip>

Uncommon

<TooltipContent variant="uncommon">
  <TooltipTitle>Outrunner's Cloak</TooltipTitle>
  <TooltipBody>Binds when equipped</TooltipBody>
</TooltipContent>

Rare

<TooltipContent variant="rare">
  <TooltipTitle>Azuresong Mageblade</TooltipTitle>
  <TooltipBody>Binds when picked up</TooltipBody>
</TooltipContent>

Epic

<TooltipContent variant="epic">
  <TooltipTitle>Ashbringer</TooltipTitle>
  <TooltipBody>Binds when picked up</TooltipBody>
</TooltipContent>

Legendary

<TooltipContent variant="legendary">
  <TooltipTitle>Thunderfury</TooltipTitle>
  <TooltipBody>Binds when picked up</TooltipBody>
</TooltipContent>

Side

Use the side prop to change the position of the tooltip.

<TooltipContent side="left">
  <p>Left side</p>
</TooltipContent>

<TooltipContent side="top">
  <p>Top side</p>
</TooltipContent>

<TooltipContent side="bottom">
  <p>Bottom side</p>
</TooltipContent>

<TooltipContent side="right">
  <p>Right side</p>
</TooltipContent>

Installation

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

Usage

import {
  Tooltip,
  TooltipBody,
  TooltipContent,
  TooltipTitle,
  TooltipTrigger,
} from "@/components/ui/warcraftcn/tooltip";
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <TooltipTitle>Item Name</TooltipTitle>
    <TooltipBody>Item description</TooltipBody>
  </TooltipContent>
</Tooltip>
Toast