v-tooltip
v-tooltip="'text'"
shows on hover
v-tooltip.bottom=""
control placement https://popper.js.org/popper-documentation.html#Popper.placements
v-tooltip="{text: 'text', show: alwaysShow, placement: 'right', fixed: true}"
trigger show manually, set options programatically
v-tooltip.fixed=""
use position: fixed to break free of stacking context (lags slightly when scrolling)
HOVER ME
UP TOP
LEFT
RIGHT ON THE END
DYNAMIC TEXT
html
<div v-tooltip.fixed="'HORRAY'">HOVER ME</div>
<div v-tooltip.top="'HORRAY'">UP TOP</div>
<div v-tooltip.left="'HORRAY'">LEFT</div>
<div v-tooltip.right-end="'HORRAY'">RIGHT ON THE END</div>
modifiers
modifier | description |
---|---|
top,right,bottom,left (-end / -start) | tooltip placement |
fixed | use position: fixed |