Question

我使用HTML 5和CSS 3做过具有悬浮效果的工具提示。我在悬停时使用了高度过渡效果。当我使用overflow: hidden;时，工具提示的箭头会消失。可能是什么问题？

我尝试将overflow: visible;悬停在tooltiptext::after上。但是箭头仍然消失了。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  height: 0px;
  visibility: hidden;
  overflow: hidden;
  width: 100px;
  background-color: #ffff;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  transition: height 2s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  height: 55px;
  border: 1px solid black;
}

<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Click to go to our main course page</span>
</div>

工具提示应使用箭头向下滑动，但会溢出：隐藏的属性提示将消失。

Answer 1

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  height: 0px;
   visibility: hidden;
 overflow: hidden;
  width: 100px;
  background-color: #ffff;
    color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
   transition: height 2s;
}
  .arrow{
    position:relative;
  }
.arrow::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent black transparent;
  opacity:0;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
   height: 55px;
     border: 1px solid black;
}
  .tooltip:hover .arrow::after{
    opacity:1;
  }
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>

<div class="tooltip">Hover over me
  <div class="arrow">
  <span class="tooltiptext">Click to go to our main course page</span>
</div>
  </div>

</body>
</html>

我将内容包装在div中，然后应用于该div！

Answer 2

问题是您对可见性属性的使用。只需从定义的两个地方都删除它，示例就可以工作。可见性无法设置动画。如果需要，请尝试不透明度

Answer 3

一个想法是考虑箭头tooltiptext内的箭头。为此，您可以使用其他伪元素创建边框，然后为箭头添加更多padding-top：

body {
 text-align:center;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  height: 0px;
  overflow: hidden;
  visibility:hidden;
  width: 100px;
  color: black;
  text-align: center;
  padding: 15px 10px 5px; /*Increase the padding-top*/
  position: absolute;
  z-index: 1;
  top: 100%;
  left: calc(50% - 60px);
  transition: height 2s,visibility 0s 1.5s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 5px);
  border: 7px solid;
  border-color: transparent transparent black transparent;
  z-index:-1;
}
/* to create the border */
.tooltip .tooltiptext::before {
  content: "";
  position: absolute;
  top: 14px; /* we offset the top by the arrow height*/
  left: 0;
  right:0;
  bottom:0;
  border: 1px solid;
  border-radius: 6px;
  background:#fff;
  z-index:-1;
}
/**/
.tooltip:hover .tooltiptext {
  visibility: visible;
  height: 55px;
  transition: height 2s,visibility 0s 0s;
}

<h2>Bottom Tooltip w/ Top Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Click to go to our main course page</span>
</div>

CSS3中的工具提示，在悬停中具有过渡效果

3 个答案: