html - CSS Tooltip(工具提示显示即使不显示)

Question

我尝试在 div 悬停时制作工具提示(隐藏/取消隐藏范围)。

我不知道问题出在哪里，因为 span 始终可见，如果我添加 display:none，所有内容都将被隐藏。

非常感谢!

CSS:

    .tooltip {
    display:relative;

}
.tooltip span:before {
    content:'';
    display:none;
    border-right: 8px solid #000000;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position:absolute;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    top: 30%;
    left: 83%;
}
.tooltip span:after {
    display:none;
    position:absolute;
    top:0%;
    left:89%;
    padding:5px 8px;
    background: #000000;
    color:#fff;
    z-index:9;
    font-size: 0.75em;
    height:auto;
    opacity: 0.8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space:nowrap;
    word-wrap:normal;
}
.tooltip span:hover:before,
.tooltip span:hover:after {
    display:block;
}

HTML:

<div class="tooltip">
<span>tooltip text</span>
<input type="button" class="button active"  value = "HOVER ME" >
</div>

https://jsfiddle.net/dy6bjvbm/1/

Answer 1

从类似下面的内容开始:

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

.tooltip span {
  display: none;
  position: absolute;
  top: 30px;
  border: 1px solid #ccc;
  padding: 5px;
  background: #eee;
}

.tooltip:hover span {
  display: block;
}

<div class="tooltip">
<span>tooltip text</span>
<input type="button" class="button active"  value = "HOVER ME" >
</div>

查看您的 fiddle 的分支:https://jsfiddle.net/b60fcyu1/