VueTippy

Demo

Default

The default tooltip looks like this. It has a nifty background fill animation!

<button content="I'm a Tippy tooltip!" v-tippy>
  Tooltip using directive  
</button>

<!-- OR -->

<tippy>

    <template v-slot:trigger>
        <button>
        Tooltip using component + slots
        </button>
    </template>

     I'm a Tippy tooltip!
</tippy>

<!-- OR -->

<tippy content="I'm a Tippy tooltip!">
   <button v-slot.trigger>
       Tooltip using component + trigger slot and content as attribute/prop
   </button>
</tippy>

<!-- OR -->

<tippy to="externalTrigger">
    I'm a Tippy tooltip!
</tippy>

<button name="externalTrigger">Tooltip using component</button>


<!-- OR -->

<tippy toSelector=".cssSelector">
    I'm a Tippy tooltip!
</tippy>

<button class="cssSelector">Tooltip using component</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Placement

Tooltips can be placed in four different ways in relation to the reference element. Additionally, the tooltip can be shifted along the axis using the suffix -start or -end

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{ placement : 'bottom' }">
    Bottom
</button>
1
2
3
4
5

Arrows

Tooltips can have an arrow that points toward the reference element. The size and proportion can also be modified with CSS.

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{arrow : true, arrowType : 'round', animation : 'fade'}">
    Round arrow
</button>
1
2
3
4
5

Animations

Tooltips can have different types of transition animations. Note, the filling effect has been disabled in these examples (animateFill: false).

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{ animateFill: false, animation : 'shift-toward'}">
   Shift Toward
</button>
1
2
3
4
5

Themes

Tooltips can have custom styling.

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{ theme : 'light'}">
    Light
</button>
1
2
3
4
5

Triggers

Tooltips can also be triggered by click or focus events.

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{trigger : 'click'}">
    Click
</button>
1
2
3
4
5

Interactivity

Tooltips can be interactive, allowing you to hover over and click inside them.

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{interactive : true}">
    Interactive
</button>
1
2
3
4
5

HTML Content

Tooltips can contain HTML.

0

<button 
    :content='`<strong>Bolded <span>content</span> (${timer})</strong>`' 
    v-tippy-v4>
    HTML Content (hover)
</button>

<tippy 
    interactive 
    :animate-fill="false" 
    placement="bottom" 
    distant="7" 
    theme="light" 
    animation="fade" 
    trigger="click" 
    arrow>
<template v-slot:trigger>
<button>
HTML Content using component (click)
</button>
</template>

<span>
    <button @click="timer = timer + 10">Increase</button>
    <p>{{ timer }}</p>
</span>
</tippy>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Duration

Tooltips can have different animation durations.

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{duration : 0}">
    0
</button>

<tippy content="I'm a Tippy tooltip!" duration="1000">
    <button slot="trigger" class="btn">1000</button>
</tippy>

<tippy content="I'm a Tippy tooltip!" :duration="[800,100]">
    <button slot="trigger" class="btn">[800,100]</button>
</tippy>
1
2
3
4
5
6
7
8
9
10
11
12
13

Delay

Tooltips can delay hiding or showing after a trigger.

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{delay : 500}">
   500
</button>

<tippy content="I'm a Tippy tooltip!" :delay="[800,0]">
    <button slot="trigger" class="btn">[800,0]</button>
</tippy>

<tippy content="I'm a Tippy tooltip!" :delay="[0,800]">
    <button slot="trigger" class="btn">[0,800]</button>
</tippy>
1
2
3
4
5
6
7
8
9
10
11
12
13

Follow Cursor

Tooltips can follow the mouse cursor and abide by a certain axis. Additionally, the tooltip can follow the cursor until it shows, at which point it will stop following (initial).

<button 
    content="I'm a Tippy tooltip!" 
    v-tippy="{followCursor : true}">
    Default
</button>
1
2
3
4
5

SVGs

Tooltips can be placed on SVG nodes, where followCursor: 'initial' becomes very useful, since it can be placed directly on the line.

<svg 
    height="150" 
    width="150">
    <line x1="0" y1="0" x2="150" y2="150" style="stroke:red;strokeWidth:5" 
    content="I'm a Tippy tooltip!" 
    v-tippy='{followCursor : "initial", animation:"fade", delay:100, arrow : true}'></line>
</svg>
1
2
3
4
5
6
7

Multiple

Attach many tippys to a single element.

Left
Right
Top
Bottom
    <tippy to="tippyMultiple" flip=false placement="left" multiple>Left</tippy>
    <tippy to="tippyMultiple" flip=false placement="right" multiple>Right</tippy>
    <tippy to="tippyMultiple" flip=false placement="top" multiple>Top</tippy>
    <tippy to="tippyMultiple" flip=false placement="bottom" multiple>Bottom</tippy>
    
    <button name="tippyMultiple" class="btn"> Multiple </button>
1
2
3
4
5
6

Component: enabled and visible

Visible 

    <tippy to="visibleTest"  :visible="timer % 2 == 0" trigger="manual"> 
        Visible 
    </tippy>
    <button name="visibleTest" class="btn"> Visibile prop </button>
1
2
3
4

Getting Started →