search

KABBOUCHI / vue-tippy

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

mouseenter + click doesn't work #233

Closed rexdarelandig closed 2 years ago

rexdarelandig commented 2 years ago

My use case is the user can hover the icon and will show the tooltip. User can also click the icon and shows the tooltip and remains open unless the user clicks outside the tooltip or click the close button in tooltip. I updated the trigger to trigger: 'mouseenter click' but the click doesn't work.

I can confirm that this works on tippyjs but not on this vue wrapper. Any suggestion for this?

KABBOUCHI commented 2 years ago

hi @rexdarelandig , plz can u share a reproduction link/repo? https://vite.new/vue

rexdarelandig commented 2 years ago

hi @rexdarelandig , plz can u share a reproduction link/repo? https://vite.new/vue

I can't find any vue 2 here.. I am following this doc https://kabbouchi.github.io/vue-tippy/4.0/all-options.html I imported it in my app.js 

import VueTippy, { TippyComponent } from "vue-tippy";
Vue.use(VueTippy);
Vue.component("tippy", TippyComponent);

and then use it like

<HelpIcon
                content="Sample help tooltip"
                v-tippy="{ arrow: true, placement: 'bottom', trigger: 'mouseenter click', interactive: true }"
              />

It does show the tooltip but when clicking the Helpicon, it acts as if I did a hover.

  1. click the help icon (the tooltip will not act like I clicked it"

I thought mouseenter click will not work together.

I tested it on tippyjs but it is working fine.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.