Question

我正在从Weebly创建我的投资组合网站。我想在悬停时使用工具提示添加类似标签的元素，因此我开始使用自定义HTML和CSS进行探索，并遵循w3schools的教程。我意识到工具提示不在最前面；
我已阅读说明并了解CSS属性和属性。我试图添加一个大于所有其他现有元素的z-index。但是，即使是非常大的z-index也是如此。我已经附加了在Weebly编辑器中编写的结果，自定义HTML和CSS；

.ToolTip {
  position: relative;
  display: inline-block;
  z-index: 2;/* //Largest index I could find in the theme is 6.*/
  /*//For Testing*/
  height: 100px;
  top: 30px;
}

.ToolTip .ToolTipText {
  background: #F7ADA2; //Color for ToolTip - F7ADA2, 5A3857, D6345D, DD9B70, E7D7C2, A68A80, 725752
  visibility: hidden;
  display: inline-block;
  text-align: center;
  border-radius: 0.6em;
  box-shadow: 0px 0px 0.2em 0.1em rgba(0.35,0.22,0.34, 0.1);
  
  margin-left: -0.3em;
  padding: 0.4em 1.2em;
  /*//set position of ToolTip box*/
  position: absolute;
  bottom: 6.8em;
  opacity: 0;
  transition: opacity 0.3s;
}

.ToolTip .ToolTipText::after {
  content: "";
  position: absolute;
  bottom: -0.6em;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #F7ADA2 transparent transparent transparent;
}

.ToolTip:hover .ToolTipText {
  visibility: visible;
  z-index: 1000000000; /*//Try to plug a really high index*/
  opacity: 1;
}

<div class="LinkTagWrapper">
  <div class="ToolTip">
    <span class="ToolTipText">
      testing abc
    </span>
    <a class="LinkTag" href="">
      <div class="LinkTagGroup">
        <div class="LinkTagImage"> 
          xx
        </div>
        <span class="LinkTagDes">
          Berd
        </span>
      </div>
    </a>
  </div>
</div>

我希望代码可以将工具提示div推到所有内容的顶部。侧面和上方的空间似乎仍然在上面；

Published outcome of Tooltips when hover

Answer 1

看起来像是一个溢出问题，但是很难看到站点/页面的所有代码。基本上，自定义html元素在元素的html中具有样式为溢出的..，这将导致该溢出。

尝试在BERD / BERDDD“按钮”或LinkTagWrapper本身上方添加填充；

.LinkTagWrapper {
    padding: 30px 0 0 0;
}

导致工具提示隐藏在其他空格下可能是什么问题？

1 个答案: