tooltip 即工具提示或提示文本,如下图所示
通常我们编写tooltip会有几种方式:
1. 采用dom节点 + 自定义数据组合,动态创建tooltip内容和自动进行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出现次数少的场景
缺点:大量使用后,会出现重复代码,不易维护和统计升级