html5 tooltip,HTML5 教程之CSS 提示工具(Tooltip)

CSS 提示工具(Tooltip)

本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。

提示工具在鼠标移动到指定元素后触发，先看以下四个实例：

头部显示

右边显示

底部显示

左边显示

基础提示框(Tooltip)

提示框在鼠标移动到指定元素上显示：

HTML 代码：

/*Tooltip 容器*/.tooltip{position:relative;display:inline-block;border-bottom:1pxdottedblack;/*悬停元素上显示点线*/}/*Tooltip 文本*/.tooltip.tooltiptext{visibility:hidden;width:120px;background-color:black;color:#fff;text-align:center;padding:5px0;border-radius:6px;/*定位*/position:absolute;z-index:1;}/*鼠标移动上去后显示提示框*/.tooltip:hover.tooltiptext{visibility:visible;}

鼠标移动到这提示文本