<!-- Grid -->
 <div class="grid grid-cols-3 gap-y-4 gap-x-2 max-w-60 mx-auto">
    <div class="col-start-2 text-center">
       <div class="hs-tooltip inline-block">
          <button type="button" class="hs-tooltip-toggle size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
          <i class="ti ti-chevron-up text-lg"></i>
          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
          Tooltip on top
          </span>
          </button>
       </div>
    </div>
    <!-- End Col -->
    <!-- Col -->
    <div class="col-start-1 text-end">
       <div class="hs-tooltip inline-block [--placement:left]">
          <button type="button" class="hs-tooltip-toggle size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
          <i class="ti ti-chevron-left text-lg"></i>
          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
          Tooltip on left
          </span>
          </button>
       </div>
    </div>
    <!-- End Col -->
    <!-- Col -->
    <div class="col-start-3">
       <div class="hs-tooltip inline-block [--placement:right]">
          <button type="button" class="hs-tooltip-toggle size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
          <i class="ti ti-chevron-right text-lg"></i>
          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
          Tooltip on right
          </span>
          </button>
       </div>
    </div>
    <!-- End Col -->
    <!-- Col -->
    <div class="col-start-2 text-center">
       <div class="hs-tooltip inline-block [--placement:bottom]">
          <button type="button" class="hs-tooltip-toggle size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
          <i class="ti ti-chevron-down text-lg"></i>
          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
          Tooltip on bottom
          </span>
          </button>
       </div>
    </div>
    <!-- End Col -->
 </div>
 <!-- End Grid -->
             
                                                     

    
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:click] [--placement:left]">
    <button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-chevron-left text-lg"></i>
    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
    Left popover
    </span>
    </button>
 </div>
 <!-- End Popover -->
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:click]">
    <button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-chevron-up text-lg"></i>
    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
    Top popover
    </span>
    </button>
 </div>
 <!-- End Popover -->
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:click] [--placement:bottom]">
    <button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-chevron-down text-lg"></i>
    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
    Bottom popover
    </span>
    </button>
 </div>
 <!-- End Popover -->
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:click] [--placement:right]">
    <button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-chevron-right text-lg"></i>
    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
    Right popover
    </span>
    </button>
 </div>
 <!-- End Popover -->
             
                                                     

   
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:click]">
   <div class="hs-tooltip-toggle block text-center">
      <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-primary hover:text-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:text-primary dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      Preline review
      <i class="ti ti-chevron-up text-lg"></i>
      </button>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-10 max-w-xs w-full bg-white border border-gray-100 text-start rounded-xl shadow-md dark:bg-gray-800 dark:border-gray-700" role="tooltip">
         <div class="p-4">
            <!-- Header -->
            <div class="mb-3 flex justify-between items-center gap-x-3">
               <div class="flex items-center gap-x-2">
                  <h4 class="font-semibold text-gray-800 dark:text-white">
                     5.0
                  </h4>
                  <!-- Rating -->
                  <div class="flex">
                     <i class="ti ti-star-filled text-warning text-base"></i>
                     <i class="ti ti-star-filled text-warning text-base"></i>
                     <i class="ti ti-star-filled text-warning text-base"></i>
                     <i class="ti ti-star-filled text-warning text-base"></i>
                     <i class="ti ti-star-filled text-warning text-base"></i>
                  </div>
                  <!-- End Rating -->
               </div>
               <a class="inline-flex items-center gap-x-1 text-xs text-primary decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
               See all (4)
               </a>
            </div>
            <!-- End Header -->
            <div class="mb-3">
               <!-- Progress -->
               <div class="flex items-center gap-x-3 whitespace-nowrap">
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">5 star</span>
                  </div>
                  <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
                     <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 78%"></div>
                  </div>
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">78%</span>
                  </div>
               </div>
               <!-- End Progress -->
               <!-- Progress -->
               <div class="flex items-center gap-x-3 whitespace-nowrap">
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">4 star</span>
                  </div>
                  <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                     <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 20%"></div>
                  </div>
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">20%</span>
                  </div>
               </div>
               <!-- End Progress -->
               <!-- Progress -->
               <div class="flex items-center gap-x-3 whitespace-nowrap">
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">3 star</span>
                  </div>
                  <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100">
                     <div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-400 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 6%"></div>
                  </div>
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">6%</span>
                  </div>
               </div>
               <!-- End Progress -->
               <!-- Progress -->
               <div class="flex items-center gap-x-3 whitespace-nowrap">
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">2 star</span>
                  </div>
                  <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                     <div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-400 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 2%"></div>
                  </div>
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">2%</span>
                  </div>
               </div>
               <!-- End Progress -->
               <!-- Progress -->
               <div class="flex items-center gap-x-3 whitespace-nowrap">
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">1 star</span>
                  </div>
                  <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                     <div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-400 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 0%"></div>
                  </div>
                  <div class="w-10 text-end">
                     <span class="text-sm text-gray-800 dark:text-white">0%</span>
                  </div>
               </div>
               <!-- End Progress -->
            </div>
            <a class="inline-flex items-center gap-x-1 text-xs text-gray-600 decoration-2 hover:underline dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-400" href="#">
            How reviews and ratings work
            <i class="ti ti-chevron-down text-base leading-tight font-medium"></i>
            </a>
         </div>
      </div>
   </div>
 </div>
 <!-- End Popover -->
            
                                                    

    
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:focus]">
    <button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-chevron-up text-lg"></i>
    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
    Focus me
    </span>
    </button>
 </div>
 <!-- End Popover -->
             
                                                     

    
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:hover]">
    <button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-chevron-up text-lg"></i>
    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
    Focus me
    </span>
    </button>
 </div>
 <!-- End Popover -->
             
                                                     

    
 <!-- Popover -->
 <div class="hs-tooltip inline-block [--trigger:click]">
    <div class="hs-tooltip-toggle block text-center">
       <button type="button" class="flex justify-center items-center size-10 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
       <i class="ti ti-chevron-up text-lg"></i>
       </button>
       <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-10 max-w-xs bg-white border border-gray-100 text-start rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700" role="tooltip">
          <span class="pt-3 px-4 block text-lg font-bold text-gray-800 dark:text-white">Overview</span>
          <div class="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
             <img src="../assets/images/blog/blog-img2.jpg" alt="" class="w-full">
             <p>This is a popover body with supporting text below as a natural lead-in to additional content.</p>
             <dl class="mt-3">
                <dt class="font-bold pt-3 first:pt-0 dark:text-white">Assigned to:</dt>
                <dd class="text-gray-600 dark:text-gray-400">Mark Welson</dd>
                <dt class="font-bold pt-3 first:pt-0 dark:text-white">Due:</dt>
                <dd class="text-gray-600 dark:text-gray-400">December 21, 2021</dd>
             </dl>
          </div>
       </div>
    </div>
 </div>
 <!-- End Popover -->