Note

This documentation describes the v-neos-tooltip Vue directive for native UI views. For Xml templates see tooltip.

v-neos-tooltip

Sets a native title attribute tooltip on any element. Automatically removes the attribute when the value is empty or undefined.

Import

import { NeosTooltip } from '@neos/design-system'

Syntax

<div v-neos-tooltip="'Tooltip text'" />

Value

Type	Description
string	The tooltip text to show in the native title attribute
undefined \| null \| ''	Removes the title attribute

Notes

• Uses the browser's native tooltip mechanism (title attribute).
• For rich tooltips with HTML content or custom styling, use CSS-based tooltip components instead.
• The directive reactively updates the attribute when the bound value changes.

Usage Examples

Static tooltip

<button v-neos-tooltip="'Save all changes'" icon="pi pi-save" />

Dynamic tooltip

<div v-neos-tooltip="item.isLocked ? 'Locked by ' + item.lockedBy : undefined">{{ item.name }}</div>

Conditional tooltip on an icon

<span class="pi pi-info-circle" v-neos-tooltip="propertyDescription" />

Remove tooltip when not needed

<button
  v-neos-tooltip="hasError ? 'Fix validation errors first' : ''"
  label="Submit"
  :disabled="hasError"
/>