Question

我的布局左侧有一个侧边栏，右侧有一个内容部分。双方都有自己的滚动条，应该占用页面的剩余高度。

我的问题是，当我设置overflow-y: auto以便我可以使用滚动条时，工具提示（来自Bootstrap 3）会在它离开包含div时被剪切。

这是演示问题的小提琴：http://jsfiddle.net/Ljy1nc3v/3/

在z-index班级甚至content班级设置tooltip都不起作用。

任何帮助都将不胜感激，谢谢。

Answer 1

解决此问题的最简单方法是在工具提示上设置容器属性，如下所示：

$(".tt").tooltip({
    placement: "top",
    title: "<h3>this is a test tooltip</h3>",
    html: true,
    container: 'body'
});

这会将您的工具提示附加到body元素而不是.content div。

Answer 2

查看此信息，只需移除position:absolute

的.content即可

CSS

h1 { margin: 0; }

.header {
    height: 50px;
    border-bottom: 1px solid black;
    text-align: center;
    padding: 0;
}

.sidebar {
    background-color: #00e9ff;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 20%;
    overflow-y: auto;
}

.content {
    background-color: #ffd800;
    margin-left: 20%;
    width: 80%;
    top: 50px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 20px;
}

Answer 3

由于侧边栏和内容div未正确定位，因此工具提示无法正确显示。问题是内容div和侧边栏div都是从y轴的开头呈现的，而侧边栏潜水是在内容div上溢出的。因此，当渲染工具提示时，工具提示的某些部分将在侧边栏div后面呈现。

为了避免这种情况，两个div应该并排呈现。为此，您需要为侧边栏和内容div创建额外的两个div容器。在顶部容器div上使用display:table;属性，在内部容器div上使用display: table-row;属性，在侧栏上和内容div使用display:table-cell;属性。这会将侧边栏和内容div并排放置，现在您可以看到完整的tootip。

代码：

$(".tt").tooltip({
  placement: "top",
  title: "<h3>this is a test tooltip</h3>",
  html: true
});

h1 {
  margin: 0;
}
.header {
  height: 50px;
  border-bottom: 1px solid black;
  text-align: center;
  padding: 0;
}
.top-container {
  display: table;
  width: 100%;
}
.innter-container {
  display: table-row;
  width: 100%;
}
.sidebar {
  background-color: #00e9ff;
  display: table-cell;
  top: 50px;
  bottom: 0;
  left: 0;
  width: 20%;
  overflow-y: auto;
}
.content {
  background-color: #ffd800;
  display: table-cell;
  width: 100%;
  top: 50px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <h1>Header stuff</h1>
</div>

<div class="top-container">
  <div class="innter-container">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <div class="sidebar">
      stuff1
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff2
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff3
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff4
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff5
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff6
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff7
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>
    </div>

    <div class="content">
      <a href="#" class="tt">tooltip stuff</a>
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff2
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>
      <a href="#" class="tt">tooltip stuff2</a>
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff4
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff5
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff6
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff7
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>stuff
      <br/>
    </div>

  </div>
</div>

Answer 4

使用Bootstrap 3数据切换和@theseeker时，我遇到了同样的问题，你的解决方案通过添加容器为我工作：＆＃39; body＆＃39;到：

        $("body").tooltip({ selector: '[data-toggle=tooltip]', container: 'body' });

感谢您的信息！

当溢出设置为自动时，工具提示被剪切

4 个答案: