Skip to content
On this page

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

modifierdescription
top,right,bottom,left (-end / -start)tooltip placement
fixeduse position: fixed

Released under the MIT License.