Html 悬停工具提示显示在其他图层下方。如何将其移动到顶部？

Question

我正在显示 table 并想在某些 table 标签上方显示一些注释。尝试最大化悬停元素的 z-index，但没有用。工具提示仍然显示在第 th 个元素下方。

有没有办法在所有其他层之上显示工具提示？

我将 table 的较小版本放入代码片段中。有问题的部分已经在第二个单元格的开头，编号为 2021。我把工具提示做得很长，以表明它实际上正在显示，但由于某种原因它在背景后面。

提前感谢您的帮助。

table,
td,
th {
  font-family: trial;
  border: 0px solid #fff;
  padding: 6px;
  text-align: center;
  color: #fff font-size: 11px;
}

th {
  left: 0;
  font-family: trial-bold;
  position: sticky;
  z-index: 20;
  background-color: #e72076;
  font-size: 11px;
  color: #fff
}

table {
  margin-left: 10px;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 11px;
  margin-bottom: 8px;
  color: #fff
}

tr:nth-child(odd) {
  background-color: #20323f;
}

tr:nth-child(even) {
  background-color: #20323f;
}

tr {
  border-bottom: 1px solid #e72076;
}

td:nth-last-child(5n+1) {
  border-right: 1px solid #e72076;
}

th:nth-child(6n+1) {
  border-right: 0px solid #fff
}

body {
  margin: 0;
  font-family: trial;
}

th.tip {
  text-decoration: none z-index: 2;
}

th.tip:hover {
  position: relative
}

th.tip span {
  display: none
}

th.tip:hover span {
  width: 170px;
  border: #fff 1px;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 2147483647;
  background: #20323f;
  left: 0px;
  margin: 10px;
  position: absolute;
  top: 2.2em;
  text-decoration: none;
}

td.right_border {
  border-right: 1px solid #e72076;
}

td.tip {
  text-decoration: none
}

td.tip:hover {
  position: relative
}

td.tip span {
  display: none
}

td.tip:hover span {
  width: 170px;
  border: #fff 1px;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 100;
  background: #20323f;
  left: 0px;
  margin: 10px;
  position: absolute;
  top: 2.2em;
  text-decoration: none;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th class="tip" colspan="5" halign="left">2021<span>........ ............................................. .................................2021-01-21-2021-02-05</span></th>
      <th class="tip" colspan="5" halign="left">2020<span>........ ............................................. .................................2020-04-01-2020-06-30</span></th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2019</th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2018</th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2017</th>
    </tr>
    <tr>
      <th></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>total</th>
      <td>38</td>
      <td>7</td>
      <td>3</td>
      <td class="tip">2 (2 / 0 / 0)<span>hired total (juniors / mids / seniors)</span></td>
      <td class="tip">526 (18 - 43 - 67)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>10</td>
      <td>1</td>
      <td>1</td>
      <td class="tip">1 (1 / 0 / 0)<span>hired total</span></td>
      <td class="tip">1000 (10 - 100 - 100)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>9</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 / 0 / 0)<span>hired total</span></td>
      <td class="tip">1111 (0 - 0 - 100)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>1</td>
      <td class="tip">1 (1 / 0 / 0)<span>hired</span></td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 / 0 / 0)<span>hired</span></td>
      <td class="tip">0 (0 - 0 - 0)<span>hired rate in ‱ (...)</span></td>
    </tr>
    <tr>
      <th>LinkedIn</th>
      <td>23</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>hired rate in ‱ (...)</span></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (echo -> interview rate in % - inteview -> success rate in % / success -> hired rate in %)</span></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Answer 1

工具提示显示在悬停的单元格下方，因为您已为其定义 top: 2.2em。但是您也可以将 top 定义为负数，以在悬停的单元格上方显示工具提示。

由于您为每个 th 定义了 position: sticky，因此 thead 的工具提示对于像单元格“2021”这样的大工具提示来说不够大。您可以删除 ths 的位置定义以显示全尺寸工具提示。要使 thead 具有粘性，只需为第一个 th.

定义它就足够了

th:first-child { 
  position: sticky; 
}

顺便说一句，你的 CSS 有误：

text-decoration: none z-index: 2;

这是两个独立的陈述，所以以下是正确的：

text-decoration: none;
z-index: 2;

工作示例:

table,
td,
th {
  font-family: trial;
  border: 0px solid #fff;
  padding: 6px;
  text-align: center;
  color: #fff font-size: 11px;
}

th {
  left: 0;
  font-family: trial-bold;
  z-index: 20;
  background-color: #e72076;
  font-size: 11px;
  color: #fff
}

th:first-child { 
  position: sticky; 
} 

table {
  margin-left: 10px;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 11px;
  margin-bottom: 8px;
  color: #fff
}

tr:nth-child(odd) {
  background-color: #20323f;
}

tr:nth-child(even) {
  background-color: #20323f;
}

tr {
  border-bottom: 1px solid #e72076;
}

td:nth-last-child(5n+1) {
  border-right: 1px solid #e72076;
}

th:nth-child(6n+1) {
  border-right: 0px solid #fff
}

body {
  margin: 0;
  font-family: trial;
}

th.tip {
  text-decoration: none;
  z-index: 2;
}

th.tip:hover {
  position: relative
}

th.tip span {
  display: none
}

th.tip:hover span {
  width: 170px;
  border: #fff 1px;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 2147483647;
  background: #20323f;
  left: 0px;
  margin: 10px;
  position: absolute;
  top: 2.2em;
  text-decoration: none;
}

td.right_border {
  border-right: 1px solid #e72076;
}

td.tip {
  text-decoration: none
}

td.tip:hover {
  position: relative
}

td.tip span {
  display: none
}

td.tip:hover span {
  width: 170px;
  border: #fff 1px;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 100;
  background: #20323f;
  left: 0px;
  margin: 10px;
  position: absolute;
  top: -2.2em;
  text-decoration: none;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th class="tip" colspan="5" halign="left">2021<span>........ ............................................. .................................2021-01-21-2021-02-05</span></th>
      <th class="tip" colspan="5" halign="left">2020<span>........ ............................................. .................................2020-04-01-2020-06-30</span></th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2019</th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2018</th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2017</th>
    </tr>
    <tr>
      <th></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>total</th>
      <td>38</td>
      <td>7</td>
      <td>3</td>
      <td class="tip">2 (2 / 0 / 0)<span>hired total (juniors / mids / seniors)</span></td>
      <td class="tip">526 (18 - 43 - 67)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>10</td>
      <td>1</td>
      <td>1</td>
      <td class="tip">1 (1 / 0 / 0)<span>hired total</span></td>
      <td class="tip">1000 (10 - 100 - 100)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>9</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 / 0 / 0)<span>hired total</span></td>
      <td class="tip">1111 (0 - 0 - 100)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>1</td>
      <td class="tip">1 (1 / 0 / 0)<span>hired</span></td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 / 0 / 0)<span>hired</span></td>
      <td class="tip">0 (0 - 0 - 0)<span>hired rate in ‱ (...)</span></td>
    </tr>
    <tr>
      <th>LinkedIn</th>
      <td>23</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>hired rate in ‱ (...)</span></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (echo -> interview rate in % - inteview -> success rate in % / success -> hired rate in %)</span></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Html 悬停工具提示显示在其他图层下方。如何将其移动到顶部？

Html hover tooltip is displaying below other layers. How to move it to the top?

html

css

tooltip

hover