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

[ctf0]

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]

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

[ctf0]

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

[KABBOUCHI]

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

[ctf0]

many thanx.

[ctf0]

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

[KABBOUCHI]

this example didn't work for you?

[ctf0]

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

[KABBOUCHI]

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

[ctf0]

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.

[KABBOUCHI]

and this?

[ctf0]

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

[KABBOUCHI]

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.

[ctf0]

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

[KABBOUCHI]

@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)

[ctf0]

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

[KABBOUCHI]

please check this

[ctf0]

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

[KABBOUCHI]

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

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

[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]

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 ?

[KABBOUCHI]

check the example page

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

v0.2.6 release notes

[ctf0]

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 ?

[KABBOUCHI]

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

[ctf0]

look closely in the gif u added above.

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

[KABBOUCHI]

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

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

[ctf0]

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

atomiks/tippyjs#122

[ctf0]

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.

[ctf0]

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

[KABBOUCHI]

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

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