html css 提示效果,纯css实现（无脚本）Html指令式tooltip文字提示效果

分析执行流程 鼠标移入节点 检测是该节点是否存在开启实现 tooltip 实现的标识(类名，属性等) 检测主题、位置(类名，属性等) 生成 / 显示气泡 借鉴他人

让我们先来看看 element-ui的tooltip 样式

很明显， 气泡的位置 是通过 javascript脚本 加上去的

不多逼逼，让我们来定几个期望 不用javascript脚本， 纯css 实现 不用添加新元素**(用after、before伪元素)** 不用类名匹配，直接用属性选择器**([attr])** 支持默认样式**(标签没定义主题、位置的时候)** 指令式**(直接在标签定义即可，接下来交给css匹配)** 实现气泡的 主题、位置 用 sass 预处理器开发(看不懂的同学可以转换成 css ) html定义指令规范

指令式声明

上左

tooltip — 气泡显示的 内容 ；

effect — 气泡的 主题 (dark / light)，默认dark；

placement — 气泡相对于父元素的 位置 (top / top-left/ top-right / right / right-top/ right-bottom...)，默认top；

先写几个按钮

样式借鉴element-ui

上左

上边

上右

左上

左边

左下

右上

右边

右下

下左

下边

下右