CODEWITHSUNDEEP
vue.jstailwind-cssflowbiteheroicons
Qiuzman
Qiuzman

Reputation: 1751

Adding a tooltip to a tailwindui component

I am trying to add a tooltip next to some pricing and I am using the default heroicon library. I want to add a tooltip when hovering over this icon and I found flowbite library which has the tooltip functionality already. When I use a button I am able to make this component work and the tooltip shows:

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

However, when I try to use this data tag on the hericon I get nothing. here is my implementation:

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

I am not sure why this works for a button element but I cannot add this trigger to a heroicon component. Is this not doable?

Upvotes: 0

Views: 1646

Answers (1)

Mohsen Dastaran
Mohsen Dastaran

Reputation: 1

in my opinion best approach is to use directives for tooltip & popover.

for example checkout this module. it works pretty well with minimum configuration.

Upvotes: 0

Related Questions