KABBOUCHI / vue-tippy

VueJS Tooltip powered by Tippy.js
https://vue-tippy.netlify.app
MIT License
726 stars 87 forks source link

Tippy.js plugins #209

Closed kaguya3222 closed 2 years ago

kaguya3222 commented 2 years ago

I want to add tippy.js plugin, that is mentioned in docs, but it seems like it's not added when I try to do something like:

<tippy :plugins="[myPlugin]">
 <template #trigger>trigger</template
 content
<tippy>

or

Vue.use(VueTippy, {
  plugins: [myPlugin]
});

Reproduction: codesandbox

A plugin that I added in reproduction should hide tippy after focusout event inside it, it works when I tried to use this plugin inside tippy() but it's not working when I use vue-tippy tippy component

KABBOUCHI commented 2 years ago

you are checking the tippy v6 docs, the current vue-tippy uses tippy.js v4. you can check the full v4 docs here https://kabbouchi.github.io/tippyjs-v4-docs/ and https://kabbouchi.github.io/vue-tippy/

Tippy v6 supported in the next branch (Vue 3 only), https://vue-tippy.netlify.app/ https://github.com/KABBOUCHI/vue-tippy/tree/next

kaguya3222 commented 2 years ago

I understood, thank you.

I was trying to fix this issue using tippy.js plugin that is mentioned in docs

Currently, I found another solution (kind of hack, but it's working)

<template>
  <tippy ref="tippy">
    <div @focusout="onFocusout">
       some content
    </div>
  </tippy>
</template>

<script>
export default {
  methods: {
     onFocusout() {
        setTimeout(() => {
           const tippy = this.$refs.tippy

          if (!tippy) return

          const isFocusOutside = !tippy.tip.popper.contains(document.activeElement)

          if (isFocusOutside) this.hide()
        })
     }
  }
}
</script>

I think this issue can be closed.