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 <span> (glyphicon-pencil), <span> (glyphicon-trash). If both <span> are outside the <template>tooltip shows, otherwise it doesn't works. Do you know how bootstrap tooltip works inside Vue Js. Thanks.

page.blade.php

    <template id="tasks-template">        <table class="table table-responsive table-bordered table-hover">             <thead>                    <tr>                    <th>#</th>                    <th>Id</th>                    <th>Religion</th>                    <th>Action</th>                    <th>Created</th>                    <td>Status</td>                </tr>            </thead>        <tbody>              <tr v-for="(index, task) in list">              <td><input type="checkbox" id="checkbox" aria-label="checkbox" value="checkbox"></td>              <td>@{{ index + 1 }}</td>             <td>@{{ task.religion | capitalize }}</td>            <td v-if="task.status == 'publish'">                      <span class="glyphicon glyphicon-ok"></span>            </td>            <td v-else>                      <span class="glyphicon glyphicon-remove"></span>            </td>            <td>@{{ task.created_at }}</td>            <td>                <span class="glyphicon glyphicon-pencil" aria-hidden="true" data-toggle="tooltip" data-placement="left" title="Edit"></span>                 <span class="glyphicon glyphicon-trash" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Delete"></span>            </td>          </tr>        </tbody>         </table>         </template>          <tasks></tasks>  @push('scripts')     <script src="/js/script.js"></script> @endpush  

scripts.js

$(function () {     $('[data-toggle="tooltip"]').tooltip() })   Vue.component('tasks', {      template: '#tasks-template',      data: function(){         return{             list: []         };     },      created: function(){         this.fetchTaskList();     },      methods: {         fetchTaskList: function(){             this.$http.get('/backend/religion/data', function(tasks){                 this.$set('list', tasks);             });         }     }  });  new Vue({    el: 'body' }); 

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:

<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'     } } 

Answer 2

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