Tooltip

 1import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/wensity/tooltip";
 2
 3export function DefaultTooltip() {
 4  return (
 5    <TooltipProvider>
 6      <Tooltip>
 7        <TooltipTrigger>Hover</TooltipTrigger>
 8        <TooltipContent>Help text</TooltipContent>
 9      </Tooltip>
10    </TooltipProvider>
11  );
12}

 1import { TooltipProvider, TooltipRich } from "@/components/wensity/tooltip";
 2
 3export function RichTooltip() {
 4  return (
 5    <TooltipProvider>
 6      <TooltipRich title="Bold" description="Apply strong emphasis to selection.">
 7        <button type="button">B</button>
 8      </TooltipRich>
 9    </TooltipProvider>
10  );
11}

 1import { TooltipProvider, TooltipShortcut } from "@/components/wensity/tooltip";
 2
 3export function ShortcutTooltip() {
 4  return (
 5    <TooltipProvider>
 6      <TooltipShortcut label="Italic" shortcut={["⌘", "I"]}>
 7        <button type="button">I</button>
 8      </TooltipShortcut>
 9    </TooltipProvider>
10  );
11}

 1import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/wensity/tooltip";
 2
 3export function CursorTooltip() {
 4  return (
 5    <TooltipProvider>
 6      <Tooltip>
 7        <TooltipTrigger>Canvas</TooltipTrigger>
 8        <TooltipContent followCursor>Coordinates</TooltipContent>
 9      </Tooltip>
10    </TooltipProvider>
11  );
12}

 1import { Popover, PopoverContent, PopoverTrigger } from "@/components/wensity/popover";
 2
 3export function InteractiveTooltip() {
 4  return (
 5    <Popover>
 6      <PopoverTrigger openOnHover delay={200}>Status</PopoverTrigger>
 7      <PopoverContent>
 8        <a href="/billing">Manage billing</a>
 9      </PopoverContent>
10    </Popover>
11  );
12}