点击右上方红色按钮关注“web秀”，让你真正秀起来！

前言

一个小小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>

由于内容较多，只提供主要部分，详情请点击最下方“了解更多”

气泡样式

[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也可以搞定了，速度上车，试试吧。

公告

喜欢小编的点击关注，了解更多知识！

源码和演示地址，请点击“了解更多”！