warcraftcn warcraftcn/ui

Tooltip

A Warcraft-themed tooltip with item-rarity color variants. Hover over each trigger to preview. Compose with TooltipTitle and TooltipBody for rich content.

Rarity Variants

Title Only

Positioning

Control tooltip placement with side and offset with sideOffset.

Usage

<script>
  import {
    Tooltip, TooltipTrigger, TooltipContent,
    TooltipTitle, TooltipBody
  } from 'warcraftcn-ui-svelte';
</script>

<Tooltip variant="rare" side="top">
  <TooltipTrigger>
    <Button>Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <TooltipTitle>Rare Item</TooltipTitle>
    <TooltipBody>A rare piece of equipment.</TooltipBody>
  </TooltipContent>
</Tooltip>

Props

PropTypeDefault
variant"default" | "uncommon" | "rare" | "epic" | "legendary""default"
side"top" | "bottom" | "left" | "right""bottom"
sideOffsetnumber8