Tooltip — Feedback

Tooltips

Contextual hover overlays that display supplementary information. Tooltips support four directional placements (top, bottom, left, right), light/dark/glass variants, size tiers, and HTML content. All positioning and visibility are handled via data attributes and CSS — minimal JavaScript is required for initialization.

Placements

<!-- Placement via data attribute -->
<button class="vd-btn"
        data-tooltip="Tooltip on top"
        data-tooltip-placement="top">
  Top
</button>

<button class="vd-btn"
        data-tooltip="Tooltip on bottom"
        data-tooltip-placement="bottom">
  Bottom
</button>

<button class="vd-btn" data-tooltip="Tooltip on left" data-tooltip-placement="left">Left</button>
<button class="vd-btn" data-tooltip="Tooltip on right" data-tooltip-placement="right">Right</button>

Variants & Sizes

<!-- Color variants -->
<button data-tooltip="Default tooltip">Default</button>
<button data-tooltip="Dark tooltip" data-tooltip-variant="dark">Dark</button>
<button data-tooltip="Light tooltip" data-tooltip-variant="light">Light</button>
<button data-tooltip="Glass tooltip" data-tooltip-variant="glass">Glass</button>

<!-- Size variants -->
<button data-tooltip="Small tooltip" data-tooltip-size="sm">Small</button>
<button data-tooltip="Large tooltip" data-tooltip-size="lg">Large</button>

HTML Content

<!-- HTML content tooltip -->
<button class="vd-btn vd-btn-outline-primary"
        data-tooltip-html="<div class='vd-text-sm vd-font-semibold'>Quick Tip</div>
<div class='vd-text-xs vd-mt-1'>Use <kbd>Ctrl+K</kbd> to open search.</div>">
  Rich Tooltip
</button>

CSS Variables

Variable	Default	Description
`--vd-tooltip-bg`	`var(--vd-color-white)`	Default tooltip background
`--vd-tooltip-bg-light`	`var(--vd-color-gray-100)`	Light variant background
`--vd-tooltip-bg-dark`	`var(--vd-color-gray-900)`	Dark variant background
`--vd-tooltip-text-color`	`var(--vd-color-gray-900)`	Default text color
`--vd-tooltip-text-color-light`	`var(--vd-color-gray-800)`	Light variant text
`--vd-tooltip-text-color-dark`	`var(--vd-color-white)`	Dark variant text
`--vd-tooltip-padding-y`	`0.5rem (8px)`	Vertical padding (Fibonacci)
`--vd-tooltip-padding-x`	`0.8125rem (13px)`	Horizontal padding (Fibonacci, ratio ~phi)
`--vd-tooltip-arrow-size`	`5px`	Arrow dimensions (Fibonacci)
`--vd-tooltip-max-width`	`233px`	Max width (Fibonacci)
`--vd-tooltip-z-index`	`1070`	Stacking above most components

API Reference

Wiring

import { ref } from 'vue';
import { useTooltips } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useTooltips(root);   // wires [data-tooltip] inside root; cleanup on unmount

CSS Classes

Class	Description
`.vd-tooltip`	Base tooltip element. Positioned absolutely with arrow, shadow, and max-width.
`.vd-tooltip-top / [data-placement="top"]`	Tooltip appears above the trigger.
`.vd-tooltip-bottom / [data-placement="bottom"]`	Tooltip appears below the trigger.
`.vd-tooltip-left / [data-placement="left"]`	Tooltip appears to the left.
`.vd-tooltip-right / [data-placement="right"]`	Tooltip appears to the right.
`.vd-tooltip-light`	Light gray background with dark text.
`.vd-tooltip-dark`	Dark background with white text.
`.vd-tooltip-glass`	Frosted glass background with blur and translucent border.
`.vd-tooltip-sm`	Compact padding and smaller font.
`.vd-tooltip-lg`	More spacious padding and larger font.
`.vd-tooltip-html`	Allows HTML content inside the tooltip body.
`.vd-tooltip-wrapper`	Optional inline-block wrapper for positioning context.

Data Attributes

Attribute	Description
`data-tooltip="text"`	Plain text content for the tooltip. Wired by useTooltips(root).
`data-tooltip-html="HTML"`	HTML content for the tooltip. Escaped automatically if the attribute contains plain text with entities.
`data-tooltip-placement="top\|bottom\|left\|right"`	Tooltip position relative to the trigger. Default: top.
`data-tooltip-variant="light\|dark\|glass"`	Visual style variant. Default: standard (white).
`data-tooltip-size="sm\|lg"`	Size modifier. Default: medium.

Composable API

Symbol	Description
`useTooltips(root)`	Composable — wires every [data-tooltip] / [data-tooltip-html] element inside the root ref. Call once in setup().
`(automatic cleanup)`	Hover listeners and the tooltip node are removed on component unmount.

v1.4.1 sanitizes tooltip HTML with inline styles disabled by default for framework call sites. Prefer data-tooltip for user-provided text and reserve data-tooltip-html for trusted markup.

Accessibility

Tooltips should not contain critical information — ensure the same content is available via visible text or an aria-label on the trigger.
For keyboard users, tooltips should appear on focus and hide on blur, not just on hover.
Use aria-describedby on the trigger pointing to the tooltip element so screen readers announce the tooltip content when focus lands on it.
Tooltips with interactive content (links, buttons) should use a popover or modal instead — tooltips are not focus traps.
Avoid tooltips that exceed --vd-tooltip-max-width with large amounts of text. Break complex content into shorter lines or use a popover.
Ensure sufficient color contrast for all variant combinations (dark-on-light, light-on-dark, glass text on varying backgrounds).