CSS Tooltip（即使不显示也显示工具提示）答案

【问题标题】：CSS Tooltip (tooltip display even if display none)CSS Tooltip（即使不显示也显示工具提示）
【发布时间】：2017-03-13 20:49:51
【问题描述】：

当 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/

【问题讨论】：

悬停时工具提示不显示
简单的div span { display: none; } div:hover span { display: inline; }有什么问题，比如demo？
为什么这不起作用？ div span:hover:before, div span:hover:after { display:block; }

标签： html css

【解决方案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>

看看你的小提琴的这个分支：https://jsfiddle.net/b60fcyu1/

【讨论】：

【解决方案2】：

如果您希望使用 JavaScript/jQuery 解决方案，可以将 mouseover 和 mouseout 与 hide() 和 show() 元素一起使用。

$(document).ready(function() {
  $("input.button").mouseover(function() {
    $('div span').hide();
  });
  $("input.button").mouseout(function() {
    $('div span').show();
  });
});

.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;
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div class="tooltip">
  <span>tooltip text</span>
  <br>
  <input type="button" class="button active" value="HOVER ME">
</div>

【讨论】：

【解决方案3】：

如果你有常数值，你可以这样做。（对于多行更有效）

.tooltip {
  position: relative;
  width: 300px;
  height: 30px;
}

.tooltip span {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  line-height: 30px;
  bottom: 40px;
  border-radius: 5px;
  padding: 0 5px;
}

.tooltip span:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(0, 0, 0, 0);
  border-top-color: rgba(0, 0, 0, 0.6);
  border-width: 6px;
  margin-left: -6px;
}

.tooltip:hover span {
  opacity: 1;
  pointer-events: inherit;
}

<p style="height:100px;">
  <!-- for seperate -->
</p>

<div class="tooltip">
  <span>tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text</span>
  <input type="button" class="button active" value="HOVER ME" style="width:100%;height:30px">
</div>

【讨论】：