【HUI】Tooltip(提醒组件)——1.Tooltip in CSS2[demo0]
日期：2014-05-17 浏览次数：20730 次
文章来自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主要代码：
<!-- * Widget: HUI.ToolTips.demo * Version: 0.1 (@2012-12-14) * Author: H-Labs (LearnShare) --> <!DOCTYPE html> <html> <head> <title>ToolTips demo</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="./style/main.css" /> </head> <body> <h2>ToolTips[demo0]</h2> <div class="tooltip"> <div class="tt-c">content</div> <div class="tt-a"></div> </div> </body> </html>
CSS主要代码：
/**
* Widget: HUI.ToolTips.demo
* Version: 0.1 (@2012-12-14)
* Author: H-Labs (LearnShare)
*/
body{
margin:0px;
background-color:#EEF;
}
.tooltip{
margin-top:30px;
margin-left:40px;
}
.tt-c{
display:inline-block;
padding:10px 20px;
background-color:#333;
color:#DDE;
font-size:20px;
}
.tt-a{
width:0px;
height:0px;
border:solid 6px transparent;
border-top-color:#333;
border-left-color:#333;
margin-left:12px;
}
步骤详解：
首先，在HTML中声明Tooltip的气泡，包括气泡内容和底部的三角形：
<div class="tooltip"> <div class="tt-c">content</div> <div class="tt-a"></div> </div>然后，设置气泡显示方式为inline-block(行内块级元素)，并设定背景色、文字颜色等项目：
.tt-c{
display:inline-block;
padding:10px 20px;
background-color:#333;
color:#DDE;
font-size:20px;
}然后，将底部的div设定为三角形，方法可参考上一篇文章： 【HUI】triangles in css2：
.tt-a{
width:0px;
height:0px;
border:solid 6px transparent;
border-top-color:#333;
border-left-color:#333;
}最后，设定三角形的左边距，使之向右偏移一定的距离：
.tt-a{
margin-left:12px;
}如此一来，一个Tooltip气泡就做成了，查看效果。
Q1：到这，本文就结束了？
是的。
Q2：Tooltip还没做完吧！
对，我们刚刚完成的仅仅是Tooltip的外观部分，还是 demo0 版本。
Q3：后面还有什么？
后面会陆续介绍：更好的Tooltip气泡，完整的Tooltip in CSS2，Tooltip in CSS3，完整的Tooltip提示组件...等内容，敬请期待！
本文是【HUI】Tooltip(提示组件) 系列文章之一，请关注本系列的 更新。
文章来
