CSS实现html指令式Tips文字提示
前言
一个小小tips，在网页中能有意想不到的效果，能很好的引导客户，说明功能等等。
CSS实现html指令式Tips文字提示
html代码
<div class="container">
<div class="top">
<button tooltip="上左">上左</button>
<button tooltip="上边" placement="top">上边</button>
<button tooltip="上右" placement="top-right">上右</button>
</div>
<div class="left">
<button tooltip="左上" placement="left-top">左上</button>
<button tooltip="左边" placement="left" effect="light">左边</button>
<button tooltip="左右" placement="left-bottom">左下</button>
</div>
<div class="right">
<button tooltip="右上" placement="right-top">右上</button>
<button tooltip="右边" placement="right" effect="light">右边</button>
<button tooltip="右下" placement="right-bottom">右下</button>
</div>
<div class="bottom">
<button tooltip="下左" placement="bottom-left">下左</button>
<button tooltip="下边" placement="bottom" effect="light">下边</button>
<button tooltip="下右" placement="bottom-right">下右</button>
</div>
</div>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也可以搞定了，速度上车，试试吧。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年9月28日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录