Tooltip

When to use

Use for brief, supplementary information. icon explanations, truncated text previews, keyboard shortcuts.

Never put critical information in tooltips. Users must complete tasks without seeing them.

Guidelines

• Keep brief: Short, self-sufficient text. No redundancy.
• Keyboard accessible: Tooltips must activate via keyboard focus, not just hover.
• Don't block content: Position so they don't cover related elements.
• Not a fix for bad labels: If an icon needs a tooltip to be understood, use a text label instead.

How it works

<Button v-tooltip="'Save'" icon="pi pi-save" />
<Button v-tooltip.bottom="'Bottom'" icon="pi pi-info" />
<span v-tooltip="'Help text'">Hover me</span>