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

最新推荐文章于 2022-06-23 17:37:49 发布

LearnShare

最新推荐文章于 2022-06-23 17:37:49 发布

阅读量1.5k

点赞数 1

分类专栏： HUI Tooltip JavaScript/jQuery Web前端（HTML/CSS）

本文链接：https://blog.youkuaiyun.com/sdlyhjq/article/details/8316426

版权

Web前端（HTML/CSS）同时被 3 个专栏收录

6 篇文章

订阅专栏

HUI

5 篇文章

订阅专栏

JavaScript/jQuery

5 篇文章

订阅专栏

本文介绍了如何利用HTML和CSS2自制Tooltip提示组件，通过创建带有矩形框和三角形的提示气泡，展示了Tooltip的基本外观。文章为系列文章的一部分，后续将探讨更复杂的CSS2和CSS3版本以及完整的Tooltip组件实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章来自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，转载请注明。