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

[timurerrant]

trafficstars

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]

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

[reslear]

I have the same problem, only with closing.

[timurerrant]

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

[maprox]

I have the same problem, only with closing.

Afaics, the root problem is somewhere here https://github.com/Akryum/floating-vue/blob/e3ffe0017169ad51ae94597ec60354257b3b7eda/packages/floating-vue/src/components/Popper.ts#L466-L478

In case when :popper-triggers contains 'hover' and doesn't have parentPopper (not sure what is that) it simply won't close.

You can try to reproduce it by moving you mouse from target to popper and stop somewhere in between (so that you've left the target and not yet in popper)

https://github.com/user-attachments/assets/dc34dafe-3285-4dd8-b8d2-37a7f424aa8e

      <Tooltip :popper-triggers="['hover']" :distance="100" placement="bottom">
        <button>Hover me</button>

        <template #popper>
          <div>Additional information</div>
        </template>
      </Tooltip>