为HeroIcon组件添加Flowbite Tooltip失效问题咨询

我尝试在价格信息旁的HeroIcon组件上添加Flowbite库的tooltip功能，使用button元素时tooltip可正常显示，代码如下：

<button data-tooltip-target="tooltip-dark" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Dark tooltip</button>
<div id="tooltip-dark" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

但将data-tooltip-target属性添加到HeroIcon组件上时，tooltip毫无反应，我的实现代码如下：

<NuxtLink :to="{ path: 'product', query: { id: product['Pricing Reference Name']}}" v-for="product in filteredProducts" :key="product['id']" class="group">
    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
      <img :src="'/assets/img/regency/products/' + product['Picture Name']" :alt="'Burning stove of ' + product['Picture Name']" class="h-full w-full object-cover object-center group-hover:opacity-75" />
    </div>
    <h3 class="mt-4 text-sm text-gray-700">{{ product["Model"] }}</h3>
    <p class="mt-1 text-lg font-medium text-gray-900">Starting at ${{ product["MSPR USD"] }}
      <QuestionMarkCircleIcon data-tooltip-target="tooltip-dark" class="inline -mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-500 group-hover:text-gray-500" aria-hidden="true"/>
      <div id="tooltip-dark" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
          Tooltip content
          <div class="tooltip-arrow" data-popper-arrow></div>
      </div>
    </p>
</NuxtLink>

请问这种实现是否可行？

核心原因 #

1. Flowbite触发逻辑限制：Flowbite默认只给button、a这类原生可交互元素绑定hover/focus事件来触发tooltip，HeroIcon渲染后是<svg>标签，属于非交互元素，Flowbite的初始化脚本不会主动监听这类元素的事件。
2. 重复ID冲突：你在v-for循环里复用了同一个id="tooltip-dark"，DOM中重复的ID会导致JavaScript无法正确匹配触发元素和对应的tooltip容器。

解决步骤 #

1. 给HeroIcon包裹可交互元素
   用<button>（或<span tabindex="0">）把HeroIcon包起来，给这个包裹元素添加data-tooltip-target属性，让Flowbite能识别到交互事件：

   <button type="button" 
           :data-tooltip-target="`tooltip-${product.id}`"
           class="p-0 bg-transparent border-none cursor-pointer">
     <QuestionMarkCircleIcon class="inline -mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-500 group-hover:text-gray-500" aria-hidden="true"/>
   </button>
   

2. 给tooltip设置唯一ID
   配合循环中的product.id，给每个tooltip生成唯一ID，避免冲突：

   <div :id="`tooltip-${product.id}`" 
        role="tooltip" 
        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
       Tooltip content
       <div class="tooltip-arrow" data-popper-arrow></div>
   </div>
   

3. 确保Flowbite正确初始化
   如果是Nuxt项目，确认Flowbite的JS已正确引入。如果是动态渲染的元素（比如v-for生成的），需要在组件挂载后手动初始化tooltip：

   import { Tooltip } from 'flowbite'
   
   export default {
     mounted() {
       document.querySelectorAll('[data-tooltip-target]').forEach(el => {
         new Tooltip(el)
       })
     }
   }
   

内容的提问来源于stack exchange，提问作者Qiuzman