---
url: "https://vueda.dev/v3/reference/theming/keys/TooltipContent.md"
title: "TooltipContent"
---

# 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](/v3/reference/api/vue/TooltipContent.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/TooltipContent.md#theme-key-TooltipContent-root) | 3 classes | The compact floating tooltip panel. It inverts foreground and background tokens, uses control radius, and follows the tooltip surface rule. |
| [arrow](/v3/reference/theming/keys/TooltipContent.md#theme-key-TooltipContent-arrow) | 2 classes | The tooltip arrow. It is a small rotated square that inherits the tooltip surface color and sits behind the panel edge. |

<a id="theme-key-TooltipContent-root"></a>

## root

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

Default classes:

```text
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`

<a id="theme-key-TooltipContent-arrow"></a>

## arrow

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

Default classes:

```text
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`