任性 CSS 之纯 CSS 实现 Tooltip

01 基础效果

HTML

➪ 对页面 DOM 元素本身没有强制要求,只是用来列举一下配置在 DOM 元素上的自定义属性

➪ al-tooltop表示指定的 className

➪ tooltop=“提示出现在xx” 表示需要显示在内容区的文字

➪ position="top"表示内容区显示的位置

CSS

➪ 通过配置在 DOM 元素上的自定义属性,来直接定义内容区样式

➪ 定义在 DOM 元素上的 tooltip="提示出现在xx"可以通过content: attr(tooltip)获取并显示

☆ 注意此处的内容是显示在伪类元素上

➪ CSS 本身没有太多难点,只需要考虑到不同方向对应元素偏移量的控制

☆ 涉及属性包括top right bottom left

☆ transform: translate(x, y)

☆ box-shadow: offsetX offsetY blur spread color

02 添加小三角显示

CSS

➪ 内容区本身使用了 ::before

➪ 那么小三角可以使用 ::after表示

➪ 小三角本身是没有宽高的,真实内容是通过 border进行显示

☆ 显示规则表现为三角形的两侧有边框但是没颜色,底部有边框而且有颜色

☆ 例如 △ 则是存在border-left 和 border-right但是没有颜色,只有border-bottom是存在且有颜色的

➪ 同时,为了确保三角和内容区位置显示正确,需要修正内容区距离按钮的距离

☆ 例如顶部的内容区原本距离按钮 bottom: calc(100% + 5px)

☆ 在添加了小三角之后,小三角距离按钮为bottom: calc(100% + 5px)

☆ 那么内容区距离按钮的距离就应该加上小三角的大小bottom: calc(100% + 10px)

03 添加主题

HTML

➪ 为 DOM 元素添加 theme="dark"用于指定主题样式

CSS

➪ 根据从 DOM 元素上匹配到的自定义属性进行相应配置即可

END
查看更多文章请关注【实训在线】微信公众号
原文首发：www.shixun.online