Placement

Tooltips can be placed in four different ways in relation to their reference element. Additionally, the tooltip can be shifted.

Option Default Inputs Role
placement 'top' 'top' 'bottom' 'left' 'right' Specifies which direction to place the tooltip in relation to the reference element. Add the suffix -start or -end to shift the placement. top-end is an example.
<button content="Look at me on the top!" v-tippy='{ placement : "top" }'>
    Top
</button>
1
2
3
<button content="Look at me on the right!" v-tippy='{ placement : "top-end" }'>
    Top-End
</button>
1
2
3