CSS 提示工具(Tooltip)
本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。
提示工具在鼠标移动到指定元素后触发，先看以下四个实例：
|
头部显示
提示框文本
|
右边显示
提示框文本
|
底部显示
提示框文本
|
左边显示
提示框文本
|
基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：
HTML 代码：
实例解析
HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。
提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"。
CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。
tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。
CSS3 border-radius 属性用于为提示框添加圆角。
:hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。
定位提示工具
以下实例中，提示工具显示在指定元素的右侧(left:105%) 。
注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。
如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。
在提示框显示在左边的情况也是这个原理。
显示在右侧：
显示在左侧：
如果你想要提示工具显示在头部和底部。我们需要使用 margin-left 属性，并设置为 -60px。 这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。
显示在头部：
显示在底部：
添加箭头
我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。
以下实例演示了如何为显示在顶部的提示工具添加底部箭头：
顶部提示框/底部箭头：
实例解析
在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。
注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示。
border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。
以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色：
底部提示框/顶部箭头：
以下两个实例是左右两边的箭头实例：
右侧提示框/左侧箭头：
左侧提示框/右侧箭头：
淡入效果
我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:
左侧提示框/右侧箭头：
点击查看所有 CSS 教程 文章: https://codercto.com/courses/l/23.html
Cascading Style Sheets 2.0 Programmer's Reference
Eric A. Meyer / McGraw-Hill Osborne Media / 2001-03-20 / USD 19.99
The most authoritative quick reference available for CSS programmers. This handy resource gives you programming essentials at your fingertips, including all the new tags and features in CSS 2.0. You'l......一起来看看 《Cascading Style Sheets 2.0 Programmer's Reference》 这本书的介绍吧!
