带有延迟鼠标退出的 js 工具提示，没有 jQuery答案

【问题标题】：js Tooltip with delayed mouseout without jQuery带有延迟鼠标退出的 js 工具提示，没有 jQuery
【发布时间】：2016-07-25 08:39:27
【问题描述】：

我想在悬停 div 时显示 工具提示。它也应该在鼠标悬停在tooltip-div 上时显示。

添加一个事件侦听器可以完成这项工作，但如果两个 div 不重叠，则当鼠标位于它们之间并且工具提示消失时，mouseout 调用。

现在我想为鼠标悬停添加延迟，当它获得新的鼠标悬停时取消，但我不知道如何。

document.getElementById("hoverElem").addEventListener("mouseover", function() {
  document.getElementById("displayElem").style.visibility = "visible";
});

document.getElementById("hoverElem").addEventListener("mouseout", function() {
  document.getElementById("displayElem").style.visibility = "hidden";
});

#hoverElem {
  position: fixed;
  height: 100px;
  weidth: 200px;
  top: 0px;
  left: 50%;
  background-color: white;
}
#displayElem {
  position: fixed;
  height: 100px;
  weidth: 20px;
  top: 150px;
  left: 50%;
  background-color: yellow;
  visibility: hidden;
}

<div id="hoverElem">
  A little Div
  <div id="displayElem">
    Tooltip to show
  </div>
</div>

【问题讨论】：

document.getElementById("hoverElem").addEventListener("mouseout", function() { setTimeout(function() { document.getElementById("displayElem").style.visibility = "hidden"; }, 1000); });
请参考此链接。 http://stackoverflow.com/questions/18131894/jquery-tooltip-set-timeout
jsbin.com/milademobu/edit?html,css,output 为什么需要js来做tooltip？对js有什么严格要求吗？

标签： javascript delay mouseout

【解决方案1】：

您可以在mouseleave 中启动一个计时器，然后在mouseenter 中清除它 displayElem点赞

document.getElementById("hoverElem").addEventListener("mouseenter", function() {
  document.getElementById("displayElem").style.visibility = "visible";
});

var hoverTimer;
document.getElementById("hoverElem").addEventListener("mouseleave", function() {
  hoverTimer = setTimeout(function() {
    document.getElementById("displayElem").style.visibility = "hidden";
  }, 500);
});
document.getElementById("displayElem").addEventListener("mouseenter", function() {
  clearTimeout(hoverTimer);
});

document.getElementById("displayElem").addEventListener("mouseleave", function() {
  this.style.visibility = "hidden";
});

#hoverElem {
  position: fixed;
  height: 100px;
  weidth: 200px;
  top: 0px;
  left: 50%;
  background-color: white;
}
#displayElem {
  position: fixed;
  height: 100px;
  weidth: 20px;
  top: 150px;
  left: 50%;
  background-color: yellow;
  visibility: hidden;
}

<div id="hoverElem">
  A little Div
  <div id="displayElem">
    Tooltip to show
  </div>
</div>

【讨论】：

【解决方案2】：

您是否考虑过使用纯 CSS 代替？

div {
  position: fixed;
  height: 100px;
  width: 200px;
  top: 0px;
  left: 50%;
  background-color: black;
}

div:hover span,
span:hover{
  opacity:1;
}

span {
  display:block;
  opacity:0;
  color:orange;
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
  -webkit-transition:opacity 1s ;
  transition:opacity 1s ;
    
  
  position: fixed;
  height: 100px;
  width: 100px;
  top: 150px;
  left: 50%;
  background-color: yellow;
  visibility: visible;
}

<div>
  <span>lorem Ipsum</span>
</div>

【讨论】：