css content 的 attr 用法 （实现悬浮提示）

content 的attr 实现 鼠标悬浮 显示 悬浮提示，

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

方法/步骤

1

<div>

    <span data-tooltip="hello world">Hover Me!!!</span>

</div>

2

css如下

body{ padding: 100px; } span{ position: relative; display: inline-block; &:hover{ cursor: pointer; } &:hover:before{ content: attr(data-tooltip); background-color: #d9444a; color: #fff; padding:.8em 1em; position: absolute; left: 100%; top: -70%; margin-left: 14px; white-space:pre; } &:hover:after{ content: ''; position: absolute; left: 108%; top: -70%; width: 0; height: 0; border-right:8px solid #d9444a; border-top:8px solid transparent; border-bottom:8px solid transparent; } }

 

3

data-  为自定义属性，如上 自定义 提示 data-tooltip ="hello world",

配合   before ，after 使用 content 的attr 调用 自定义提示，

content: attr(data-tooltip);

4

鼠标悬浮显示效果图如下：

转载于:https://www.cnblogs.com/hjsblogs/p/5371232.html