How can add bootstrap tooltip inside Vue.js

You can use this directive:

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

For example:

<span class="label label-default" v-tooltip:bottom="'Your tooltip text'">

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

<span class="label label-default" v-tooltip:bottom="tooltipText">

And in your component script:

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

twitter-bootstrap laravel vue.js

You need to run $('[data-toggle="tooltip"]').tooltip() AFTER the data loads from the server. To ensure the DOM is updated, you can use the nextTick function:

fetchTaskList: function(){    this.$http.get('/backend/religion/data', function(tasks){        this.$set('list', tasks);        Vue.nextTick(function () {            $('[data-toggle="tooltip"]').tooltip()        })    });}

https://vuejs.org/api/#Vue-nextTick

Edit: a more complete and robust solution has been posted by Vitim.us below

twitter-bootstrap laravel vue.js

The right way to this, is making it a directive, so you can hook on the life cycle of a DOM element.

https://vuejs.org/v2/guide/custom-directive.html

https://gist.github.com/victornpb/020d393f2f5b866437d13d49a4695b47

/** * Enable Bootstrap tooltips using Vue directive * @author Vitim.us * @see https://gist.github.com/victornpb/020d393f2f5b866437d13d49a4695b47 * @example *   <button v-tooltip="foo">Hover me</button> *   <button v-tooltip.click="bar">Click me</button> *   <button v-tooltip.html="baz">Html</button> *   <button v-tooltip:top="foo">Top</button> *   <button v-tooltip:left="foo">Left</button> *   <button v-tooltip:right="foo">Right</button> *   <button v-tooltip:bottom="foo">Bottom</button> *   <button v-tooltip:auto="foo">Auto</button> *   <button v-tooltip:auto.html="clock" @click="clock = Date.now()">Updating</button> *   <button v-tooltip:auto.html.live="clock" @click="clock = Date.now()">Updating Live</button> */Vue.directive('tooltip', {  bind: function bsTooltipCreate(el, binding) {    let trigger;    if (binding.modifiers.focus || binding.modifiers.hover || binding.modifiers.click) {      const t = [];      if (binding.modifiers.focus) t.push('focus');      if (binding.modifiers.hover) t.push('hover');      if (binding.modifiers.click) t.push('click');      trigger = t.join(' ');    }    $(el).tooltip({      title: binding.value,      placement: binding.arg,      trigger: trigger,      html: binding.modifiers.html    });  },  update: function bsTooltipUpdate(el, binding) {    const $el = $(el);    $el.attr('title', binding.value).tooltip('fixTitle');    const data = $el.data('bs.tooltip');    if (binding.modifiers.live) { // update live without flickering (but it doesn't reposition)      if (data.$tip) {        if (data.options.html) data.$tip.find('.tooltip-inner').html(binding.value);        else data.$tip.find('.tooltip-inner').text(binding.value);      }    } else {      if (data.inState.hover || data.inState.focus || data.inState.click) $el.tooltip('show');    }  },  unbind(el, binding) {    $(el).tooltip('destroy');  },});//DEMOnew Vue({  el: '#app',  data: {    foo: "Hi",    bar: "There",    baz: "<b>Hi</b><br><i>There</i>",    clock: '00:00',  },  mounted() {    setInterval(() => this.clock = new Date().toLocaleTimeString(), 1000);  }});

<link href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.js"></script><script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script><div id="app">  <h4>Bootstrap tooltip with Vue.js Directive</h4>  <br>  <button v-tooltip="foo">Hover me</button>  <button v-tooltip.click="bar">Click me</button>  <button v-tooltip.html="baz">Html</button>  <br>  <button v-tooltip:top="foo">Top</button>  <button v-tooltip:left="foo">Left</button>  <button v-tooltip:right="foo">Right</button>  <button v-tooltip:bottom="foo">Bottom</button>  <button v-tooltip:auto="foo">Auto</button>  <button v-tooltip:auto.html="clock" @click="clock = 'Long text test <b>bold</b>'+Date.now()">Updating</button>  <button v-tooltip:auto.html.live="clock" @click="clock = 'Long text test  <b>bold</b>'+Date.now()">Updating Live</button></div>

Expand snippet