Tooltip — aardvark

The built-in tooltip tag — a floating label shown on hover or focus of a target. Usage, options, and live examples (position, arrow, color, multiline).

A floating label that appears when you hover or focus a single target. The target is the block body; label is the floating text. It ships with aardvark, so a tooltip is a single tag pair with no setup. The tooltip reveals on hover or focus after the page hydrates — pass opened to force it visible in docs and screenshots.

Use it as {% tooltip %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'tooltip', …).

Demonstrations

Basic

Hover the target to reveal the label.

Hover me

Source: Markdown

Source: Python

Position, color, and arrow

position anchors the tooltip on any edge (top / bottom / left / right, plus the -start / -end variants), color tints its background, and withArrow draws a pointer. Each tooltip below is pinned open so you can see all three at once:

Top + arrow

Right + color

Bottom

Source: Markdown

Source: Python

Multiline

For longer labels, turn on multiline and give it a width to wrap at. radius, offset, arrowSize, openDelay, and closeDelay further tune the look and timing.

Long label

Source: Markdown

Source: Python

Force it open

opened=true keeps the tooltip showing without a hover — useful in docs or to call out a control:

Pinned

Source: Markdown

Source: Python

With other components

The target body can be any inline content — including another tag. Here a tooltip wraps a Badge so hovering the badge explains the status:

Live

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default. The target is the block body (or, from Python, children).

Attribute	Valid values	Description
`label`	string	The floating text shown over the target.
`position`	`top` (default), `bottom`, `left`, `right`, plus the `-start` / `-end` variants	Edge the tooltip anchors to.
`color`	any theme color (`blue`, `dark`, `red`, `grape`, …)	Background color of the tooltip.
`withArrow`	bare flag → `true`	Draw a small pointer at the anchored edge.
`arrowSize`	integer (pixels)	Arrow size.
`offset`	integer (pixels)	Gap between the target and the tooltip.
`multiline`	bare flag → `true`	Allow the label to wrap (pair with `width`).
`width`	integer (pixels)	Max width, for multiline labels.
`radius`	`xs`–`xl` or a number	Corner radius of the tooltip.
`openDelay`	integer (milliseconds)	Delay before showing on hover.
`closeDelay`	integer (milliseconds)	Delay before hiding after the pointer leaves.
`transition`	`fade`, `pop`, `scale`, `skew-up`, …	Show/hide transition.
`transitionDuration`	integer (milliseconds)	Transition length.
`opened`	bare flag → `true`	Force the tooltip open — handy for documentation and screenshots.

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="Tooltip"], or through the Mantine Styles API classes. The tooltip mounts into a portal and its parts exist only while it is shown. The relevant classes:

/* Every rendered Tooltip carries this island marker */
[data-aardvark-island="Tooltip"] { }

/* Mantine Styles API classes */
.mantine-Tooltip-tooltip { }
.mantine-Tooltip-arrow { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert. (Unlike the other overlays, attr lands on the target here, not the floating tooltip — Mantine merges a Tooltip ref onto the target element, so the bubble can’t be addressed directly.)

Hover me

Source: Markdown

Source: Python