html responsive table overflow

as seen in the photo,
What I want to do is that the tooltip remains at the bottom because it overflows. Is there a way to fix this?

Half of the “Tooltip on top Description” remains at the bottom. If I do not fix this, an ugly image will appear as follows.

<div class="bg-white rounded-2xl py-8 mb-4 relative block mt-8">
  <div class="overflow-x-auto">
   <table class="divide-y divide-gray-200">
    <thead>
    <tr>
     <th>Name</th>
     <th>Description</th>
     <th>Type</th>
     <th>Date</th>
     <th>City</th>
     <th>Color</th>
     <th>Time</th>
     <th>Status</th>
     <th>Default</th>
    </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
    <tr v-for="i in 10" :key="i">
     <td>Zeus</td>
     <td>Zeus in text Description</td>
     <td>string</td>
     <td>01.10.2023</td>
     <td>America</td>
     <td>Green</td>
     <td>13:15</td>
     <td>Off</td>
     <td>
      <div>
       <button v-tooltip:top v-tooltip.tooltip="'Tooltip on top Description'">Tooltip on top</button>
       <button v-tooltip:top v-tooltip.tooltip="'Tooltip on top Description'">Tooltip on top</button>
       <button v-tooltip:top v-tooltip.tooltip="'Tooltip on top Description'">Tooltip on top</button>
      </div>
     </td>
    </tr>
    </tbody>
   </table>
  </div>