search

Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.34k stars 336 forks source link

V-tooltip does not close when the pointer no longer hovers over the element (multiple v-tooltips on one page). #1054

Open timurerrant opened 1 month ago

timurerrant commented 1 month ago

Using "floating-vue": "2.0.0-beta.24" I have a long list of trading cards including different product info - price, description etc. All of them using v-tooltip. Normally if I hover over one of those element and hover off - tooltip behaves as it should, appears on hover, dissappears on un-hover. But when I move the mouse over several v-tooltip containing elements some of them fire and the result is I have several opened tooltips while not hovering over any of them. Any fix/help?

AlexTilnenko commented 1 month ago

have same problem with a sub menu and this props <Dropdown :triggers="['hover']" :popper-triggers="['hover']">

reslear commented 1 month ago

CleanShot 2024-10-28 at 13 36 11

I have the same problem, only with closing.

timurerrant commented 2 weeks ago

My problem has been solved with adding unique 'showGroup' value to the tooltip computed object. Thus every time the new tooltip opens, the previous one closes. As example:

<div v-tooltip="tooltip">example</div>

const tooltip = computed(() => { return { theme : 'card-tooltip', container: '.block__right-top', triggers : ['hover'], content : 'example text content', placement: 'bottom-end', showGroup: price-${props.uuid}, }; });

*link to the floating-vue doc: https://floating-vue.starpad.dev/api/#showgroup