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

css content 的attr 实现 鼠标悬浮 显示 悬浮提示，
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

attr( )

CSS表达式 attr( ) 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

用法

语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )

attribute-name
是CSS所引用的HTML属性名称。
<type-or-unit>
表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string
<fallback>
如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。

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

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