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.