【问题标题】:Bootstrap Tooltip working but hidden due to z-index?引导工具提示工作但由于 z-index 而隐藏?
【发布时间】:2013-05-27 14:43:04
【问题描述】:

如果您将鼠标悬停在第一支铅笔上,您可以看到工具提示出现,但它被隐藏了。

如何让所有工具提示显示在其他所有内容之上?

相关代码

$('.nav-text').on('click', null, function () {
    alert('heyo');
});
$('.nav-text').tooltip({
    'placement': 'right',
        'title': 'heyo'
});

完整示例

$('.down').click(function() {
  var $move = $('.side-study-box ul');
  $move.css({
    top: '-=20px'
  })
})

$('.up').click(function() {
  var $move = $('.side-study-box ul');
  $move.css({
    top: '+=20px'
  })
})


$('.nav-text').on('click', null, function() {
  alert('heyo');
});
$('.nav-text').tooltip({
  'placement': 'right',
  'title': 'heyo'
});
.side-study-box {
  background-color: white;
  color: black;
  border: 1px solid #3D6AA2;
  text-align: center;
  height: 160px;
  display: table !important;
  margin: 0px !important;
  margin-left: -1px !important;
}

.side-study-box .viewport {
  height: 120px;
  overflow: hidden;
  position: relative;
}

.side-study-box span {
  position: relative;
  width: 100%;
  font-size: 24px;
  display: table-cell;
  vertical-align: middle;
}

.side-study-box textarea {
  position: relative;
  height: 195px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  font-size: 18px;
  font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;
  display: table-cell;
  vertical-align: middle;
  resize: none;
}

.side-study-box i {
  margin: 0px !important;
  padding-right: 1px;
}

.side-study-box .side-box-menu {
  border-right: 1px solid #335987;
  width: 28px;
  text-align: center;
  height: 100%;
}

.side-box-menu-nav {
  display: inline-block;
  cursor: pointer;
  text-decoration: none !important;
  margin: 0px;
  width: 100%;
  background-color: #3D6AA2;
  color: white;
}

.side-box-menu-nav:hover {
  background-color: #335987 !important;
  color: white !important;
}

.side-study-box ul {
  list-style-type: none;
  margin: 0px;
  margin-left: -1px !important;
  padding: 0px;
  padding-right: 2px;
  height: 100%;
  color: #335987;
  position: absolute;
  top: 0;
}

.side-study-box ul li {
  margin: 0px;
}

.side-study-box ul li :hover {
  color: black;
}

.side-study-box ul li a {
  padding-left: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin: 0px;
  color: gray;
}

.side-study-box ul li a .side-box-menu-control {
  padding-top: 3px;
  height: 23px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<div class="span4 side-study-box">
  <div class="side-box-menu"> <a class="side-box-menu-nav up"><i class="icon-chevron-up icon-white"></i></a>

    <div class='viewport'>
      <ul>
        <li><a class="side-box-menu-control"><i class="icon-facetime-video "></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-picture"></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-headphones "></i></a>

        </li>
        <li><a class="side-box-menu-control nav-text"><i class="icon-pencil "></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>

        </li>
        <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>

        </li>
      </ul>
    </div><a class="side-box-menu-nav down"><i class="icon-chevron-down icon-white"></i></a>
  </div>
</div>

【问题讨论】:

    标签: javascript css twitter-bootstrap


    【解决方案1】:

    只需将工具提示位置设置为fixed,如下所示:

    .tooltip {
        position: fixed;
    }
    

    working demo

    【讨论】:

    • 或者您可以使用引导工具提示中存在的container: 'body' 选项。
    • 位置固定不是一个好主意,因为如果用户向下滚动,工具提示不会隐藏。
    • 这更像是一个仅在特定情况下有效的补丁,即使在“工作演示”中,如果页面滚动也无法正常工作。
    • @machineaddict 你的评论应该是选择的答案
    【解决方案2】:

    只需设置data-container

    <a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me</a>
    

    【讨论】:

    • 如果你问我最好的答案。干净的数据属性,没有多余的jquery
    • 是的,这个看起来是最好的。使用 position: fixed 感觉不自然。
    • 这也解决了如果您要将引导工具提示放置在剑道网格内的问题。
    【解决方案3】:

    不要为此使用position: fixed,它看起来有效,但稍后会导致问题。

    在您的情况下,最好的选择是将工具提示附加到正文(如@machineaddict in a comment 所述)以确保它跟随铅笔滚动,固定定位不会。

    $('.nav-text').tooltip({
        placement: 'right',
            title: 'heyo',
        container: 'body' //<--- use the container option
    });
    

    您甚至可以更具体并使用container: '.side-study-box' 来确保工具提示遵循其div,即使整个框独立于正文滚动。只要确保容器有position: relative

    正如Diego's answer 中提到的,您可以使用上面的任何选项作为 data 属性:

    <a class="nav-text" 
       data-toggle="tooltip" 
       data-container=".side-study-box" 
       data-placement="right" 
       title="heyo">
        ...
    </a>
    

    跟随带有溢出滚动的 div 的工具提示

    我在原来的 sn-p 周围添加了一个.container div,使其变小以在溢出时强制滚动。滚动时,您可以看到工具提示跟随铅笔图标。

    $('.nav-text').click(function() {
      console.log('heyo');
    }).tooltip({
      placement: 'right',
      title: 'heyo',
      // follows the box even if it is scrolled within the container div.
      container: '.container',
    });
    .container {
      height: 100px;
      overflow: scroll;
      position: relative;
    }
    .side-study-box {
      background-color: white;
      color: black;
      border: 1px solid #3D6AA2;
      text-align: center;
      height: 160px;
      display: table !important;
      margin: 0px !important;
      margin-left: -1px !important;
    }
    .side-study-box .viewport {
      height: 120px;
      overflow: hidden;
      position: relative;
    }
    .side-study-box span {
      position: relative;
      width: 100%;
      font-size: 24px;
      display: table-cell;
      vertical-align: middle;
    }
    .side-study-box textarea {
      position: relative;
      height: 195px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      margin: auto;
      font-size: 18px;
      font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;
      display: table-cell;
      vertical-align: middle;
      resize: none;
    }
    .side-study-box i {
      margin: 0px !important;
      padding-right: 1px;
    }
    .side-study-box .side-box-menu {
      border-right: 1px solid #335987;
      width: 28px;
      text-align: center;
      height: 100%;
    }
    .side-box-menu-nav {
      display: inline-block;
      cursor: pointer;
      text-decoration: none !important;
      margin: 0px;
      width: 100%;
      background-color: #3D6AA2;
      color: white;
    }
    .side-box-menu-nav:hover {
      background-color: #335987 !important;
      color: white !important;
    }
    .side-study-box ul {
      list-style-type: none;
      margin: 0px;
      margin-left: -1px !important;
      padding: 0px;
      padding-right: 2px;
      height: 100%;
      color: #335987;
      position: absolute;
      top: 0;
    }
    .side-study-box ul li {
      margin: 0px;
    }
    .side-study-box ul li :hover {
      color: black;
    }
    .side-study-box ul li a {
      padding-left: 3px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      margin: 0px;
      color: gray;
    }
    .side-study-box ul li a .side-box-menu-control {
      padding-top: 3px;
      height: 23px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    
    <div class="container">
      <div class="span4 side-study-box">
        <div class="side-box-menu"><a class="side-box-menu-nav up"><i class="icon-chevron-up icon-white"></i></a>
          <div class='viewport'>
            <ul>
              <li><a class="side-box-menu-control"><i class="icon-facetime-video "></i></a>
              </li>
              <li><a class="side-box-menu-control"><i class="icon-picture"></i></a>
              </li>
              <li><a class="side-box-menu-control"><i class="icon-headphones "></i></a> 
              </li>
              <li><a class="side-box-menu-control nav-text"><i class="icon-pencil "></i></a> 
              </li>
              <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> 
              </li>
              <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> 
              </li>
              <li><a class="side-box-menu-control"><i class="icon-pencil "></i></a> 
              </li>
              <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> 
              </li>
              <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> 
              </li>
              <li><a class="side-box-menu-control"><i class="icon-hdd"></i></a> 
              </li>
            </ul>
          </div><a class="side-box-menu-nav down"><i class="icon-chevron-down icon-white"></i></a>
        </div>
      </div>
    </div>

    【讨论】:

      【解决方案4】:

      如果您使用 angular uib-bootstrap,这是最好的解决方案:对 $uibTooltipProvider 使用依赖注入,您可以更改工具提示和弹出框的默认行为方式;上面的属性总是优先的:

      $uibTooltipProvider.options({
        appendToBody: true
      });
      

      【讨论】:

      • UI Bootstrap 库现在为此提供了一个属性 tooltip-append-to-body。默认值为 false,因此我必须将属性设为 true 以使工具提示在溢出到父级之外时可见。
      • 这为我修复了它,我不希望这是默认行为,所以我不需要将另一个属性添加到所有内容中。
      【解决方案5】:

      如果使用 npm (SASS) 构建引导程序 (4.5),您可以在自己的 variables.scss 文件中调整 $zindex-tooltip 变量。

      在引导程序 4.5 中 node_modules/bootstrap/scss/_variables.scss @line 690

      $zindex-tooltip:                    1070 !default;
      

      顺便说一句,您可以在该文件中找到所有变量

      【讨论】:

        【解决方案6】:

        位置:固定!重要;在这里工作,但不要忘记 !important 在某些情况下。

        【讨论】:

          【解决方案7】:

          只需将属性 container="body" 添加到您的 html 标签中

          【讨论】:

            【解决方案8】:

            如果我们将属性 container="body" 添加到您的 html 标记中,那么它不会与页面滚动上的 html 元素一起移动

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2018-11-14
              • 1970-01-01
              • 1970-01-01
              • 2013-06-20
              • 1970-01-01
              • 2021-02-06
              • 2017-04-04
              • 2021-11-03
              相关资源
              最近更新 更多