我在这里尝试了一些代码https://codepen.io/arindamx01/pen/gJOqxK 我需要完整的工具提示可见。我试过没有.table-responsive 类。如果没有表格响应类，它运行良好我的意思是我可以通过按时悬停来查看工具提示。但是当我添加.table-responsive 时，我看不到整个工具提示。那张桌子上出现了一个长卷轴，我该怎么办……请帮忙。我的预期 ans 喜欢
【问题讨论】：
标签： javascript html css twitter-bootstrap-3 responsive-design
把下面的css改成relative改成absolute
.tooltipItem_dist {
position: absolute;
}
【讨论】：
您可以简单地使用引导程序.table-responsive{-sm|-md|-lg|-xl} breakpoint specific：
【讨论】：
请查看以下解决方案，相应地更新您的 css。
.table-responsive { overflow-x: visible }
@media screen and (max-width: 767px) {
.table-responsive { overflow-y: visible }
}
【讨论】：
“问题”（注意引号）是通过在包装器<div> 中使用.table-responsive 会改变它的默认overflow 行为。
因此，当您的工具提示出现时，它会在您的 <div class="table-responsive"> 包装器中获得 trap。
要解决这个问题，只需将overflow: visible; 设置为它。
关于可能的影响，您将失去在移动设备上水平滚动的能力，在这种情况下，您可以编写媒体查询来恢复移动设备上的功能，因为无论如何您都不需要在移动设备上使用tooltip。
【讨论】：
试试这些解决方案
方法一：
.tooltipItem_dist{
position: absolute;
}
它将与 HTML 元素（页面本身）直接相关。
使用绝对定位时要记住的重要一点是确保它没有被过度使用，否则可能会导致维护噩梦。
方法二：
.table-responsive{
overflow: visible;
}
我会选择方法2。
【讨论】：
你有没有尝试添加元视口？
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
【讨论】：
.tooltipItem_dist:hover .tooltipItem {
visibility: visible;
opacity: 1;
}
.tooltipItem_dist{
position: relative;
}
.tooltipItem_dist .tooltipItem {
top: 100%;
}
.tooltipItem {
color: #fff;
position: absolute;
top: calc(100% - 30px);
width: 160px;
background: #333;
z-index: 1;
text-align: center;
padding: 10px;
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
left: 50%;
transform: translate(-50% , 0);
-moz-transform: translate(-50% , 0);
-webkit-transform: translate(-50% , 0);
opacity: 0;
visibility: hidden;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}<div class="table table-striped table-bordered dt-responsive nowrap">
<table class="table table-hover noMargin arUinqueteable">
<thead>
<tr>
<th>POS</th>
<th>NAME</th>
<th>AV PACE</th>
<th>TIME</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody class="results_section">
<tr class="resultTotalTr "> <!--log_user_active-->
<td class="blue">1</td>
<td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
<td class="blue">00:07:23</td>
<td class="black tooltipItem_dist">04:04:04
<div class="tooltipItem">
<ul>
<li><span>SWIM</span> 04:23:04</li>
<li><span>T1</span> sdfsdf</li>
<li><span>BIKE</span></li>
<li><span>T2</span></li>
<li><span>RUN</span></li>
<li><span>TOTAL</span></li>
</ul>
</div>
</td>
<td><!--<span>PB</span>--></td>
<td><!--<i class="fa fa-check-circle-o"></i>--></td>
</tr>
<tr class="resultTotalTr "> <!--log_user_active-->
<td class="blue">2</td>
<td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
<td class="blue">00:09:43</td>
<td class="black tooltipItem_dist">05:21:01
<div class="tooltipItem">
<ul>
<li><span>SWIM</span> 04:23:04</li>
<li><span>T1</span> sdfsdf</li>
<li><span>BIKE</span></li>
<li><span>T2</span></li>
<li><span>RUN</span></li>
<li><span>TOTAL</span></li>
</ul>
</div>
</td>
<td><!--<span>PB</span>--></td>
<td><!--<i class="fa fa-check-circle-o"></i>--></td>
</tr>
<tr class="resultTotalTr "> <!--log_user_active-->
<td class="blue">3</td>
<td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
<td class="blue">00:18:56</td>
<td class="black tooltipItem_dist">10:25:01
<div class="tooltipItem">
<ul>
<li><span>SWIM</span> 04:23:04</li>
<li><span>T1</span> sdfsdf</li>
<li><span>BIKE</span></li>
<li><span>T2</span></li>
<li><span>RUN</span></li>
<li><span>TOTAL</span></li>
</ul>
</div>
</td>
<td><!--<span>PB</span>--></td>
<td><!--<i class="fa fa-check-circle-o"></i>--></td>
</tr>
</tbody>
</table>
</div>【讨论】：