新闻资讯

提示框是网站显示附加信息的一种有效方式，他不需占用额外的屏幕空间。通常，提示框是在鼠标悬停的位置出现，而且在网站上可能有数以百计的用于输出提示框的JQuery插件。

然而，使用jQuery插件的一个普遍的坏处是他会带来一组无用的选项，并且会使代码量增大导致网站性能降低。

所以，今天我们就来了解一下创建提示框的更好的方式。随着CSS3一系列新特性的出现，用CSS创建样式丰富的提示框成为可能。我们现在就开始。

使用Hint.css

在这篇文章中，我们不用通常的方法建立提示框，而是使用Hint.css。Hint.css是类和样式规则的合集，能够让我们更快速地建立简洁的提示框。为了使用它，只要把样式表加到你的HTML文档中，或者将所有的样式规则拷贝到你自己的样式表中。

1. <link rel="stylesheet" href="hint.css">  

现在，在你的文档中，引入这个样式表，你就可以插入使用inline元素的提示框，就像使用span或者anchor元素一样。用data-hint属性增加提示框内容，示例如下：

从技术角度上讲，这是你所需要的所有东西。如果你在浏览器中预览你的网页，并滚动鼠标，你将会看到弹出的提示框。

这个提示框使用pseudo元素进行展示，使用CSS3的transition进行动态移动。

增加提示信息

除非你是用默认风格的anchor元素，否则就不会出现向上面截图所展示的提示信息，这样，用户也就不会察觉你使用了提示框。

这样，为了更好的用户体验，我们改动一下样式表，让他能够出现提示，示例如下：

01.span[data-hint] { 
02.    border-bottom: 1px dotted #aaa; 
03.} 
04.span[data-hint]:hover { 
05.    cursor: pointer; 
06.}

这个样式给带有data-hint属性的span元素增加了虚线下边框。你也可调整样式表以获得你需要的效果。

提示框小结

使用现有的类，我们可以在上下左右四个方向上展示提示框。

 

Left

<span class="hint--left" data-hint="The arena of commercial dealings">marketplaces</span>

Right

<span class="hint--right" data-hint="The arena of commercial dealings">marketplaces</span>

Top

<span class="hint--top" data-hint="The arena of commercial dealings">marketplaces</span>

Bottom

<span class="hint--bottom" data-hint="The arena of commercial dealings">marketplaces</span>

Or keep showing the Tooltip

总结

使用CSS3所提供的越来越多的高端性能，我们不再依赖JavaScript或者jquery去创建漂亮的用户界面，例如创建提示框，而是用hint.css，我们就能创建自己所需要的效果。但就像文章开始提到的那样，这个技术只能允许我们创建简单的基于文本的提示框。

如果你希望创建一个更高端的提示框，就是说，你一个带有图片的提示框，或者是一个在鼠标点击之后出现的提示框而不仅仅是鼠标悬停状态下的提示框，使用JavaScript或者jQuery仍是一个最好的方式。