Bootstrap 全屏模式下工具提示不可见
Bootstrap Tooltip is Not Visible when on Fullscreen Mode
我正在构建一个既有普通视图又有全屏视图的页面。工具提示在普通视图中工作正常,但在全屏视图中工具提示不可见。它附加在结束标记之前。我已经尝试添加一个高数字的 z-index,但也不允许它可见。
Bootstrap v4
我现在有一个复制了相同问题的工作示例。
https://jsfiddle.net/ChidoYo/evj2b53t/2/
<div class="container" id="container">
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th>
Short Table
</th>
<th>
</th>
<th class="text-right">
<a href="#" class="btn btn-primary" id="view_fullscreen">View Fullscreen</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Info here:
</td>
<td class="truncate-cell" data-toggle="tooltip" data-placement="top" title="Super long text that will be truncated because, well... it's too long">
Super long text that will be truncated because, well... it's too long
</td>
<td>
Mini Cell
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Javascript:
$(() => {
$('[data-toggle="tooltip"]').tooltip();
$('#view_fullscreen').on('click', () => {
let elem = document.getElementById('container');
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled ) {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
} else {
console.log('Fullscreen is not supported on your browser.');
}
});
});
最好的方法是使用容器选项。确保定位用作全屏视图容器的父标签。
<div id="fullscreen_viewer>
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip content here">Tooltip Mouseover</a>
</div>
Javascript:
$('[data-toggle="tooltip"]').tooltip({
container: '#fullscreen_viewer'
});
下面是另一种使用"container"作为数据属性的方法:
<div id="fullscreen_viewer>
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip content here" data-container="#fullscreen_viewer">Tooltip Mouseover</a>
</div>
Javascript:
$('[data-toggle="tooltip"]').tooltip();
我正在构建一个既有普通视图又有全屏视图的页面。工具提示在普通视图中工作正常,但在全屏视图中工具提示不可见。它附加在结束标记之前。我已经尝试添加一个高数字的 z-index,但也不允许它可见。
Bootstrap v4
我现在有一个复制了相同问题的工作示例。
https://jsfiddle.net/ChidoYo/evj2b53t/2/
<div class="container" id="container">
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th>
Short Table
</th>
<th>
</th>
<th class="text-right">
<a href="#" class="btn btn-primary" id="view_fullscreen">View Fullscreen</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Info here:
</td>
<td class="truncate-cell" data-toggle="tooltip" data-placement="top" title="Super long text that will be truncated because, well... it's too long">
Super long text that will be truncated because, well... it's too long
</td>
<td>
Mini Cell
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Javascript:
$(() => {
$('[data-toggle="tooltip"]').tooltip();
$('#view_fullscreen').on('click', () => {
let elem = document.getElementById('container');
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled ) {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
} else {
console.log('Fullscreen is not supported on your browser.');
}
});
});
最好的方法是使用容器选项。确保定位用作全屏视图容器的父标签。
<div id="fullscreen_viewer>
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip content here">Tooltip Mouseover</a>
</div>
Javascript:
$('[data-toggle="tooltip"]').tooltip({
container: '#fullscreen_viewer'
});
下面是另一种使用"container"作为数据属性的方法:
<div id="fullscreen_viewer>
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip content here" data-container="#fullscreen_viewer">Tooltip Mouseover</a>
</div>
Javascript:
$('[data-toggle="tooltip"]').tooltip();