工具提示：将工具提示置于表格中心

时间：2017-06-30 07:26:24

标签： html css

我有一张包含某些字段的表格。我想让数据工具提示成为td的中心（无论数据有多长）。

＆＃13;
＆＃13; 
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;
            }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

任何帮助都会很棒。

谢谢。

2 个答案:

答案 0 :(得分：0)

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

left:30%

答案 1 :(得分：0)

＆＃13;
＆＃13; 
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;
            }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

试试这个。

希望这有帮助。

相关问题
最新问题