【CSS 29】tooltip 工具提示文本额外信息 visibility position 定位利用伪元素类空content属性和边框创建箭头淡入工具提示 opacity从0到1

最新推荐文章于 2024-03-06 14:35:29 发布

Zanebla

最新推荐文章于 2024-03-06 14:35:29 发布

阅读量246

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62629457/article/details/131623111

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

- - tooltip 工具提示

tooltip 工具提示

通过 CSS 创建工具提示（Tooltip）
当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息

基础的工具提示
创建一个鼠标移到元素上时显示的工具提示

<!DOCTYPE html>
<html>
<style>
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted hotpink;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #111;
	color: #fff;
	border-radius: 7px;
	padding: 5px 0;
	/*定位工具提示*/
	position:absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
</style>
<body style="text-align:center; font-weight: bold;">

<p>将鼠标移到下面的文字之上</p>

<div class="tooltip">Zane是大帅逼
<span class="tooltiptext">Yep</span>
</div>
</body>
</html>

解释一下：
HTML：使用容器元素（例如 <div>）并向其添加 "tooltip" 类。当用户将鼠标悬停在此 <div> 上时，会显示工具提示文本。工具提示文本于 class="tooltiptext" 的嵌入式元素（如 <span>）中。
CSS：tooltip 类使用 position:relative，用于放置工具提示文本（position:absolute）。
tooltiptext 类保存实际的工具提示文本。默认情况下它是隐藏的，并会在鼠标悬停时可见。我们还为其添加了一些基本样式：120 像素的宽度、黑色背景、白色文本、文本居中以及 5px 的上下内边距（padding）。
CSS border-radius 属性用于向工具提示文本添加圆角。

定位工具提示

/*
在本例中，工具提示位于“可悬停”文本（<div>）的右侧（left:105%）
另外请注意，top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距，还请您同时增加 top 属性的值，以确保它停留在中间。如果要将工具提示放在左侧，也同样适用。
*/
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius:7px;
	padding: 5px 0;

	/* 定位工具提示 */
	position: absolute;
	z-index: 1;
	top: -5px;
	left: 105%; /*右侧工具提示*/
	/*right: 105% 左侧工具提示*/
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

如果您希望工具提示位于上方或下方，请看下面的例子
我们使用了负 60 像素的左外边距属性（margin-left），这是为了把工具提示与可悬停文本进行居中对齐，该值是工具提示宽度的一半（120/2 = 60）

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 7px;
	padding: 5px 0;

	/*定位工具提示*/
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

底部工具提示同理

.tooltip .tooltiptext {
	width: 120px;
	background-color: black;
	color: #fff;
	border-radius: 7px;
	padding: 5px 0;

	/*定位工具提示*/
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 50%;
	margin-left: -60px; /* Use half of the width (123/2 = 60), to center the tooltip */
}

工具提示箭头
如需创建在工具提示的指定侧面显示的箭头，请在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性
箭头本身是使用边框创建的
这会使工具提示看起来像气泡

<!DOCTYPE html>
<html>
<head>
<style>
/*
将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。
border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。
border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。
*/
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 2px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}

/*底部箭头*/
.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
</style>
</head>
<body style="text-align:center;">

<h2>Top Tooltip / Bottom Arrow</h2>

<div class="tooltip">Hover on me!
<span class="tooltiptext">okk</span>
</div>

</body>
</html>

/*顶部箭头*/
.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent hotpink transparent;
}

/*左侧箭头*/
.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	top: 50%;
	right: 100%; /* To the left of the tooltip */
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent black transparent transparent;
}

/*右侧箭头*/
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

淡入的工具提示（动画）
如果希望在即将显示的工具提示文本中淡入淡出，可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％可见

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 2px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 7px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;

	/*淡入工具提示*/
	opacity: 0;
	transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

Zanebla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS 29】tooltip 工具提示文本额外信息 visibility position 定位利用伪元素类空content属性和边框创建箭头淡入工具提示 opacity从0到1

tooltip 工具提示文本额外信息 visibility position 定位利用伪元素类空content属性和边框创建箭头淡入工具提示使用负 60 像素的左外边距属性为了把工具提示与可悬停文本进行居中对齐，该值是工具提示宽度的一半（120/2 = 60）创建在工具提示的指定侧面显示的箭头，在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。top: 100% 将箭头放置在工具提示的底部。当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息
复制链接

扫一扫