Tippy.vue

<tippy>

For anything other than the simplest tooltips, the <tippy> component will be the best (or only) option. When it gets mounted it searches for a matching v-tippy target and binds itself to that element. Details on the search algorithm are in the target binding section.

Example

The basic usage of <tippy> involves marking an element as a tippy target and then adding a matching <tippy> sibling element.

<button v-tippy>Plain</button>
<tippy>Plain time: {{seconds}}</tippy>
<button v-tippy:html>HTML</button>
<tippy target="html">Bold time: <b>{{seconds}}</b></tippy>

Props

Note that a bare attribute is identical to ''. This is used for several flag-like properties. (e.g. <tippy interactive></tippy>)

target: string | '_parent'

Sets the v-tippy target name this component will bind to. When set to _parent, it will bind to its direct parent element. Details on how exactly this binding process works are in the target binding section.

When specified, the component will perform the target search using querySelector on its parent, as opposed to only searching its siblings.

singleton: string | ''

The name of a <tippy-singleton> to bind to. Details on how singleton binding works are in the singleton binding section.

visible: boolean

Controls the visibility of the tooltip when the trigger is set to 'manual'. To manually show/hide the tooltip when using another trigger, use component.tip.show() and component.tip.hide()

eager: boolean

Controls whether the tooltip content should be rendered eagerly or only when the tooltip is actually visible.

Common props

These options are common to both <tippy> and <tippy-singleton>

extra: Props

Extra Tippy.js optionsopen in new window

enabled: boolean

Whether the tooltip should be enabledopen in new window

placement: Placement

The Tippy.js placementopen in new window. Defaults to 'top'

interactive: boolean | ''

The Tippy.js interactive flagopen in new window. The on-body prop implements the appendTo: () => document.body workaround mentioned in the linked documentation.

on-body: boolean | ''

Whether to place an interactive tooltip in the <body> instead of next to the target. This can be useful when you need to isolate the styles (a rogue selector may be trying to style the tooltip contents) or to avoid clipping issuesopen in new window.

trigger: string

The Tippy.js triggeropen in new window.

hide-on-click: boolean

Whether to hide the tooltip when clicking outside it. This defaults to false when using trigger="manual" and true otherwise.

delay: string | number | Array

The Tippy.js delay propertyopen in new window, but with some added parsing for convenience. The property supports directly passing either a number or an array to the underlying tippy instance. If passed a string, it will either parse it as a number or as two comma-separated elements, each of which can be either a positive number or a -, which corresponds to null in the two-element-array form of the Tippy.js prop

<!-- show and hide delay are 100ms -->
<tippy delay="100"></tippy> 
<!-- show delay is 100ms, hide delay is 200ms -->
<tippy delay="100,200"></tippy>
<!-- show delay is 100ms, hide delay is the default -->
<tippy delay="100,-"></tippy>

Events

attach(tip)

<tippy> fires the attach event after the tippy instance is been created and has been attached to the target element.

Common events

The <tippy> component exposes several of the Tippy.js eventsopen in new window as Vue events:

Tippy.js eventVue eventVue event parameters
onShowopen in new windowshow(tip)
onShownopen in new windowshown(tip)
onHiddenopen in new windowhidden(tip)
onHideopen in new windowhide(tip)
onMountopen in new windowmount(tip)
onTriggeropen in new windowtrigger(tip, triggerEvent)
onUntriggeropen in new windowuntrigger(tip, triggerEvent)

Target Binding

After the <tippy> element is mounted it will search for an element with a matching v-tippy name, starting with the nearest preceding siblings and then the subsequent siblings. This allows easily creating lists, since you can repeat tippy elements without them interfering.

The default algorithm only searches among the <tippy> element's direct siblings. If you need to search through the entire hierarchy you can use the deep-search flag, which will use querySelector on the <tippy> component's parent element.

<!-- Search order: -->
<button></button> <!-- 3 -->
<button></button> <!-- 2 -->
<button></button> <!-- 1 -->
<tippy></tippy>
<button></button> <!-- 4 -->
<button></button> <!-- 5 -->
<button></button> <!-- 6 -->

<!-- Lists: -->
<button v-tippy>Item 1</button> 
<tippy>Tip 1</tippy> <!-- binds to the previous button -->
<button v-tippy>Item 2</button>
<tippy>Tip 2</tippy> <!-- binds to the previous button -->

<!-- Only siblings: -->
<button v-tippy></button> <!-- won't search outside its parent-->
<div>
  <tippy></tippy>
  <div>
    <button v-tippy></button> <!-- won't drill into nested elements -->
  </div>
</div>

Because of the order that things are mounted, <tippy> defers this check until the tick after it gets mounted. If it searched immediately, subsequent elements may not be fully mounted, and so v-tippy won't have had a chance to add the data-tippy-target attribute. See Vue.nextTickopen in new window for information on Vue ticks.

Singleton Binding

The algorithm for binding to a <tippy-singleton> is in essence the same as target binding, but applied to all the component's ancestors. It first applies the standard search order among its siblings, then its parent's siblings, then up the hierarchy until it finds a match.

<!-- Search order: -->
<button></button>   <!-- 5 -->
<div>
  <button></button> <!-- 2 -->
  <button></button> <!-- 1 -->
  <tippy singleton></tippy>
  <button></button> <!-- 3 -->
  <button></button> <!-- 4 -->
</div>
<button></button>   <!-- 6 -->

<!-- Lists: -->
<tippy-singleton/>
<button v-tippy>Item 1</button>
<tippy singleton>Tip 1</tippy>
<div>
  <button v-tippy>Item 2</button>
  <tippy singleton>Tip 2</tippy>
</div>

<!-- Nearest parent: -->
<tippy-singleton/>
<div>
  <tippy-singleton/> <!-- They'll bind here -->
  <div>
    <tippy singleton></tippy>
    <tippy singleton></tippy>
    <tippy singleton></tippy>
  </div>
</div>