Question

我有以下工具提示：

＆＃13;

#left_div {
  max-height:170px;
  overflow-x:hidden;
  overflow-y:scroll;
}
a.tditems_tooltip {
  position: relative;
  display: inline-block;
  text-decoration:none;
}
a.tditems_tooltip span {
  position: absolute;
  max-width:400px;
  color:#FFFFFF;
  line-height:16px;
  padding:0;
  background:url('/layouts/background.gif');
  border: 1px solid #CFB57C;
  text-align: center;
  display: none;
  text-decoration:none;
  font-size: 12px;
  box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0%;
  margin-left: 150px;
  max-width:800px;
  text-decoration:none;
}
a:hover.tditems_tooltip span {
  display: inline-block;
  bottom: 100%;
  left: 0%;
  margin-left: -3px;
  z-index: 1000;
  text-decoration:none;
}

＆＃13;

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
  <tr>
    <td width="50%">
      <div id="left_div">
        </br>
        </br>
        </br>
        </br>
        <a class="tditems_tooltip">
          <font color="red">TRIGGER</font>
          <span>
            <table border="0" cellspacing="0" cellpadding="1" width="300">
              <tr bgcolor="green">
                  <td>CONTENT OF TOOLTIP</td>
              </tr>
            </table>
          </span>
        </a>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
      </div>
    </td>
    <td width="50%">INSIGNIFICANT CONTENT</td>
  </tr>
</table>

＆＃13;

到目前为止，它几乎完全符合我的意图......除了一件事：工具提示（span）没有显示在页面的所有其他元素的顶部，而是在它背后展示。查看上面的代码段。

更新

当我从 CSS 中移除overflow-x和来自overflow-y的{{1}}时，它会显示预期的方式，但我仍需要指定{{ 1}}到td ...

有什么想法吗？

Answer 1

我建议将其从<table>元素中删除，而是将<div>放在一边<div style="display:table">，如果您希望它位于表格的顶部margin:8px就像你写的那样：

margin-top:8px
margin-bottom:8px
margin-left:8px
margin-right:8px

所以我想你做得更好margin-top:0; 将元素放在顶部的另一个选项是

position:relative;
top:100%

Answer 2

首先，我要感谢所有来到这里并试图帮助我的人！所以我找到了解决方案，我将在下面发布整个片段。

请注意，更改仅在 CSS ：

中

a.tditems_tooltip span > table {
  position: fixed;
  transform: translateY(-100%);
}

#left_div {
  max-height:170px;
  overflow-x:hidden;
  overflow-y:scroll;
}
a.tditems_tooltip {
  position: relative;
  display: inline-block;
  text-decoration:none;
}
a.tditems_tooltip span {
  position: absolute;
  max-width:400px;
  color:#FFFFFF;
  line-height:16px;
  padding:0;
  background:url('/layouts/background.gif');
  border: 1px solid #CFB57C;
  text-align: center;
  display: none;
  text-decoration:none;
  font-size: 12px;
  box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0%;
  margin-left: 150px;
  max-width:800px;
  text-decoration:none;
}
a:hover.tditems_tooltip span {
  display: inline-block;
  bottom: 100%;
  left: 0%;
  margin-left: -3px;
  z-index: 1000;
  text-decoration:none;
}
a.tditems_tooltip span > table {
  position: fixed;
  transform: translateY(-100%);
}

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
  <tr>
    <td width="50%">
      <div id="left_div">
        </br>
        </br>
        </br>
        </br>
        <a class="tditems_tooltip">
          <font color="red">TRIGGER</font>
          <span>
            <table border="0" cellspacing="0" cellpadding="1" width="300">
              <tr bgcolor="green">
                  <td>CONTENT OF TOOLTIP</td>
              </tr>
            </table>
          </span>
        </a>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
      </div>
    </td>
    <td width="50%">INSIGNIFICANT CONTENT</td>
  </tr>
</table>

使特定div或任何元素显示在所有其他元素之上

2 个答案: