is it possible to add a click event handler to the tooltip options ? about vue-tippy HOT 30 CLOSED

@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 : ''

from vue-tippy.

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
        }
    })
},

from vue-tippy.

Currently not possible to do it using tippy.js, can you try using component? please check this example

from vue-tippy.

No, the errors not related to my changes.(table.floatThead)

I'm on the phone, I'll share the code later.

from vue-tippy.

big thanx for ur hard work 💯

here is with some small edits

<template>
  <td nowrap contenteditable dir="auto"
    :title="getKey(mainK)"
    v-tippy="{ position : 'right',  arrow: true, interactive: true}"
    data-html="#tippyTemplate"
    @mouseover="keyToCopy = getKey(mainK)"
    ...

  </td>
  <!-- tippy template -->
  <div id="tippyTemplate">
    <span class="click-me">{{ keyToCopy }}</span>
  </div>
</template>

<style scoped>
  #tippyTemplate {
      height: 1px;
      visibility: hidden;
  }

  .click-me {
      cursor: pointer;
  }
</style>

<script>
// ...
mounted() {
  // copy to clipboard
  $(document).on('click', '.click-me', () => {
    this.$copyText(this.keyToCopy)
  })
}
</script>

on another note

i just noticed that tippy has Callbacks, can u plz add its usage to the docs ?

from vue-tippy.

found a way around

<td nowrap contenteditable dir="auto"
    :title="..."
    v-tippy="{ position : 'right',  arrow: true, interactive: true, trigger: 'mouseenter'}"
    @shown="currentInputRef.target.focus()"
    data-html="#tippyTemplate"
    @mouseenter="..."
    @focus="currentInputRef = $event">
</td>

// ...
data() {
    return {
        currentInputRef: ''
    }
},

• trigger has to be changed otherwise we will have a stuck popper next to the currentInputRef.target.

now focus will regenerate each time the tip show up.

you can also add it inside the click handler to refocus the input again after interaction.

from vue-tippy.

do you mean when he clicks on the tooltip or when he clicks/hover on the button(v-tippy)?

If you want to interact with the tooltip, try with custom tooltip component

from vue-tippy.

clicks on the tooltip yes, like for example we show some data in the tooltip and when he clicks on the tooltip we copy that data to the clipboard

from vue-tippy.

many thanx.

from vue-tippy.

@KABBOUCHI can u fire an event when the tooltip is clicked ? this way i can listen to it and do something ?

from vue-tippy.

this example didn't work for you?

from vue-tippy.

i cant make a custom component because

1- am using a table cell
2- that table cell is a contenteditable

https://github.com/ctf0/Lingo/blob/1107d6c9ce18d46ba4721e7effccac50d75bd313/src/resources/assets/js/shared/content.vue#L59-L72

so instead of creating an extra component which will complicate things even more, am trying to find a straight/short/easy solution

from vue-tippy.

@ctf0 I'm trying to install ur package, but it's not working, any idea?

from vue-tippy.

this is probably an issue with the dam babel presets, plz check https://ctf0.wordpress.com/2017/09/12/laravel-mix-es6/

also install the latest commit as i haven't tagged it yet, thanx.

from vue-tippy.

and this?

from vue-tippy.

have u installed this with laravel and published the assets ?

if yes, this is mostly related to the js cant fetch the package translation at resources/lang/vendor/Lingo

from vue-tippy.

It's csrf error, I disabled it, now it's working

there an error in your last tagged version

I'll pull the master version and test it after a bit.

from vue-tippy.

sure, take ur time.

https://github.com/ctf0/Lingo/blob/1107d6c9ce18d46ba4721e7effccac50d75bd313/src/resources/views/lingo-bulma.blade.php#L185-L186

the jquery & floathead have to be loaded b4 the app.js

from vue-tippy.

@ctf0 please can you explain what you trying to do?

I got your latest commit.

and why you go with contenteditable instead of input inside td tag? (MVVM approach)

from vue-tippy.

for more than one reason
1- contenteditable make the td auto-resize as u type which is better for ux
2- using input, means i have to add a hidden div == to the input width to make sure the td width dont become too narrow on table init.
3- it wont make much of technical difference except of the prev points.
4- also input doesnt support dirs like v-html or v-text

in here what am trying to do is simply make it possible to copy a blade ready translation key through the manager, this way you can simply use the manager to add new keys and resolve the blade render automatically.

the tip simply shows the html render, and when clicked the text should be copied to the clipboard,
as atm am doing that when u click the cell, which is bad for the ux as it will clear whatever prev set in the clipboard

from vue-tippy.

please check this

from vue-tippy.

exactly what am looking for 🥇 , but not sure what the error is about.

btw if copyToClipboard is causing u issues, i've updated it
https://github.com/ctf0/Lingo/blob/master/src/resources/assets/js/shared/content.vue#L61

from vue-tippy.

check the example page

<button title='test' @shown="shown" @show="show" @hide="hide" @hidden="hidden" v-tippy>

v0.2.6 release notes

from vue-tippy.

hi again, sorry for keep coming back.

atm if an item has focus & we hover it, it will lose its focus, is there away to avoid that ?

from vue-tippy.

not sure what do you mean? can you explain? maybe a example?

from vue-tippy.

look closely in the gif u added above.

1- u selected a cell
2- once u hover over another cell, the focus is gone.

from vue-tippy.

Please check this: https://www.webpackbin.com/bins/-KyqEHvEFIDF74GZUTs1

If you believe it's a bug, please open a issue on Tippy.JS repo

from vue-tippy.

yes, thats it, i believe its due to tippy changing the focus to the data-html element instead

atomiks/tippyjs#122

from vue-tippy.

this doesnt work anymore with v2, the click event never fires nor the class could be styled click-me

from vue-tippy.

Please can you setup a demo, I'll check it after ~1hr

from vue-tippy.