v-tippy
The v-tippy
directive has two "modes", which are determined when the directive is first mounted. If the directive has no value (e.g. <div v-tippy>
) it starts up in "target mode", otherwise it starts up in "inline mode".
Inline mode
The v-tippy
directive can be used to define a tooltip in-line, either as a string or a Tippy.js props objectopen in new window. The tooltip will automatically update if the text or any of the props change.
<button v-tippy="'<strong>Static text</strong>'">Static text</button>
<button v-tippy="'Current time: ' + seconds">Dynamic text</button>
<button v-tippy="{content: `Seconds: ${seconds}`, placement: 'right'}">Props object</button>
Like the Tippy.js content
optionopen in new window, make sure HTML strings containing user data are sanitized properly to prevent XSS attacks. For cases involving user data the <tippy>
component will likely be safer and more convenient.
Target mode
When started up in target mode, the directive marks itself as a target for the <tippy>
component. Note that <tippy>
components won't automatically respond when the marker is updated, so in most cases a dynamic argument won't work. Internally, the element is marked with data-tippy-target="arg"
.
The details of how <tippy>
binds to this marker are covered in the <tippy>
docs.
<button v-tippy>Default marker</button> <!-- Defaults to "" -->
<tippy>Default target</tippy>
<button v-tippy:name>Named marker</button>
<tippy target="name">Named target</tippy>