CSS 提示框 Tooltip

纯 CSS 实现鼠标悬停提示效果 · 难度：入门 · +15XP

CSS Tooltip 提示框

用 CSS 实现鼠标悬停时显示提示文字的效果，不需要 JavaScript。

基本 Tooltip

.tooltip{position:relative;cursor:pointer}
.tooltip::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}
.tooltip:hover::after{opacity:1}

四个方向

.tooltip-top::after{bottom:100%}  /* 上方 */
.tooltip-bottom::after{top:100%}  /* 下方 */
.tooltip-left::after{right:100%}  /* 左侧 */
.tooltip-right::after{left:100%}  /* 右侧 */