前端实现tooltip的常见实现方式

tooltip 即工具提示或提示文本，如下图所示

tooltip图

通常我们编写tooltip会有几种方式:

1. 采用dom节点 + 自定义数据组合，动态创建tooltip内容和自动进行tooltip定位，以 bootstrap - tooltip为例。

bootstrap tooltip

data-toggle 触发动作

data-placement 提示出现的位置

title 提示文案

优点：浏览器兼容性好

缺点：需要js +css组合使用

2. 纯css实现， hint.css

 - 基于html的after和before伪元素类实现tooltip的容器

 - content: attr(aria-label);读取dom节点上的文本

 - 通过dom的hover状态控制tooltip的显示与隐藏

优点:  纯css实现

缺点：不支持伪类的浏览器无法正常使用

3. 单独封装tooltip的基础css

业务代码按需创建tooltip的html,通过hover和业务代码控制组件的显示和位置

优点：无需覆盖所有场景tooltip，按需使用，适合tooltip出现次数少的场景

缺点：大量使用后，会出现重复代码，不易维护和统计升级