在你的页面或应用程序中添加一个简单的工具提示并不困难。你可以很容易地找到大量的JavaScript工具提示插件和脚本，它们都可以很好地工作。
但是，纯CSS通常是一个更好的选择，并且已经成为许多网页设计师的首选。如果你正在寻找纯CSS工具提示，那么这个免费代码片段集应该有适合你的东西。以下所有的工具提示代码段都可以供你分叉、复制，或为你的网站重新设计。
1.产品功能亮点by Ian Farb
我们以一个产品特征工具提示的片段拉开序幕。而且，这简直是不可思议。通过将工具提示附加到DIV 元素上，你可以将它们放置在图片的任何地方。这样，用户可以通过悬停来获得有关产品风格、设计、格式等方面的进一步信息。
工具提示本身看起来很干净，有一个白色的背景和一个小的阴影。这些工具提示的例子可以在任何布局风格中使用，所以它们是产品呼出的完美选择。
请看Ian Farb的《用CSS工具提示突出产品特性的笔》。
2.动画的CSS工具提示 作者：Markus Bruch
如果你正在寻找自定义的动画工具提示，这个CSS片段是为你准备的。该工具提示有三种不同的风格：渐变、扩展和摆动运动。
它们都相当简单，可以添加到任何页面，并使用HTML5data-title 属性来定义工具提示文本。这意味着你不需要任何额外的HTML来实现这些工作。
请参阅Markus Bruch的《笔式动画CSS工具提示》。
3.自动化工具提示 作者：Adwin
有了这些自动化工具提示，你会注意到两件事：它们与锚点链接很好地融合在一起，而且它们只依赖一点JavaScript。
尽管它们不是用纯CSS构建的，但我们不得不包括它们，因为它们实在是太实用了。我们不会说这些工具提示适合所有人，因为它们需要一个特定类型的网站来真正 "融入 "内容。
4.动画问题作者：Sasha Tran
你经常在较大的表格和较复杂的页面中看到小问号图标。它们对于告知用户页面的特定部分或提供进一步的指导非常有用。
这也是在HTML5data-* 属性上的工作，所以你所有的工具提示信息都可以直接放在里面。而且，由于代码是完全开源的，你甚至可以编辑动画风格和颜色方案，以便更好地融入你自己的项目。
请看Sasha的钢笔动画CSS工具提示概念。
5.纯CSS的快速提示by deineko
这些工具提示非常适合作为任何网站的日常运行工具提示。它们在纯CSS上工作，而且如果你深入研究代码的话，可以毫不费力地进行定制。
默认情况下，每个工具提示使用一个略微变暗的背景，并具有半透明的不透明度。如果你的工具提示出现在另一个段落的上面，这可能很难阅读。但是，通过对CSS的一个小改动，你可以重新设计颜色方案以提高可读性。
请看deineko的PenQuick CSS3 tooltips (No images, no js)
6.无JS工具提示by Chris Yaxley
这些工具提示没有自定义的动画效果，所以与本系列中的其他一些工具提示相比，它们可能感觉有点陈旧。但它们完全符合现代浏览器的要求，而且它们的行为与你所期望的完全一致。
参见Chris Yaxley的PenNo-JS工具提示
7.带工具提示的动画按钮by Aditya Bhandari
这个自定义的动画按钮工具提示无疑是独特的。它在悬停时出现，并以自上而下的动画方式渐渐进入视野。它适用于任何使用.button 类的按钮或链接，并使用伪类:before 和:after 出现。如果你正在设计一个带有下载部分或注册表格的页面，这个工具提示会很有用。
请看Aditya Bhandari的PenAnimated Button with Tooltip（纯CSS）。
8.纯CSS的文本提示（Pure-CSS
我们是基于文本的工具提示的忠实粉丝，因为它们是网络中的经典。有了这些纯CSS提示，你不仅可以得到一个干净的用户界面，还可以在悬停时得到非常好的动画效果。
实际的工具提示有一个小的延迟，这是典型的标准浏览器工具提示。它使用CSS动画来浮动到视图中。另外，它将默认的光标样式改为问号光标，这是一种与通常不能点击的链接有关的设计模式。
参见Pure-CSS.com的PenPure-CSS Tooltips。
9.信息类工具提示by Cristina Silva
这个例子是另一个使用 "i "信息图标的信息型工具提示。你可以很容易地复制这个CSS，在任何可能支持基于信息的工具提示的页面元素上运行。
这个动画风格很干净，但对我们的口味来说有点慢。值得庆幸的是，你可以完全访问源代码，所以你可以编辑动画的速度、风格、位置和几乎所有其他的东西。
参见Cristina Silva的PenPure CSS Tooltip。
10.带工具提示的甜甜圈图（Hiro
这个甜甜圈图表使用了一些不可思议的工具提示。数据图表在使用工具提示时总是效果更好。它们允许你分享关于图表某些区域的额外数据和信息，即使在页面上没有太多的空间。你会注意到，这个例子确实使用了一点JavaScript，但它主要用于甜甜圈图的效果。
工具提示是基于JavaScript数据出现的，所以它们不需要任何额外的HTML。这使得它更难定制，但也让你对工具提示的风格、位置和行为有更多的控制。
请看Hiro的带动画和工具提示的PenSVG Doughnut图表
