提供关于用户界面中潜在复杂元素的补充信息是任何网站设计师或开发人员在创建可用和可访问的网站时工作流程的核心部分。提供超出您在页面上所看到的内容的额外细节的最常用机制之一是工具提示(一种在屏幕上显示特定元素提示的设计模式)。虽然许多创新的解决方案存在使用CSS和JavaScript(使用或不使用JavaScript框架，如jQuery)，有时看看新技术对我们现有技术的影响是有用的。
因此，我们将看看如何使用不断发展的CSS标准可以增强一些可爱的跨浏览器工具提示。
性感工具提示的演示
请查看演示页面我们将创建的纯CSS工具提示。
下载性感Tootips源文件
如果您想使用源代码并跟随，下载它在下面。
- css-tooltips(zip, 18.8 kb)
工具提示非常棒!
无论您是需要解释一个缩写或首字母缩写，定义一个单词，或者如果您只是想根据某人悬停的内容提供额外的细节，工具提示都提供了一个简单而有效的解决方案。从出现在元素上方的黄色小文本块，如带有标题属性(或alt(如果你不幸使用ie浏览器)，再到现有的CSS和脚本驱动的解决方案，它们都是很棒的设备，但不幸的是，它们似乎很少受到设计界的关注。
大多数浏览器都有默认的工具提示样式，尽管它不是很漂亮。
在工具提示中利用渐进式增强
随着标准的快速发展和对新技术的支持在浏览器中更加一致地出现，CSS的进步使我们能够将工具提示(替换上图中有些无聊的浏览器默认值)制作到一个全新的细节和美感水平。如果您已经使用了一个jquery驱动的示例—不用担心!JavaScript可以完成很多CSS不能完成的事情(比如延迟工具提示消失的时间)，但是强调我们可以使用CSS来更好地装备我们的设计，这可能会激励你在工具提示之外创建一些自己的漂亮解决方案。
对于工具提示，有许多现有的解决方案可供选择。
我们要做什么
在这个例子中，我们将产生一个纯CSS工具提示机制是美学增强使用CSS3(而不是用它来达到更高的目的)。这意味着它可以在不支持CSS3的浏览器上运行(如ie8及以下)-它只是看起来不那么漂亮。这个概念被称为渐进增强．
工具提示中的颜色、字体、图像和边框等细微效果可能会因终端用户的机器(例如他们的浏览器、安装的字体或显示器对比度)而有所不同。
CSS3临时演员
使用简单而有效的额外功能，如现在公认的这个特性财产和不必属性将使以前看起来普通的“四四方方”的弹出窗口具有新的、更复杂的视觉外观。
引擎盖下
与往常一样，在您选择的源代码编辑器中获取一些基本代码是有意义的，我们将从示例的HTML源代码开始。
不同类型的工具提示
为了给你足够的想法来构建或直接应用到你自己的工作中，我们将制作五个不同的工具提示。为了保持标准化的外观，每一种技术看起来都非常相似，但是您可以自由地进行进一步的实验，并继续改进这些技术。
你可以看到一个工具提示实际上是多么漂亮，至少比默认的要好得多!
跨浏览器的兼容性
这种机制应该适用于所有浏览器，但是，如果您觉得有必要，可以调整它以更好地满足您自己的需求。
基本的标记
在下面的代码块中，我们有一个通用的XHTML 1.0模板< >头必需的元素。在我们将CSS添加到设计中时，现在值得指出的是，为了本教程的目的，CSS将使用<时尚>标签。把结构和风格分开(当然)很重要，我强烈建议在生产使用中将CSS放到单独的样式表中。
为了便于讨论，我决定将样式放在HTML文档中。我还强烈建议，如果您觉得添加jQuery或其他JavaScript增强功能可能有助于这个可爱的花瓶的可用性，请随意这样做!
HTML标记
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">ToolTips Example CSS ToolTips示例!
经典这只是一个例子，你可以使用CSS工具提示做什么，请尽情发挥创意，制作自己的!， Critical
Critical这只是一个使用CSS工具提示可以做的事情的例子，请尽情发挥创意，制作自己的!， 帮助
帮助这只是一个使用CSS工具提示可以做的事情的例子，请尽情发挥创意，制作自己的!， 信息
信息这只是一个使用CSS工具提示可以做的事情的例子，请尽情发挥创意，制作自己的! and 警告
警告这只是一个使用CSS工具提示可以做的事情的例子，请尽情发挥创意，制作自己的! CSS支持的提示。这只是一个例子，你可以做什么，所以请尽情发挥你的创造力，创造你自己的!
在上面的代码中，您会注意到我们有一个标题(<标题>元素(到目前为止没有什么特别的)和一个段落(< p >)的文本，其中包含一些锚(<一>)元素(类值为tooltip)。
为什么在工具提示中使用锚标记?
为什么要锚而不是简写的，dfn或者另一个元素跨度是由于IE6完全不支持:徘徊锚元素之外的伪选择器。因此,对于兼容性原因我建议使用<一>不过，如果你不喜欢IE6，你可以更换它。
每个锚点还包含一个跨度使用工具提示的内容。
使用一些基本的HTML代码，事情的外观或功能并不像最终那样。锚点有效地充当了悬停效果出现的参考点，并且当我们向文档添加样式时，控件的内容就会跨度S将隐藏在屏幕外，直到它们被需要。
每一个跨度在本例中，either的类值为经典(表示一般的工具提示)或自定义(与至关重要的，帮助，信息或警告表示要使用的配色方案)。使用自定义样式的用户还有一些额外的特性，比如新兴市场元素(表示概述文本)和处理它的图像(作为工具提示的图标，您甚至可以使用自己的图像)。
基本的CSS
现在页面上有了HTML，是时候让这些工具提示发挥作用了(而不是像普通的链接文本一样横跨页面)。通过添加下面的代码块到您的< >头元素，您将为每个包含工具提示的链接赋值点强调(区别于通常有标准实线下划线的普通链接)和帮助光标(同样是为了视觉区分)。它还将删除轮廓并设置颜色(因此它看起来不太像链接，而更像一个普通的悬停元素)。
第二段代码只是将工具提示隐藏在屏幕之外，直到需要时才显示。易如反掌!