I tried to create a tool tip inside a table cell to show the text that is too long when mouse over; I used css style text-overflow: ellipsis; to hide the overflow the long text inside table cell.

Then the problem is my tool tip of the long text was too far right from the original text even thought I already hide the overflow-text and cut off some of them with css style.

Here I've done:

table {
  width: 40%;
  table-layout: fixed;
}

th {
  text-align: left;
}

td:first-child {
  text-align: center;
}

td.td-name p.name {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

[data-tooltip]::after {
  position: absolute;
  /*width: 140px;*/
  /*left: calc(50% - 70px);*/
  /*bottom: 90%;*/
  text-align: center;
  box-sizing: border-box;
  content: attr(data-tooltip);
  background: rgba(0, 0, 0, 0.5);
  padding: 8px;
  border-radius: 10px;
  font-size: 0.9em;
  font-weight: bold;
  z-index: 200;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transform: translate(-20px, 20px);
  transition: all .3s ease-in-out;
}

td.td-name:hover [data-tooltip]::after {
  opacity: 1;
  visibility: visible;
}

<table border="1">
  <thead style="">
    <tr>
      <th style="width: 5%;">Preview</th>
      <th style="width: 15%;">Name</th>
      <th style="width: 5%;">Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 50%;">
        <img src="https://picsum.photos/40" alt="">
      </td>
      <td class="td-name" style="width: 15%;">
        <p data-tooltip="document-attachment-20211130-41110PM.zip">document-attachment-20211130-41110PM.zip</p>
      </td>
      <td style="width: 5%;">
        <p class="size">
          <strong>28.5 KB</strong>
        </p>
      </td>
    </tr>
    <tr>
      <td style="width: 50%;">
        <img src="https://picsum.photos/40" alt="">
      </td>
      <td class="td-name" style="width: 15%;">
        <p class="name" data-tooltip="upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip">upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip</p>
      </td>
      <td style="width: 5%;">
        <p class="size">
          <strong>28.5 KB</strong>
        </p>
      </td>
    </tr>
  </tbody>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I tried to change the left position of data-tooltip and also set relative position to the paragraph of the tool tip itself but it did not help. Thanks very much.

CodePudding user response：

If you add display:flex to your [data-tooltip]::after, then this should fix the issue. You can fine-tune it's location from there.

table {
  width: 40%;
  table-layout: fixed;
}

th {
  text-align: left;
}

td:first-child {
  text-align: center;
}

td.td-name p.name {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

[data-tooltip]::after {
  position: absolute;
  display: flex;
  /*width: 140px;*/
  /*left: calc(50% - 70px);*/
  /*bottom: 90%;*/
  text-align: center;
  box-sizing: border-box;
  content: attr(data-tooltip);
  background: rgba(0, 0, 0, 0.5);
  padding: 8px;
  border-radius: 10px;
  font-size: 0.9em;
  font-weight: bold;
  z-index: 200;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transform: translate(-20px, 20px);
  transition: all .3s ease-in-out;
}

td.td-name:hover [data-tooltip]::after {
  opacity: 1;
  visibility: visible;
}

<table border="1">
  <thead style="">
    <tr>
      <th style="width: 5%;">Preview</th>
      <th style="width: 15%;">Name</th>
      <th style="width: 5%;">Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 50%;">
        <img src="https://picsum.photos/40" alt="">
      </td>
      <td class="td-name" style="width: 15%;">
        <p data-tooltip="document-attachment-20211130-41110PM.zip">document-attachment-20211130-41110PM.zip</p>
      </td>
      <td style="width: 5%;">
        <p class="size">
          <strong>28.5 KB</strong>
        </p>
      </td>
    </tr>
    <tr>
      <td style="width: 50%;">
        <img src="https://picsum.photos/40" alt="">
      </td>
      <td class="td-name" style="width: 15%;">
        <p class="name" data-tooltip="upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip">upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip</p>
      </td>
      <td style="width: 5%;">
        <p class="size">
          <strong>28.5 KB</strong>
        </p>
      </td>
    </tr>
  </tbody>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>