0

I created a table with tooltips embedded in it. Near the bottom of the table, the length of the tooltip hover would reach outside of the bottom of the table and so this creates a permanent vertical scrollbar in the table to fit the tooltip. However I want the tooltip to simply overlap outside of the bottom of the table and get rid of the scrollbar. What am I missing?

I added the code snippet:

/* table */
table.my-table.payment-delivery {
  border-collapse: collapse;
  width: 100%;
  font-family: Comfortaa, sans-serif;
  text-align: center;
}

table.my-table th {
  background-color: #303030;
  color: white;
  font-size: 105%;
}

table.my-table th, table.my-table td {
  text-align: center;
  border-right: 1px dotted white;
  vertical-align: middle;
  padding: 8px;
}

table.my-table th:first-child,
table.my-table td:first-child {
  text-align: center;
  min-width: 150px;
}

table.my-table th:last-child,
table.my-table td:last-child {
  border-right: none;
}

table.my-table tr {
  border-bottom: 1px solid white;
}

table.my-table tr:nth-child(even) td {
  background-color: #606060;
  color: white;
}

table.my-table tr:nth-child(odd) td {
  background-color: #707070;
  color: white;
}

table.my-table tr:last-child {
  border-bottom: none;
}

table.my-table tbody tr:nth-child(n+1):nth-child(-n+4) td:first-child {
  font-size: 85%;
}

/*tooltip*/
span.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted white;
}

span.tooltip span {
  opacity: 0.8;
  top: 30px;
  left: calc(50% - 23px);
  margin-left: -50%;
  position: absolute;
  color: #FFFFFF;
  background: #000000;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  box-shadow: 0px 0px 0px #800000;
  width: auto;
  height: auto;
  padding: 0 10px;
  white-space: nowrap;
}

span.tooltip span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; 
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

span:hover.tooltip span {
  visibility: visible;
  opacity: 1;
  top: 30px;
  left: calc(50% - 23px);
  margin-left: -50%;
  z-index: 999;
}
 <table class="my-table payment-delivery" style="margin: 0 auto;">
    <thead>
      <tr>
        <th></th>
        <th>Standard<br>fee</th>
        <th><p style="color: #33cc00;">Free delivery<br>from...</p></th>
        <th>Carrier</th>
        <th>Duration</th>
        <th>Door to Door</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Kenya</td>
        <td><span class="tooltip">$ 4<span>EUR: 4<br>GBP: 4<br>KES: 500<br>UGX: 15.000<br>RWF: 4.500<br>TZS: 9.500<br>GHS: 50</span></span></td>
        <td><span class="tooltip">$ 40<span>EUR: 36<br>GBP: 32<br>KES: 5.000<br>UGX: 150.000<br>RWF: 45.000<br>TZS: 95.000<br>GHS: 450</span></td>
        <td>Speedball courier</td>
        <td>1-3 days</td>
        <td><big>✅</big> yep</td>
      </tr>
      <tr>
        <td>South Africa, Nigeria,<br>Ghana, Uganda,<br>Tanzania, Rwanda,<br>Burundi, Senegal,<br>Botswana, Zambia,<br>South Sudan</td>
        <td><span class="tooltip">$ 25<span>EUR: 22<br>GBP: 20<br>KES: 3.500<br>UGX: 95.000<br>RWF: 28.000<br>TZS: 60.000<br>GHS: 300</span></td>
        <td><span class="tooltip">$ 100<span>EUR: 90<br>GBP: 80<br>KES: 13.500<br>UGX: 375.000<br>RWF: 110.000<br>TZS: 230.000<br>GHS: 1.200</span></td>
        <td>DHL</td>
        <td>3-5 days</td>
        <td><big>✅</big> yep</td>
      </tr>
      <tr>
        <td>EU countries,<br>UK, USA, Canada,<br>India, Saudi Arabia,<br>UAE, Israel,</td>
        <td><span class="tooltip">$ 30<span>EUR: 28<br>GBP: 25<br>KES: 4.000<br>UGX: 110.000<br>RWF: 35.000<br>TZS: 70.000<br>GHS: 350</span></td>
        <td><span class="tooltip">$ 125<span>EUR: 110<br>GBP: 100<br>KES: 16.500<br>UGX: 475.000<br>RWF: 140.000<br>TZS: 300.000<br>GHS: 1.500</span></td>
        <td>DHL</td>
        <td>3-5 days</td>
        <td><big>✅</big> yep</td>
      </tr>
      <tr>
        <td>Japan, South Korea,<br>Singapore, Malaysia,<br>Bangladesh</td>
        <td><span class="tooltip">$ 35<span>EUR: 30<br>GBP: 27<br>KES: 4.700<br>UGX: 130.000<br>RWF: 40.000<br>TZS: 80.000<br>GHS: 400</span></td>
        <td><span class="tooltip">$ 150<span>EUR: 130<br>GBP: 120<br>KES: 20.000<br>UGX: 550.000<br>RWF: 165.000<br>TZS: 350.000<br>GHS: 1.700</span></td>
        <td>DHL</td>
        <td>3-5 days</td>
        <td><big>✅</big> yep</td>
      </tr>
    </tbody>
  </table>

Improve this question
6
  • It is not the table getting the scrollbar, but the document itself. You tooltip elements are still "there" even in their non-showing state - you used only opacity & visibility to hide them, so they still take the same space they will later on, when you show them. You would need to work with display: none or set their height to 0 (and hide overflow), if you do not want them to change dimensions in their hidden state already. But if your table was at the very bottom of the document, then it would still need this "shift" the moment you are trying to display them. Commented Apr 24, 2023 at 9:53
  • The table is in the middle of the page so that isn't a problem. So I tried what you mentioned. When I added display: none; to the span.tooltip span section the scrollbar disappears but so does the tooltip. It just doesn't show anymore on hover. When I added height: 0; and overflow: hidden; it didn't change anything in result. Commented Apr 24, 2023 at 10:25
  • "It just doesn't show anymore on hover." - of course you also need to set display: block on hover again. Commented Apr 24, 2023 at 10:33
  • This is great, it made the scrollbar disappear in non-hover state! The scrollbar now only appears in hover state when the tooltip reaches over the bottom of the table. Is it possible to avoid this as well and have the tooltip just flow over the edge without expanding the table? Commented Apr 24, 2023 at 10:56
  • It doesn't expand your table, but it needs to expand the document, if there is not enough space left below the table, to display the full tooltip. If what wasn't happening, then your tooltip would simply get cut off at this point. You'll have to make your tooltip not extend down, but in the upwards direction then. If you don't want to apply that generally, for like say the second half of your table rows - then you will have to involve some JavaScript, that does some "measuring" first, and then dynamically decides whether a tooltip should open down or up. Commented Apr 24, 2023 at 11:19
Related questions
330
How to prevent scrollbar from repositioning web page?
0
Bootstrap 4 table with table-fixed class won't set background-color
529
HTML table with 100% width, with vertical scroll inside tbody
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.