attr( )###

CSS表達(dá)式 attr( ) 用來(lái)獲取選擇到的元素的某一HTML屬性值，并用于其樣式。它也可以用于偽元素，屬性值采用偽元素所依附的元素。

用法####

語(yǔ)法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
attribute-name
是CSS所引用的HTML屬性名稱(chēng)。
<type-or-unit>
表示所引用的屬性值的單位。如果該單位相對(duì)于所引用的屬性值不合法，那么attr()表達(dá)式也不合法。若省略，則默認(rèn)值為string
<fallback>
如果HTML元素缺少所規(guī)定的屬性值或?qū)傩灾挡缓戏?，則使用fallback值。該值必須合法，且不能包含另一個(gè)attr()表達(dá)式。

思路###

1. 將提示信心作為目標(biāo)元素的屬性值，屬性名可以使任一名字，推薦使用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表達(dá)式attr( )獲取提示信息作為偽元素的內(nèi)容

content: attr(data-tooltip);```

3. 設(shè)置偽元素的樣式

.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;
}