Multiple instances of VTooltip render in random places

[thomas-wtfoxtrot]

We are using floating vues VTooltip to anchor decorative elements to a headline.

I just realized, that in some constellations (I could not make out a pattern yet) there are 3 instances of the Tooltip rendered in the DOM and also visible in the browser (right on top of the page, so visually distracting).

I'll attach the code, that is used inside our Nuxt 2 application.

Floating-Vue Version: ^1.0.0-beta.19

usage inside a component

        <VTooltip
          theme="img"
          :triggers="[]"
          :shown="true"
        >
          <span v-html="page.title"></span>
          <template #popper>
            <img
              :src="page.headerImg.src"
              :alt="page.headerImg.alt"
              loading="lazy"
            />
          </template>
        </VTooltip>

plugins/floating-vue.js

import Vue from 'vue'
import FloatingVue from 'floating-vue'

Vue.use(FloatingVue, {
  themes: {
    img: {
      $resetCss: true,
      triggers: ['click', 'hover', 'focus'],
      autoHide: false,
      placement: 'bottom-end',
      distance: -200,
      preventOverflow: true,
      skidding: 100,
      instantMove: true,
      handleResize: false,
      flip: false,
      shift: true,
      shiftCrossAxis: false
    }
  }
})

The rendered DOM elements

<div id="popper_ux9ywadk_ai9lm6" aria-hidden="false" data-popper-placement="bottom" class="v-popper__popper v-popper--theme-img v-popper__popper--shown v-popper__popper--show-to" style="position: absolute; transform: translate3d(0px, -200px, 0px);"><div class="v-popper__backdrop"></div><div class="v-popper__wrapper"><div class="v-popper__inner"><div><img src="/img/company/brain.gif" loading="lazy" class="wide-image md:max-w-300"></div><!----></div><div class="v-popper__arrow-container" style="left: 0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div>
<div id="popper_63v2xr6y_ai9lm7" aria-hidden="false" data-popper-placement="bottom" class="v-popper__popper v-popper--theme-img v-popper__popper--shown v-popper__popper--show-to" style="position: absolute; transform: translate3d(0px, -200px, 0px);"><div class="v-popper__backdrop"></div><div class="v-popper__wrapper"><div class="v-popper__inner"><div><img src="/img/company/brain.gif" loading="lazy" class="wide-image md:max-w-300"></div><!----></div><div class="v-popper__arrow-container" style="left: 0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div>
<!-- The following one is the only, that actually should be rendered -->
<div id="popper_gppsg8e0_ai9lmm" aria-hidden="false" data-popper-placement="bottom" class="v-popper__popper v-popper--theme-img v-popper__popper--shown v-popper__popper--show-to" style="position: absolute; transform: translate3d(127px, 168px, 0px);"><div class="v-popper__backdrop"></div><div class="v-popper__wrapper"><div class="v-popper__inner"><div><img src="/img/company/brain.gif" loading="lazy" class="wide-image md:max-w-300"></div><!----></div><div class="v-popper__arrow-container" style="left: 63.2953px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div>
</body>

[Akryum]

Could you create a small runnable reproduction (for example with stackblitz) showing the problematic behavior? Thanks!

[thomas-wtfoxtrot]

I will try to make time for this ASAP 👌