Level 3
Ok, i just found i workaround to this, but if someone have a better and correct answer it will help a lot:
I put after the Vue instance this code:
$('#app').tooltip({
selector: '[data-toggle="tooltip"]'
});
Nov 21, 2020
4
Level 3
How to activate Bootstrap tooltip inside Vue if directive?
Here is my code:
<div v-if="form.errors.any()">
<span class="d-inline-block"
tabindex="0"
data-toggle="tooltip"
title="Fill the form correctly">
<button style="pointer-events: none;"
disabled="disabled"
class="btn btn-success">Create account</button>
</span>
</div>
To activate tooltips in bootstrap i had to use jQuery:
$('[data-toggle="tooltip"]').tooltip();
So i used Vue next tick to apply the code above in my root instance every cicle like so:
new Vue({
el: '#app',
mounted() {
this.$nextTick(function() {
$('[data-toggle="tooltip"]').tooltip();
});
}
});
The problem is that this doesnt work inside Vue directives like "if", it only works inside Vue components.
So, the question is simple, how can i use tooltips inside Vue if directives?
The HTML code above the tooltip is rendered only if the vue-if is true, so the tooltip doesnt work, but if i put the tooltip code outside the if, it works perfectly, am i missing something?
Level 28
The reason your original solution didn't work is because v-if complete removes all events when false (the element is completely removed from the DOM, including its events).
The solution you found uses event delegation, which is "worse" performance wise, but normally not noticeable depending on the number of elements. However, it is really useful when dealing with dynamic elements.
If you want to stick with your original solution, you could use v-show instead of v-if to keep the element in the DOM (with all of its events), while being hidden/shown with CSS instead of removed/added completely.
Level 3
I cant use v-show because my v-if has a v-else that shows a button without disabled property to user click when the form has no errors.
Unless i use two v-shows, one to show when has errors and one to show when doesnt, but idk, the jquery solution seems to work well delegating and its just a tooltip, normally i dont do these things.
Anyway, thanks for clarify this issue.
Level 28
From what I know, yes you need to use the inverse condition to simulate a v-else for v-show.
Please or to participate in this conversation.