我在表格单元格中存在此问题,该位置始终位于单元格的底部。我希望它显示在悬停的顶部,但是它不会这样做。我相信它是表响应类。
var handler = function (e) {
$(this).addClass('tooltip-init').tooltip({
html: true,
placement: "top",
delay: { "show": 100, "hide": 0 },
trigger: 'hover'
}).tooltip('show');
};
$('.tooltip1').on('mouseenter', handler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="tooltip1" title="test" style="border: solid 1px #FF0000;">ToolTip Enabled
</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr><tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tbody>
</table>
</div>
答案 0 :(得分:0)
嗯,即时修复此问题有点复杂。但是引导工具提示将始终在父容器框中寻找可用空间,如果在所需位置没有可用空间,它将自动将其放置在相反的一侧。因此,解决此问题的一种可能的解决方法是将padding
添加到所需的边(在您的情况下,这是表格的顶部),并在表格框中为工具提示。
因此它将是这样的:
var handler = function(e) {
$(this).addClass('tooltip-init').tooltip({
html: true,
placement: "top",
delay: {
"show": 100,
"hide": 0
},
trigger: 'hover'
}).tooltip('show');
};
$('.tooltip1').on('mouseenter', handler);
.table-responsive {
padding-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="tooltip1" title="test" style="border: solid 1px #FF0000;">ToolTip Enabled
</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tbody>
</table>
</div>
正如您提到的那样,最初建议的解决方法并不理想,我想出了另一种更方便,更合理的解决方案。正如我之前提到的,问题出在父包装器行为的底层,在特定情况下,您使用table-responsive
类作为整个表的包装器,引导程序会手动将其overflow
设置为auto
因此,无论溢出了哪个元素,包装盒都将被忽略,在这种情况下,它将显示在相反的一侧,因此,要解决此问题,只应覆盖此元素的overflow
。
所以会是这样的:
var handler = function(e) {
$(this).addClass('tooltip-init').tooltip({
html: true,
placement: "top",
delay: {
"show": 100,
"hide": 0
},
trigger: 'hover'
}).tooltip('show');
};
$('.tooltip1').on('mouseenter', handler);
div.table-responsive {
overflow: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<br>
<br>
<br>
<br>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="tooltip1" title="test" style="border: solid 1px #FF0000;">ToolTip Enabled
</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tbody>
</table>
</div>
答案 1 :(得分:0)
将css样式padding-top: 50px;
添加到.table-sensitive。