在全屏模式下，引导工具提示不可见答案

【问题标题】：Bootstrap Tooltip is Not Visible when on Fullscreen Mode在全屏模式下，引导工具提示不可见
【发布时间】：2020-04-08 20:41:14
【问题描述】：

我正在构建一个同时具有正常和全屏视图的页面。工具提示在普通视图上工作正常，但在全屏视图时工具提示不可见。它附加在结束标记之前。我已经尝试添加一个大数字的 z-index 并且它也不允许它可见。

引导程序 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.');
    }
  });
});

【问题讨论】：

嗨，您检查了这个链接吗？ github.com/twbs/bootstrap/issues/5555
另一个建议是，一旦您使用 javascirpt 以全屏模式打开浏览器或检测全屏模式然后手动扩展容器的宽度，为什么不将容器宽度扩展到全屏模式通过js或jquery。
我无法在此处附加屏幕截图，但是当我尝试在全屏模式下使用检查元素扩展宽度时，工具提示显示为全屏模式。
@jimil 我确实尝试了 Github 页面上的所有内容，但没有任何结果。
@jimil 你能解释一下你在第三条评论中做了什么吗？

标签： jquery twitter-bootstrap tooltip twitter-bootstrap-tooltip

【解决方案1】：

最好的方法是使用容器选项。确保定位到用作全屏视图容器的父标记。

<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'
});

以下是另一种使用“容器”作为数据属性的方法：

<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();

【讨论】：