TooltipContent

Source: client/lib/theme/vueda-tailwind/shell/index.js

The compact floating tooltip panel. It inverts foreground and background tokens, uses control radius, and follows the tooltip surface rule.

Vue component: TooltipContent

Slot	Default classes	Description
root	3 classes	The compact floating tooltip panel. It inverts foreground and background tokens, uses control radius, and follows the tooltip surface rule.
arrow	2 classes	The tooltip arrow. It is a small rotated square that inherits the tooltip surface color and sits behind the panel edge.

root

The compact floating tooltip panel. It inverts foreground and background tokens, uses control radius, and follows the tooltip surface rule.

Default classes:

bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95
data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
z-50 w-fit rounded-vueda-control px-3 py-1.5 text-xs font-medium text-balance

Source: client/lib/theme/vueda-tailwind/shell/TooltipContent.theme.js:18

arrow

The tooltip arrow. It is a small rotated square that inherits the tooltip surface color and sits behind the panel edge.

Default classes:

bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)]
rotate-45 rounded-[2px]

Source: client/lib/theme/vueda-tailwind/shell/TooltipContent.theme.js:33