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 content="I have a nice sharp arrow." v-tippy='{ arrow : true }'>
    Sharp
</button>

1
2
3

<button content="I have a nice round arrow." 
        v-tippy='{ arrow : true, arrowType : "round" }'>
    Round
</button>

1
2
3
4

← Placement Triggers →

# Arrows

Arrows