Vue and Vue-tippy html content

Viewed 2517

I need to show an html content inside vue-tippy element (https://github.com/KABBOUCHI/vue-tippy) with data-binding elements, but it not works,

<div id="demo">
    <p>{{message}}</p>
    <br />
    <input v-model="message" title="Input">
    <br />
    Default example (it works)
    <button title="Hi!" v-tippy> My Button! </button>
    <br />
    Data binding example (it not works)
    <button title="{{ message }} " v-tippy> {{ message }} </button>
    <br />
    Data binding example (it works)
    <button :title="message" v-tippy> {{ message }} </button>

    <br />
    Data binding example  html content (it not works)
    <button id="button3" v-tippy data-html="#contentpopup"> {{ message }} -  html content </button>
    <br />
    <br />
    <div id="contentpopup" style="background:red;">
      <div>
         {{ message }} - My html content
      </div>
    </div>
    <br />
</div>

JS

var vueTippy = require('vue-tippy')
Vue.use(vueTippy)

var data = {
    message: 'Hello Vue.js!'
}

var demo = new Vue({
    el: '#demo',
    data: data
})

how can i fix this?

thanks

1 Answers
Related