is it possible to add a click event handler to the tooltip options ?

i know that we already have the option of custom html, but consider this example.

• we have a loop that will render a table with columns “keys, values, ops”
• now for each cell of the keys column, we show a tooltip with some info
• but we also want to allow the user to interact with that tooltip so we could do something like

v-tippy="{ position : 'right',  arrow: true, interactive: true, clickEvent: doSomething(data) }"

and inside the doSomething()

doSomething(data) {
 // data is basicly the 'data-original-title' tippy has auto-resolved for us
}

[KABBOUCHI]

@ctf0 sorry for the delay, please check the code bellow

1- in content.vue edit tr: use data-html and store the current tr key value.

 <tr v-for="(mainV, mainK, mainI) in selectedFileDataClone" :key="mainI">
                        :title="getKey(mainK)"
                        v-tippy="{ position : 'right',  arrow: true, interactive: true }"
                        data-html="#tippyWithClickEvent"
                        @mouseover="onMouseOver(getKey(mainK))"

2- add to content.vue: reusable html template for tippy

<div id="tippyWithClickEvent" style="visibility: hidden">
    <a    class="click-me"
            :data-title="mouseoverKeyValue"
            :data-some-key="'cache value for later use!'">
                {{ mouseoverKeyValue }}
    </a>
</div>

3- add this method to content.vue

onMouseOver(val) {
    this.mouseoverKeyValue = val;
}

4- add this function to content.vue

mounted() {
    $(document).on("click", ".click-me", function () { // triggered when you click on the tooltip
        console.log($(this).data('title'))
    });
}

5- add data key/value to ops.js

 mouseoverKeyValue : ''

[ctf0]

another way incase someone was after the same thing but easier than the docs

• the title can return an html markup not just plain string, so instead of the extra template you can

<td v-tippy="{interactive: true}"
    :title="getTTC(Some-dynamic-value)">
</td>

// ...
methods: {
    getTTC(val) {
        return `<span style="cursor: pointer" class="c2c">${val}</span>`
    },
},
mounted() {
   // any events you want to hook into
    document.addEventListener('click', (e) => {
        let item = e.target

        if (item.classList.contains('c2c')) {
            // do something
        }
    })
},