How can add bootstrap tooltip inside 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://v2.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');
},
});
//DEMO
new 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/[email protected]/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/[email protected]/dist/js/bootstrap.js"></script>
<script src="https://unpkg.com/[email protected]/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>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
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'
}
}