您的位置：首页 > 产品设计 > UI/UE

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

2012-12-19 15:18 736 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航