html - 工具提示 : Center a tool tip in table

Question

我有一个包含某些字段的表。我想让数据工具提示以 td 为中心(无论数据有多长)。

table tbody td {
width:100px;
max-width:130px;
white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}    
    
    [data-tooltip] {
              position: relative;
              z-index: 1000000 !important;
              cursor: pointer;
              margin: 0 auto;
            }

            /* Hide the tooltip content by default */
            [data-tooltip]:before,
            [data-tooltip]:after {
              visibility: visible;
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
              filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
              opacity: 1;
              pointer-events: none;
              transition: all 0.5s ease-out;
            }

            /* Position tooltip above the element */
            [data-tooltip]:before {
              position: absolute;
              top: -60%;
              margin-bottom: 5px;
              padding: 5px 10px;
              width: auto;
              -webkit-border-radius: 3px;
              -moz-border-radius: 3px;
              border-radius: 3px;
              background-color: #000;
              background-color: hsla(0, 0%, 20%, 0.9);
              color: #fff;
              content: attr(data-tooltip);
              text-align: center;
              font-size: 11px;
              line-height: 1.2;
            }

            /* Triangle hack to make tooltip look like a speech bubble */
            [data-tooltip]:after {
              position: absolute;
              top: 5%;
              left: 50%;
              transform: translateX(50%);
              width: 0;
              border-top: 5px solid #000;
              border-top: 5px solid hsla(0, 0%, 20%, 0.9);
              border-right: 5px solid transparent;
              border-left: 5px solid transparent;
              content: " ";
              font-size: 0;
              line-height: 0;
            }

            /* Show tooltip content on hover */
            [data-tooltip]:hover:before,
            [data-tooltip]:hover:after {
              visibility: visible;
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
              filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
              opacity: 1;
              transition: all 0.5s ease-in;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Caption 1</th>
<th>Caption 2</th>
<th>Caption 3</th>
<th>Caption 4</th>
<th>Caption 5</th>
<th>Caption 6</th>
</tr>
</thead>
<tbody>
<tr>
<td >Some data Some data Some data Some data </td>

<td data-tooltip="Some data Some data Some data Some data">Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>
</tr>
</tbody>
</table>
</div>

无论占用多少空间，我都希望 data-tooltip 位于 td 的中心。

任何帮助都会很棒。

谢谢。

Answer 1

table tbody td {
width:100px;
max-width:130px;
white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}    
    
    [data-tooltip] {
              position: relative;
              z-index: 1000000 !important;
              cursor: pointer;
              margin: 0 auto;
            }

            /* Hide the tooltip content by default */
            [data-tooltip]:before,
            [data-tooltip]:after {
              visibility: visible;
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
              filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
              opacity: 1;
              pointer-events: none;
              transition: all 0.5s ease-out;
            }

            /* Position tooltip above the element */
            [data-tooltip]:before {
              position: absolute;
              top: -60%;
              padding: 5px 10px;
              width: auto;
              left: 50%;
              transform: translateX(-50%);
              margin: 0 auto;
              -webkit-border-radius: 3px;
              -moz-border-radius: 3px;
              border-radius: 3px;
              background-color: #000;
              background-color: hsla(0, 0%, 20%, 0.9);
              color: #fff;
              content: attr(data-tooltip);
              text-align: center;
              font-size: 11px;
              line-height: 1.2;
            }

            /* Triangle hack to make tooltip look like a speech bubble */
            [data-tooltip]:after {
              position: absolute;
              top: 5%;
              left: 50%;
              transform: translateX(-50%);
              width: 0;
              border-top: 5px solid #000;
              border-top: 5px solid hsla(0, 0%, 20%, 0.9);
              border-right: 5px solid transparent;
              border-left: 5px solid transparent;
              content: " ";
              font-size: 0;
              line-height: 0;
            }

            /* Show tooltip content on hover */
            [data-tooltip]:hover:before,
            [data-tooltip]:hover:after {
              visibility: visible;
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
              filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
              opacity: 1;
              transition: all 0.5s ease-in;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Caption 1</th>
<th>Caption 2</th>
<th>Caption 3</th>
<th>Caption 4</th>
<th>Caption 5</th>
<th>Caption 6</th>
</tr>
</thead>
<tbody>
<tr>
<td >Some data Some data Some data Some data </td>

<td data-tooltip="Some data Some data Some data Some data">Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>

<td >Some data Some data Some data Some data </td>
</tr>
</tbody>
</table>
</div>

试试这个。

希望这对您有所帮助。