使用CSS content的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示（tooltip）效果
我要評(píng)論為什么實(shí)現(xiàn)這種效果呢，其實(shí)這效果也是根據(jù)title的提示說(shuō)明衍生出來(lái)的，只是因?yàn)樵谋容^丑陋，像這種衍生出的插件后很多種，如jquery-ui的tooltip，Bootstrap的tooltips等等，有很多種插件庫(kù)。
有時(shí)候我們不需要那么大的插件庫(kù)，其實(shí)就一兩個(gè)地方需要做一些提示（tooltip），所以可以使用CSS的content屬性與 :before 及 :after 偽元素配合使用來(lái)實(shí)現(xiàn)插入生成內(nèi)容。
查看效果如下
html代碼如下
<a class="dui-tips" data-tooltip="我是一個(gè)3cbest.com提示">w3cbest.com</a>
“data-“為自定義屬性，如上自定義提示data-tooltip=”我是一個(gè)3cbest.com提示”，配合before、after使用content的attr調(diào)用自定義提示，content: attr(data-tooltip);
content: attr很好理解，只要會(huì)jq的.attr()就知道什么意思了，本例的content: attr就是獲取data-tooltip里面的值
CSS代碼
.dui-tips {
position: relative;
display: inline-block;
cursor: pointer;
}
.dui-tips[data-tooltip]:after,
.dui-tips[data-tooltip]:before {
visibility: hidden;
position: absolute;
top: 50%;
left: 100%;
transition: all .3s;
}
.dui-tips[data-tooltip]:after {
content: attr(data-tooltip);
transform: translate(-5px, -50%);
white-space: pre;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 0);
}
.dui-tips[data-tooltip]:before {
content: '';
height: 0;
width: 0;
transform: translate(-10px, -50%);
border-width: 5px 5px 5px 0;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0) transparent transparent;
}
.dui-tips:hover:after,.dui-tips:hover:before {
transition: all .3s;
visibility: visible;
}
.dui-tips:hover:after {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0.8);
transform: translate(5px, -50%);
}
.dui-tips:hover:before {
border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
transform: translate(0px, -50%);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS實(shí)現(xiàn)鼠標(biāo)懸浮無(wú)限向下級(jí)展示的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了CSS實(shí)現(xiàn)鼠標(biāo)懸浮無(wú)限向下級(jí)展示的實(shí)例代碼，需要的朋友參考下吧2017-09-07CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法
昨天寫(xiě)樣式遇到個(gè)問(wèn)題，如何讓鼠標(biāo)懸浮DIV后，顯示DIV外的按鈕，可以點(diǎn)擊到按鈕。下面通過(guò)本文給大家分享CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法，感興趣的朋友一起看看2017-08-26
CSS3制作了一個(gè)動(dòng)畫(huà)導(dǎo)航效果(鼠標(biāo)懸浮會(huì)放大)
使用了CSS3的animation、transform、transition制作了一個(gè)動(dòng)畫(huà)導(dǎo)航效果，其中利用了Ligature Icon UI制作了導(dǎo)航中的ICON圖標(biāo),需要了解的朋友可以參考下2012-12-27
這篇文章主要介紹了css實(shí)現(xiàn)縷空遮罩層的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-06-03
這篇文章主要介紹了css3遮罩層鏤空效果的多種實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-05-11
CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果
這篇文章主要介紹了CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-09
CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-11-20
CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn)
這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-17
