工具提示 :工具提示在表格中居中

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>

我希望数据工具提示位于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>

试试这个。

希望这有帮助。

Answer 2

尝试在元素的样式中添加此 CSS 片段：

left:30%