VueTippy

Arrows

Arrows point toward the reference element. There are two different types of arrows: Sharp and Round. You can transform the proportion and scale of the arrows any way you like.

Option Default Inputs Role
arrow false Boolean Adds an arrow pointing to the reference element. Setting this to true disables animateFill.
arrowType 'sharp' 'sharp' 'round' Specifies the type of arrow to use. Sharp is a CSS triangle, whereas Round is a custom SVG shape.
arrowTransform '' Transform CSS Allows you to transform the arrow, such as the proportion using scale.

Because of flipping, the syntax becomes dynamic. You must use the syntax that gives the desired results for the top placement, even if you use a different placement. Only translate and scale are supported for dynamic syntax.

'scaleX(1.5)' = wider arrow
'scaleX(0.5)' = narrower arrow
'scale(0.5)' = smaller arrow
'scale(1.5)' = larger arrow
'translateY(-5px)' = arrow closer to tooltip
'translateY(5px)' = arrow farther from tooltip 
<button title="I have a nice sharp arrow." v-tippy='{ arrow : true }'>
    Sharp
</button>
1
2
3
<button title="I have a nice round arrow." 
        v-tippy='{ arrow : true, arrowType : "round" }'>
    Round
</button>
1
2
3
4
<button title="My arrow is wide." 
        v-tippy='{ arrow : true, arrowTransform : "scaleX(1.4)" }'>
    Wide
</button>
1
2
3
4
<button title="My arrow is wide." 
        v-tippy='{ arrow : true, arrowType : "round", arrowTransform : "scale(0.7, 1)" }'>
    Skinny
</button>
1
2
3
4
<button title="My arrow is small." 
        v-tippy='{ arrow : true, arrowTransform : "scale(0.75)" }'>
    Small
</button>
1
2
3
4
<button title="My arrow is large."
        v-tippy='{ arrow : true, arrowTransform : "scale(1.5)" }'>
    Large
</button>
1
2
3
4

← Triggers →