【HUI】Tooltip(提醒组件)——1.Tooltip in CSS2[demo0]

【HUI】Tooltip(提示组件)——1.Tooltip in CSS2[demo0]

文章来自LearnShare，转载请注明。

本文是【HUI】Tooltip(提示组件) 系列文章之一，请关注本系列的 更新。

上周的 【HUI】triangles in css2 这篇文章讲到了使用css2制作各种三角形及组合图形的方法，现在我们就用这些方法用HTML和CSS 2来制作一个 Tooltip(提示组件)。

Tooltip是图形界面中常见的提示型组件，在网页中，HTML Tag的title属性记录了Tooltip的内容，它会在鼠标指向相应元素时显示在鼠标指针的右下角，通常表现为带阴影和边框的浮动矩形（因系统主题和配色各异）。

Tooltip in web（截图来自 Wikipedia:Tooltip in Chrome Windows7）

系统提供的Tooltip样式单一，无法扩展，而且样式在不同系统及不同主题和配色的系统中表现各异。所以，在网页中，通常使用HTML、CSS和JS自定义Tooltip的样式和表现。

网上有许多优秀的Tooltip组件，如：jQueryUI.Tooltip、qTip2 等。了解更多Tooltip组件，可参考GBin1:超棒的20款javascript工具提示条(tooltips)类库。

Tooltip组件离不开提示框（也可叫做提示气泡），我们首先来做一个提示气泡，如下图所示。

气泡分为两部分：矩形框部分和三角形部分。先看代码，后面来具体分析：

HTML主要代码：

.tt-a{margin-left:12px;}

Q1：到这，本文就结束了？

是的。

Q2：Tooltip还没做完吧！

对，我们刚刚完成的仅仅是Tooltip的外观部分，还是 demo0 版本。

Q3：后面还有什么？

后面会陆续介绍：更好的Tooltip气泡，完整的Tooltip in CSS2，Tooltip in CSS3，完整的Tooltip提示组件...等内容，敬请期待！

本文是【HUI】Tooltip(提示组件) 系列文章之一，请关注本系列的 更新。

文章来自LearnShare，转载请注明。