vue-tippy: Component in tooltip doesn't work

Hello again. I am trying to use component, but it doesn’t work.

<button class="btn"  v-tippy data-arrow="true" data-html="#comppopup">CLICK</button>
<GoogleMaps style="display: none" id="comppopup"></GoogleMaps>

Without it component works fine on page. But tooltip it just empty.

UPD. Looks like this related to this specific Google Maps component. I just tried component without dynamic content, just static text, it works fine!

Then I guess, question is how to handle such usecases?

Anyway, like a I said before, library just awesome! I found out another bindings to tippy from EGOIST, and they doesn’t have component loading option at all. So, great work.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (8 by maintainers)

Commits related to this issue

https://github.com/KABBOUCHI/vue-tippy/issues/7 — committed to KABBOUCHI/temp-tippy-issue by KABBOUCHI 7 years ago

Most upvoted comments

@iamdubx yes binding will not work both ways, it’s converting from Vue template to normal HTML.

You can’t interact from the tooltip.

I’m planning for next version to change/fix it, maybe using portal-vue

Edit: You can bring back interaction like this but will not work for existing component, e.g:

in your component : add id to your btn => button#btn1 in created => EventBus.$on('button-btn1-clicked', () => { this.btnClicked() })
from app.JS: document.querySelector('.tippy-popper #btn').onclick = function() { EventBus.$emit('button-btn1-clicked'); }

KABBOUCHI on Aug 20, 2017

@iamdubx you can try this PR

KABBOUCHI on Aug 20, 2017