Dynamic tooltip html content

[leonardotessaroalves]

i think its a bug.

i have some fields there are shown when the user interact over them. <div id="tooltip" class="hidden">content to show or hide</div> `

`

but the dom node

should be cloned

please replace this:

if (_content !== wrapper.children[0]) { wrapper.innerHTML = ''; wrapper.appendChild(_content); }

for: if (_content !== wrapper.children[0]) { wrapper.innerHTML = ''; var cln = _content.cloneNode(true) wrapper.appendChild(cln); }

line 2621

[Hidejec]

Please have a look into this.

I also encountered this bug wherein I have a dynamic component with v-if to only render in a specified condition. But the v-tooltip-directive moved the original node and appended it to the wrapper tooltip element as the content, now the original HTML element doesn't get re-rendered, therefore broke the tooltip element since it don't have any html element to reference.

I managed to fix this by applying @leonardotessaroalves's answer: var cln = _content.cloneNode(true); cln.setAttribute('class', 'cloned-node'); wrapper.appendChild(cln); content.setAttribute('style', 'display: none;'); but with added style and class for displaying:

.cloned-node { display: block!important; }

So basically It will add a style="display: none;" to all of my original HTML elements for tooltip because the texts will show up on your page if you do not do this, and then cloned-node class: for tooltip content to show up like normal since it will override the style="display:none;.

I'll make a PR on this.

[hekigan]

@leonardotessaroalves Hi, sorry to be so late to reply. A new version is out and it also addresses your problem.

first of all i'd like to point out a few mistakes:

• in your example, you are writing: v-tooltip.html.top => v-tooltip.top The .html option does not exist.
• You could have used the visible argument to switch the visibility of the tooltip <span v-tooltip.html.top="{ html: 'tooltip', visible: mycondition }"
• both your conditions display the same tooltip, so obviously it will show up either way

And last point that I would like to address is that from this new version, you should use ref instead of html. It's the more Vue way of doing things to refer to an element in a component.

I wrote a simple example below for you: https://jsfiddle.net/hekigan/cf9z48t2/

I hope that I have been clear enough in my explanation, sorry again for the delay.