How can add bootstrap tooltip inside Vue.js

Question

I have a page for listing data from table using Vue.js and Laravel. Listing data is successful. Delete and edit function is going on. For that purpose I have added two

Answer 1

You can use this directive:

Vue.directive('tooltip', function(el, binding){
    $(el).tooltip({
             title: binding.value,
             placement: binding.arg,
             trigger: 'hover'             
         })
})

For example:

Or you can also bind the tooltip text to a computed variable:

And in your component script:

computed: {
    tooltipText: function() {
       // put your logic here to change the tooltip text
       return 'This is a computed tooltip'
    }
}