VueTippy

HTML

Tooltips can even contain HTML!

Option Default Inputs Role
reactive false Boolean

When you set reactive to true, element will be used directly:

– Can only be used once

– Removed from the page and appended directly to the tooltip

– Saves event listeners attached to it

– Directly modifiable

When you set reactive to false, element will be cloned:

– Can be re-used multiple times

– Not removed from the page

– Will not save event listeners attached to it

– Not directly modifiable

– if you add v-tippy-html directive will update the tooltip content automatically

interactive false Boolean Makes a tooltip interactive, i.e. will not close when the user hovers over or clicks on the tooltip. This lets you create a popover (similar to Bootstrap) when used in conjunction with a click trigger.

Reactive set to false

<div id="template-1" class="hidden">
    <div class="max-w-md w-full">
        <div class="m-2">
            <div class="text-black font-bold text-xl">
                Can coffee make you a better developer?
            </div>
            <p class="text-grey-darker text-base">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
            </p>
        </div>
    </div>
</div>    

<button v-tippy="{ html: '#template-1', interactive : true, theme : 'light' }">
    Static HTML Template
</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Reactive set to false + v-tippy-html directive

<div id="template-2" class="hidden" v-tippy-html>
        <div class="max-w-md w-full">
            {{ timer }}  - <span class="text-purple-dark">v-tippy-html</span> 
            directive will update the tooltip content automatically
        </div>
</div>    

<button v-tippy="{ html: '#template-2', interactive : true, theme : 'light' }">
    Static HTML Template
</button>
1
2
3
4
5
6
7
8
9
10

Reactive

Hello Vue! | counter : 0 

<div id="template-3">
    <div class="max-w-md w-full py-4 px-8">
        <p> {{ message }} | counter : {{ counter }} </p>  
       <button class="btn mt-2 mb-2" @click="counter++">Increment</button>
    </div>
</div>

<button v-tippy="{ html: '#template-3', reactive : true,
        interactive : true, theme : 'light', animateFill : false }">
    Full reactive template
</button>
1
2
3
4
5
6
7
8
9
10
11

← Misc →