Using v-tooltip: directive activation inside a v-html content

1k Views Asked by At

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?

0

There are 0 best solutions below