Global singleton (always display max one tooltip at time)

[microHoffman]

Hello, I'm wondering if there is any way how to always show max one tooltip at a time, globally accross whole app? I haven't found any props for this. I was also unsuccessful in trying this using singletons (both with tippy-singleton component and also useSingleton composable), but maybe I was doing something wrong, but it still showed me multiple tooltips.

I have one BaseTooltip component that I am using on a lot of places in the app. This is the template of it:

<template>
  <tippy
    ref="tooltipRef"
    :append-to="appendTo"
    :arrow="tooltipArrow"
    :theme="tooltipThemes"
    :max-width="TOOLTIP_MAX_WIDTH"
    :placement="placementComputed"
    :popper-options="extraPopperOptionsComputed"
    :interactive="isInteractive"
    :z-index="TOOLTIP_Z_INDEX"
    @show="handleTooltipShow">
    <template #default>
      <slot name="trigger"/>
    </template>
    <template #content>
      <div
        class="base-tooltip__content-wrapper"
        @click.stop>
        <slot>
          {{ tooltipText }}
        </slot>
      </div>
    </template>
  </tippy>
</template>

I was just not able to figure it out? Could you help me please? All I want is to always display max one tooltip, so they do not conflict. Thanks a lot for any clues!:)

[KABBOUCHI]

hi, I don't think its a good idea to use singleton globally, better to hide tooltips manually

ex:

[...document.querySelectorAll("[data-tippy-root]")].forEach((e) => e._tippy?.hide())

or

app.use(VueTippy, {
  defaultProps: {
     onShow: () => {
      [...document.querySelectorAll("[data-tippy-root]")].forEach((e) => e._tippy?.hide())
    }
  },
})

[microHoffman]

@KABBOUCHI thank you so much for the answer and attached example! I have one last question - in case i have lot of tooltips on my page (let's say 100) that are often hiding/showing, is using document.querySelectorAll on every show okay, or do you think I could run into some performance problems? if yes, i will try to think about possible optimizations... thanks!

[KABBOUCHI]

[data-tippy-root] is for opened tooltips, so you only query the opened tooltips

u can also find all tooltip elements (button/trigger) using [data-v-tippy] but I think its less performant

[microHoffman]

okay, thanks a lot @KABBOUCHI for your help, closing this now:)