點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！
前言
一個小小tips，在網頁中能有意想不到的效果，能很好的引導客戶，說明功能等等。
CSS實現html指令式Tips文字提示
html代碼
css代碼
氣泡樣式
[tooltip]::after {
display: none;
content: attr(tooltip);
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px 15px;
max-width: 200px;
border-radius: 4px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
z-index: 100;
}
氣泡位置（示例上）
.tooltip-placement-top,
[tooltip]:not([placement])::after,
[tooltip][placement=""]::after,
[tooltip][placement="top"]::after {
bottom: calc(100% + 10px);
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-top-right,
[tooltip][placement="top-right"]::after {
bottom: calc(100% + 10px);
left: 100%;
transform: translate(-100%, 0);
}
.tooltip-placement-top-left,
[tooltip][placement="top-left"]::after {
bottom: calc(100% + 10px);
left: 0;
transform: translate(0, 0);
}
氣泡動畫（示例上）
[tooltip][placement^="top"]::after,
[tooltip][placement^="top"]::before {
animation: anime-top 300ms ease-out forwards;
}
@keyframes anime-top {
from {
opacity: .5;
bottom: 150%;
}
}
三角形樣式
[tooltip]::before {
display: none;
content: '';
position: absolute;
border: 5px solid transparent;
border-bottom-width: 0;
z-index: 100;
}
三角形位置（示例上）
.triangle-placement-top,
[tooltip]:not([placement])::before,
[tooltip][placement=""]::before,
[tooltip][placement="top"]::before {
bottom: calc(100% + 5px);
left: 50%;
transform: translate(-50%, 0);
}
.triangle-placement-top-left,
[tooltip][placement="top-left"]::before {
bottom: calc(100% + 5px);
left: 10px;
}
.triangle-placement-top-right,
[tooltip][placement="top-right"]::before {
bottom: calc(100% + 5px);
right: 10px;
}
總結
css的功能越來越強大，是不是曾經以為這樣的效果只能用js實現了，現在用css也可以搞定了，速度上車，試試吧。
公告
分享到:
閱讀更多 web秀 的文章
