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 title="Look at me on the top!" v-tippy='{ placement : "top" }'>
Top
</button>
1
2
3
2
3
<button title="Look at me on the right!" v-tippy='{ placement : "top-end" }'>
Top-End
</button>
1
2
3
2
3