你真的会写toolTip吗

你的tooltip一般都是怎么写的呢？例如实现类似下图的效果（wps word文档 的 tooltip）：当鼠标移出icon的时候显示一段工具提示文本，当鼠标移出工具提示文本消失。

一些小伙伴可能“不加思索”的就有想法了：父元素里包含两个兄弟元素，其一就是这个icon，其二就是它的工具提示文本；在父元素上设置鼠标移入、移出来实现交互就OK了。实例如下：

ok，这样当然可以实现效果啦。不过嘛~~~在这里，icon的父元素用的是div，宽和高都没有限制。只是对icon的大小做了限定（如下）：

然而实际情况中，icon的父级元素可能就比它大一点点，甚至是和它大小一致（如下）：

这个时候，tooltip的展示效果如何呢？看看下图吧：

吼吼吼~~~效果是不是超出预期啦？

有的小伙伴可能会说，那也难不住我呀，给tootip设置一下样式不就ok了。嗯，也对！如下：

ok，这样设置在这里确实OK了。

但是，tootip工具提示文本在实际情况中可是有长有短的哦。以中文来说，有的可能就是两个汉字，有的可能八九个汉字，工具栏一般都有很多项工具按钮，难道要一个个去设置吗？况且现在都是组件化开发了。如果以最大宽度去设置，文字长度最长的当然可以容纳下，那文字长度短的容器内岂不是要大片留白？这种效果恐怕自己都得尴尬死！！

还有两点需要提醒一下：

1、工具提示文本的边框也还没有设置；

2、如果该工具按钮上还有onclick事件，onmouseover还会和它冲突哦，但很不幸的是，实际情况中就是有onclick事件。

唉，是不是头都要大了？一个小小的tooltip竟然搞这么大了

其实呀，html有一个全局属性title可以帮你轻松又简单的实现哦

https://www.runoob.com/tags/att-global-title.html

回头再看之前的那些 *** 作，是不是如此设置更简单省力！

首先参考了这篇文章： 5行JS自定义title提示效果（Tooltip）

参考后实现如下：

Html: 用了angularjs的ng-repeat

css:

然后发现iPhone手机点击后仍然不显示提示文字。

参考了这篇文章解决了问题。 苹果手机无法识别hover的解决方案

在html页面后面加上

在实现过程中又找到了几个现成的插件亲测可用：

Microtip.css 纯css3 Tooltip工具提示样式

Hint.css 纯CSS实现的Tooltip提示 - Hint.css

纯css3 Tooltip工具提示样式

tootik

之前还尝试使用过jquery-ui的Tooltip，iPhone也是不好用但是发现这篇文章非常好。

解决 Jquery UI Tooltip 用在Select 的BUG

这是我用jquery-ui时的写法，因为给所有document都响应tooltip事件，导致只要有title的都会显示。

文章里这种改法可以过滤我们想要响应hover的到底是什么元素。

这部分内容jQuery-UI 控件上是没有说的，非常有用。

这篇文章没细看

ontouchstart实现手机触屏中的hover效果

Chart.js允许通过HTML5的canvas进行图表绘制。这里我们希望绘制一个环形图，点击图上各segment时可以显示自定义的圆形tooltip。Chart.js支持通过几个变量添加tooltip，它提供一个tooltipTemplate但是却不支持自定义tooltip的HTML！于是决定自行绘制tooltip手动添加上去。

---