Sometimes, we want to add a Bootstrap tooltip inside Vue.js.
in this article, we’ll look at how to add a Bootstrap tooltip inside Vue.js.
How to add a Bootstrap tooltip inside Vue.js?
To add a Bootstrap tooltip inside Vue.js, we can create a directive.
For instance, we write
Vue.directive("tooltip", (el, binding) => {
$(el).tooltip({
title: binding.value,
placement: binding.arg,
trigger: "hover",
});
});
to create the tooltip directive that calls Bootstrap’s tooltip jQuery method to create the tooltip with the tiyle and placement.
Then we can use the directive with
<span class="label label-default" v-tooltip:bottom="'Your tooltip text'"></span>
by setting the bottom placement modifier and the 'Your tooltip text' as the tooltip title text.
Conclusion
To add a Bootstrap tooltip inside Vue.js, we can create a directive.
