attr( )###
CSS表达式 attr( ) 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。
用法####
语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
attribute-name
是CSS所引用的HTML属性名称。
<type-or-unit>
表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string
<fallback>
如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。
思路###
- 将提示信心作为目标元素的属性值，属性名可以使任一名字，推荐使用
data-tooltip
<span class="tooltip" data-tooltip="The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything.">span</span>
<a class="tooltip" href="#" data-tooltip="Links is an open source text and graphic web browser with a pull-down menu system.">link</a> ```
2. CSS表达式attr( )获取提示信息作为伪元素的内容
content: attr(data-tooltip);```
- 设置伪元素的样式
.tooltip:hover::before {
content: "";
border: solid transparent;
border-bottom-color: #4862A3;
border-width: 10px;
position: absolute;
top: 20px;
}
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
min-width: 15em;
font-weight: 100;
line-height: 1.3em;
margin: 0;
background: #4862A3;
color: #fff;
padding: 15px;
border-radius: 5px;
right: 10%;
top: 40px;
z-index: 1;
font-size: .7em;
}
