How to Prevent Tooltip Disappear on Nested Hover for Menu?

[thienbd203]

I’m trying to build a nested menu using tooltips. While moving the mouse from a parent tooltip (level 2) to a child tooltip (level 3), the parent tooltip closes before I can interact with the child.

<script lang="ts" setup>
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

const props = defineProps({
  menuItem: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <li class="list-none space-y-2">
    <template v-for="(item, index) in props.menuItem" :key="index">
      <div class="flex flex-col space-y-2">
        <TooltipProvider :delay-duration="100" v-if="item.children">
          <Tooltip>
            <TooltipTrigger as-child>
              <Button variant="outline">
                {{ item.title }}
              </Button>
            </TooltipTrigger>
            <TooltipContent align="start" class="nested-menu-tooltip" side="right" :side-offset="0">
              <TestInner v-if="item.children" :menu-item="item.children" />
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
        <div v-else>
          <Button variant="outline">
            {{ item.title }}
          </Button>
        </div>
      </div>
    </template>
  </li>
</template>

Props Data

const menu = [
  {
    title: 'Add to library',
    to: '/',
    children: [
      {
        title: 'Add to library 2',
        to: '/',
      },
      {
        title: 'Add to library 3',
        to: '/',
      },
    ],
  },
  {
    title: 'Another menu',
    to: '/',
    children: [
      {
        title: 'Nested menu item 1',
        to: '/',
        children: [
          {
            title: 'Nested menu item 1.1',
            to: '/',
          },
          {
            title: 'Nested menu item 1.2',
            to: '/',
          },
        ],
      },
      {
        title: 'Nested menu item 2',
        to: '/',
      },
    ],
  },
];