I need a help with a Vue.js package, v-tooltip (https://akryum.github.io/v-tooltip/#/).
I read the docs and see the examples on the site, and my test work perfectly:
<a
href="#"
v-tooltip="{
content: 'Tooltip Content',
placement: 'top-center',
delay: {
show: 400,
hide: 400,
},
}"
class="tooltip-link">tooltip special link</a>
Now, in my site I can't insert HTML markup like this example, but in my component I get an attribute data-content. This attribute is a containing HTML markup with the v-tooltip directive, so I print it in this way:
<div class="rte general-typo"v-html="content"></div>
The content is created with a WISIWIG editor, modified to add custom markup for the tooltip element; my vue component just get this string variable.
The results of this operation is that the v-tooptip directive is not "read", and the tooltip doesn't show.
With the inspector, I can see the difference between the 2 examples: in the fist case I can see <a data-v-00f96b30="" href="#" class="tooltip-link has-tooltip" data-original-title="null">tooltip special link</a>
(v-tooltip directive processed, tooltip activated), in the second example I can see <div data-v-00f96b30="" class="rte general-typo"><a href="#" v-tooltip="{content: 'Tooltip Content',placement: 'top-center',delay: {show: 400,hide: 400,},}" class="tooltip-link">tooltip special link</a></div>
.
How can I "force" the activation of my directive?