我试图添加一个工具提示旁边的一些定价，我使用默认的英雄库。我想添加一个工具提示时，悬停在这个图标，我发现flowbite库已经有工具提示功能。当我使用一个按钮时，我可以使这个组件工作，工具提示显示：

<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>

然而，当我尝试在hericon上使用这个数据标签时，我什么也得不到。下面是我实现：

<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>

我不知道为什么这适用于按钮元素，但我不能将此触发器添加到英雄组件。这是不可行的吗？