1. 首页
  2. 服务器应用
  3. 虚拟化
  4. 纯css实现(无脚本)Html指令式tooltip文字提示效果

纯css实现(无脚本)Html指令式tooltip文字提示效果

上传者: 2020-12-12 01:19:41上传 PDF文件 152.94KB 热度 14次
分析执行流程 鼠标移入节点 检测是该节点是否存在开启实现 tooltip 实现的标识(类名,属性等) 检测主题、位置(类名,属性等) 生成 / 显示气泡 借鉴他人 让我们先来看看 element-ui的tooltip 样式 很明显, 气泡的位置 是通过 javascript脚本 加上去的 不多逼逼,让我们来定几个期望 不用javascript脚本, 纯css 实现 不用添加新元素**(用after、before伪元素)** 不用类名匹配,直接用属性选择器**([attr])** 支持默认样式**(标签没定义主题、位置的时候)** 指令式**(直接在标签定义即可,接下来交给css匹配)
下载地址
用户评论