【问题标题】:Tooltip is hiding behind the heading of table工具提示隐藏在表格标题后面
【发布时间】:2019-02-22 16:05:21
【问题描述】:

我对工具提示有疑问,工具提示隐藏在表格标题后面,或者它显示在一个框中,但没有显示出来。

请参考提示隐藏在另一个 div 后面的图像 (图片中的营销在提示中):

.tooltipCustom {
  position: relative;
  display: inline-block;
}

.tooltipCustom .tooltipCustomtext {
  visibility: hidden;
  width: 120px;
  background-color: #efeee6;
  color: #868474;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  /* Position the tooltip */
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltipCustom:hover .tooltipCustomtext {
  visibility: visible;
}
<div class='tooltipCustom'>

  <sup style="vertical-align: top">
    Something
   </sup>

  <span class='tooltipCustomtext'> 
    Underlying price: List price <br/>
    Applied Discounts: Marketing
  </span>

</div>

【问题讨论】:

  • 这个问题有什么解决办法?

标签: html css handsontable


【解决方案1】:

修复它

/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;

例如

/* Position the tooltip */
position: absolute;
top: 20px;
left: 50%;
margin-left: 0;

【讨论】:

    【解决方案2】:

    我认为上面的 div 定义了一个 z-index,你需要在你的 tooltip 上放一个更高的 z-index 值才能在前一个 div 的前面:

    .mypreviousDiv {
      z-index: 100;
    }
    
    .tooltipCustom .tooltipCustomtext {
       z-index: 101; // ou higher, for tooltips we can put 9999
    }
    

    【讨论】:

      猜你喜欢
      • 2013-11-13
      • 1970-01-01
      • 2010-11-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-03-02
      • 2021-05-20
      相关资源
      最近更新 更多