Tooltip的实现分为两步，第一步：使用CSS实现Tooltip静态样式；第二步：使用JS实现鼠标划过显示，鼠标离开隐藏。

上次发了使用CSS实现Tooltip静态样式，详情戳进： 使用CSS实现Tooltip静态三角样式

下面将第二步JS操作奉上

开始正文

在进行JS操作之前，我先将HTML代码贴上来，方便查看DIV布局

<img id="about" src="public/images/about.png">
<div id="tooltip" class="tooltip-hidden">
    <div class="triangle"></div>
    <div class="square">进入首页</div>
</div>

在这里，我们在CSS中定义了两个DIV标签，一个DIV为 tooltip-hidden ，将其中样式定义为 display：none; 然后将该样式默认赋给Tooltip，即让Tooltip默认隐藏。一个DIV为 tooltip-show ，将其中样式定义为 display：block； 即，当Tooltip所在DIV的class值为 tooltip-show 时，让tooltip显示。代码如下：

.tooltip-hidden{
    		display: none;
    }
.tooltip-show{
    display: block;
    }

在实现Tooltip的显示与隐藏时，重点在于JS对鼠标事件的监听，在这里，我们主要监听两个事件，一个是鼠标划过事 件 onmouseover 和鼠标离开事件 onmouseout。当使用JS监听到 onmouseover 事件时，我们使用JS中的 className 操作为Tooltip的DIV修改其DIV属性，将默认的 tooltip-hidden 属性修改为 tooltip-show ，即可实现tooltip的显示。 同样的，当鼠标监听到 onmouseout 事件时，将tooltip-show 属性修改为 tooltip-hidden 即可。 代码如下：

var tip= document.querySelector("#tooltip");
var about = document.querySelector("#about");
about.onmouseenter = function(){
  console.log("show");
  tip.className = "tooltip-show";
};
about.onmouseout = function(){
  console.log("hidden");
  tip.className = "tooltip-hidden";
}

问题来了

当我们在使用JS监听 onmouseover 以及 onmouseout 时，会发现一个问题，当我们的鼠标在 #about 这张图片上 滑动时，会出现Tooltip一直闪动的问题。

为何这样

出现闪动问题的原因在于JS的冒泡事件，因为 onmouseover 以及 onmouseout 都拥有冒泡属性，当我们的鼠标 划过 #tooltip 或者它的所有子元素，都会触发onmouseover 事件， onmouseout 同样，所以当你在图片上滑 动，但鼠标焦点并没有出图片的范围却出现一直不停的触发 onmouseover 和 onmouseout 事件。

如何解决它

这个问题的解决，在不同浏览器中需要使用不同的方式来解决，下面先简单说说 IE浏览器 的解决方法。 IE浏览器的解决方式比较简单，只需要更换两个监听的事件即可，将 onmouseover 事件更换成 onmouseenter 事 件，将 onmouseout 事件更换为 onmouseleave 事件即可解决。但是在 Chrom e以及 firefox 浏览器中却不能解决， 这里我们先不说如何解决，大家可以先自行尝试。待到某花烂漫时，我便来说它。