日期:2014-05-17  浏览次数:20669 次

【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主要代码:

<!-- 
* 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(提示组件) 系列文章之一,请关注本系列的 更新。



文章来