fix: support v-if on tooltip element

Author: Copilot

.changeset/open-poets-visit.md

@@ -0,0 +1,5 @@
+---
+"@vingy/vueltip": patch
+---
+
+When using v-if to control visibility of the tooltip element, hovering the tooltip, now keeps it visible.

demo/src/Tooltip.vue

@@ -15,8 +15,9 @@ const { tooltipStyles, arrowStyles, show, content } =
 </script>
 
 <template>
+  <!-- v-show also works -->
   <div
-    v-show="show"
+    v-if="show"
     ref="tooltipElement"
     class="relative isolate"
     :style="[tooltipStyles]"

packages/vueltip/src/composables.browser.test.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest'
+import {
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+} from 'vue'
+import { useVueltip } from './composables'
+import {
+  debouncedHoveredElement,
+  hoveredElement,
+} from './state'
+
+const TooltipVIf = defineComponent({
+  setup() {
+    const tooltipEl = ref<HTMLElement | null>(null)
+    const { show, tooltipStyles, content } = useVueltip({
+      tooltipElement: tooltipEl,
+    })
+    return () =>
+      show.value
+        ? h(
+            'div',
+            { ref: tooltipEl, style: tooltipStyles.value },
+            content.value?.text ?? undefined,
+          )
+        : null
+  },
+})
+
+const TooltipVShow = defineComponent({
+  setup() {
+    const tooltipEl = ref<HTMLElement | null>(null)
+    const { show, tooltipStyles, content } = useVueltip({
+      tooltipElement: tooltipEl,
+    })
+    return () =>
+      h(
+        'div',
+        {
+          ref: tooltipEl,
+          style: {
+            ...tooltipStyles.value,
+            display: show.value ? '' : 'none',
+          },
+        },
+        content.value?.text ?? undefined,
+      )
+  },
+})
+
+const mountTooltip = (
+  component: ReturnType<typeof defineComponent>,
+) => {
+  const app = createApp(component)
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  app.mount(container)
+  return {
+    container,
+    unmount: () => {
+      app.unmount()
+      container.remove()
+    },
+  }
+}
+
+describe('useVueltip listener lifecycle', () => {
+  it('v-show: attaches mouseenter/mouseleave listeners when show becomes true', async () => {
+    debouncedHoveredElement.value = undefined
+    hoveredElement.value = undefined
+
+    const { container, unmount } =
+      mountTooltip(TooltipVShow)
+    await nextTick()
+
+    const refEl = document.createElement('div')
+    debouncedHoveredElement.value = refEl
+    await nextTick()
+
+    const el = container.firstElementChild as HTMLElement
+    el.dispatchEvent(new MouseEvent('mouseenter'))
+    expect(hoveredElement.value).toBe(refEl)
+
+    el.dispatchEvent(new MouseEvent('mouseleave'))
+    expect(hoveredElement.value).toBeUndefined()
+
+    debouncedHoveredElement.value = undefined
+    unmount()
+  })
+
+  it('v-if: attaches listeners when element enters the DOM', async () => {
+    debouncedHoveredElement.value = undefined
+    hoveredElement.value = undefined
+
+    const { container, unmount } = mountTooltip(TooltipVIf)
+    await nextTick()
+    expect(container.firstElementChild).toBeNull()
+
+    const refEl = document.createElement('div')
+    debouncedHoveredElement.value = refEl
+    await nextTick()
+
+    const el = container.firstElementChild as HTMLElement
+    expect(el).not.toBeNull()
+
+    el.dispatchEvent(new MouseEvent('mouseenter'))
+    expect(hoveredElement.value).toBe(refEl)
+
+    el.dispatchEvent(new MouseEvent('mouseleave'))
+    expect(hoveredElement.value).toBeUndefined()
+
+    debouncedHoveredElement.value = undefined
+    unmount()
+  })
+
+  it('v-if: removes listeners when element leaves the DOM (show=false)', async () => {
+    debouncedHoveredElement.value = undefined
+    hoveredElement.value = undefined
+
+    const { container, unmount } = mountTooltip(TooltipVIf)
+
+    const refEl = document.createElement('div')
+    debouncedHoveredElement.value = refEl
+    await nextTick()
+
+    const el = container.firstElementChild as HTMLElement
+    const removedTypes: string[] = []
+    el.removeEventListener = (type: string) => {
+      removedTypes.push(type)
+    }
+
+    debouncedHoveredElement.value = undefined
+    await nextTick()
+
+    expect(removedTypes).toContain('mouseenter')
+    expect(removedTypes).toContain('mouseleave')
+
+    unmount()
+  })
+
+  it('v-show: removes listeners on component unmount', async () => {
+    debouncedHoveredElement.value = undefined
+    hoveredElement.value = undefined
+
+    const { container, unmount } =
+      mountTooltip(TooltipVShow)
+    await nextTick()
+
+    const refEl = document.createElement('div')
+    debouncedHoveredElement.value = refEl
+    await nextTick()
+
+    const el = container.firstElementChild as HTMLElement
+    const removedTypes: string[] = []
+    el.removeEventListener = (type: string) => {
+      removedTypes.push(type)
+    }
+
+    unmount()
+
+    expect(removedTypes).toContain('mouseenter')
+    expect(removedTypes).toContain('mouseleave')
+
+    debouncedHoveredElement.value = undefined
+  })
+})

packages/vueltip/src/composables.ts

@@ -7,12 +7,7 @@ import {
   useFloating,
 } from '@floating-ui/vue'
 import type { Maybe } from '@vingy/shared/types'
-import {
-  computed,
-  onMounted,
-  type StyleValue,
-  watch,
-} from 'vue'
+import { computed, type StyleValue, watch } from 'vue'
 import { getOption } from './options'
 import {
   debouncedHoveredElement,
@@ -38,19 +33,35 @@ export const useVueltip = ({
   floatingOptions,
 }: UseTooltipOptions) => {
   let initialParent: Maybe<HTMLElement>
-  onMounted(() => {
-    initialParent = tooltipElement.value?.parentElement
-    tooltipElement.value?.addEventListener(
-      'mouseenter',
-      () =>
+
+  const show = computed(
+    () => !!debouncedHoveredElement.value,
+  )
+
+  watch(
+    show,
+    (value, _, onCleanup) => {
+      if (!value) return
+      const el = tooltipElement.value
+      if (!el) return
+      initialParent = el.parentElement
+
+      const onEnter = () =>
         (hoveredElement.value =
-          debouncedHoveredElement.value),
-    )
-    tooltipElement.value?.addEventListener(
-      'mouseleave',
-      () => (hoveredElement.value = undefined),
-    )
-  })
+          debouncedHoveredElement.value)
+      const onLeave = () =>
+        (hoveredElement.value = undefined)
+
+      el.addEventListener('mouseenter', onEnter)
+      el.addEventListener('mouseleave', onLeave)
+
+      onCleanup(() => {
+        el.removeEventListener('mouseenter', onEnter)
+        el.removeEventListener('mouseleave', onLeave)
+      })
+    },
+    { flush: 'post' },
+  )
   const middleware = [
     offset(_offset),
     flip(),
@@ -91,10 +102,6 @@ export const useVueltip = ({
     }
   })
 
-  const show = computed(
-    () => !!debouncedHoveredElement.value,
-  )
-
   if (getOption('handleDialogModals')) {
     watch(show, (value) => {
       if (