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出现次数少的场景
缺点：大量使用后，会出现重复代码，不易维护和统计升级
网友评论