純css怎么實現(xiàn)tooltip
小編給大家分享一下純css怎么實現(xiàn)tooltip，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
成都創(chuàng)新互聯(lián)專注于武宣企業(yè)網站建設,成都響應式網站建設公司,購物商城網站建設。武宣網站建設公司,為武宣等地區(qū)提供建站服務。全流程按需策劃，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務
效果
.png)
原始版
最簡單的莫過于就用原始title屬性，像這樣：
button
缺點是體驗是差了點，并且鼠標移上去，過一會兒才響應。
改進版
于是改進了下面這個版本
html部分
鼠標移動到這
提示文本
css部分
.btn {
width: 100px;
position: relative;
display: inline-block;
background-color: gold;
padding: 5px;
cursor: pointer;
}
.btn .tip {
display: none;
width: 100px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
font-size: 12px;
/* 垂直居中 */
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 118px;
z-index: 1;
}
.btn:hover .tip {
display: block;
}一開始設置tip是隱藏display: none;，當鼠標移上去，將tip樣式設置為display: block;來顯示。
終極版
其實改進版一般用也夠了，但同事老爺們覺得不夠漂亮，逼格不高，沒有動畫。
無意間逛到百度云管理后臺頁面，發(fā)現(xiàn)了一排漂亮的tooltip，這不正是我需要的嗎？竊喜！于是研究一番，拿來即用。
html部分：
鼠標移動到這
css部分：
.btn {
position: relative;
display: block;
margin: 100px auto;
padding: 10px;
font-size: 14px;
background: #fff;
color: green;
border: 1px solid green;
cursor: pointer;
}
[tip]:after {
content: attr(tip);
visibility: hidden;
/* 實現(xiàn)垂直居中 */
position: absolute;
top: 50%;
transform: translate(-5px, -50%);
transition: all .3s;
left: 100%;
opacity: 0;
/* 空白問題 */
white-space: pre;
font-size: 16px;
padding: 5px 10px;
background-color: rgba(18,26,44,0.8);
color: #fff;
box-shadow: 1px 1px 14px rgba(0,0,0,0.1)
}
[tip]:hover {
/* ie兼容 */
overflow: visible
}
.btn:hover:after {
opacity: .8;
transition: all .3s;
transform: translate(5px, -50%);
visibility: visible;
display: block;
}首先，在標簽中加上屬性tip，css樣式中用content: attr(tip);獲取屬性值。
默認設置tip隱藏visibility: hidden;。
用transform: translate(-5px, -50%);實現(xiàn)居中和偏移效果。
動畫時間設置為0.3s:transition: all .3s;。
注意：white-space: pre;是為了考慮到tip中有可能帶有空格，那么也需要將空格顯示出來。
看完了這篇文章，相信你對“純css怎么實現(xiàn)tooltip”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
分享名稱：純css怎么實現(xiàn)tooltip
地址分享：
http://m.jcarcd.cn/article/ijdijg.html
