1. 首页
  2. CSS 菜鸟教程
  3. CSS - 工具提示

CSS - 工具提示

CSS 工具提示就像当您将鼠标悬停在网页上的某个元素上时出现的信息小框。

仅当您将鼠标悬停在元素上时，这些工具提示才能提供有关网页上特定元素的更多信息。

创建工具提示

  • 我们可以只使用 CSS 和 HTML 创建工具顶部。
  • 使用容器元素（如 div）设置工具提示。
  • 创建一个 div 元素并向其添加 CSS 类工具提示。
  • 使用 .tooltiptext 类将工具提示文本放在内联元素（如 span）中。
  • 当用户将鼠标指针移到容器元素上时，将显示 span 元素内的工具提示文本。

以下示例演示如何使用 CSS 创建工具提示。当用户将鼠标悬停在文本上时，将显示工具提示。

<html>
<head>
<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	 	 cursor: pointer;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 120px;
	 	 	 background-color: #000;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 bottom: 125%;
	 	 	 left: 50%;
	 	 	 margin-left: -60px;
	 	 	 opacity: 0;
	 	 	 transition: opacity 0.3s;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	 	 opacity: 1;
	 	}
</style>
</head>
<body>
	 	<h2>Hover over the text below to see the tooltip</h2>
	 	<div class="tooltip">
	 	 Hover over this text
	 	 	 <span class="tooltiptext">This is a tooltip</span>
	 	</div>
</body>
</html>

在上面的示例中，position： relative; 属性应用于 .tooltip 类。它允许具有 position： absolute 的子元素相对于 tooltip 容器进行定位。

.tooltip {
	 	position: relative;
}

.tooltiptext 类负责设置工具提示文本的样式。默认情况下，它被设置为 display： none;使其处于隐藏状态。

当您将鼠标悬停在父元素 .tooltip 上时，此类将变为可见。

	 	.tooltip {
	 	 	 position: relative;
	 	}

：hover 伪类与 .tooltip 类一起使用，使 .tooltiptext 类在用户将鼠标悬停在 tooltip 容器上时可见。

	 	.tooltip:hover .tooltiptext {
	 	 	 display: block; /* Show the tooltip text on hover */
	 	}

定位工具提示

一些工具提示的任务是确定工具提示的位置并确保稳定放置。

我们有四种使用工具提示显示元素的主要方法。

  • 顶部工具提示框
  • 底部工具提示框
  • 右侧工具提示
  • 左侧工具提示框

顶部工具提示框

  • 此工具提示显示元素上方的信息。
  • 当您将鼠标悬停在某个指定元素上时，工具提示会显示在网页上的该元素上方，并显示工具提示的文本。
  • 这称为顶部工具提示。

以下示例演示如何创建将鼠标悬停在元素顶部时显示在元素顶部的工具提示。

<html>
<head>
	 	<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	 	 cursor: pointer;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 120px;
	 	 	 background-color: #000;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 top: -50px;
	 	 	 left: 50%;
	 	 	 transform: translateX(-50%);
	 	 	 opacity: 0;
	 	 	 transition: opacity 0.3s;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	 	 opacity: 1;
	 	}
</style>
</head>
<body>
<h2>Hover over the text to see the top tooltip</h2>
	 	<div class="tooltip">
	 	Hover over this text
	 	<span class="tooltiptext">This is a top tooltip</span>
	 	</div>
</body>
</html>

底部工具提示框

  • 此工具提示在元素下方显示信息。
  • 当您将鼠标移到某个指定元素上时，工具提示会显示在网页上该元素的底部，并显示工具提示的文本。
  • 这称为底部工具提示。

以下示例演示了一个工具提示，当将鼠标悬停在上面时，该提示将显示在元素的底部。

<html>
<head>
<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	 	 cursor: pointer;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 120px;
	 	 	 background-color: #000;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 top: 125%;
	 	 	 left: 50%;
	 	 	 margin-left: -60px;
	 	 	 opacity: 0;
	 	 	 transition: opacity 0.3s;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	 	 opacity: 1;
	 	}
</style>
</head>
<body>
	 	 	 <h2>Bottom Tooltip Example</h2>
	 	 	 <div class="tooltip">
	 	 	 	 	Hover over this text
	 	 	 	 	<span class="tooltiptext">This is a bottom tooltip</span>
	 	 	 </div>
</body>
</html>

右侧工具提示

  • 此工具提示旨在在元素的右侧显示信息。
  • 当您将鼠标移到某个指定元素上时，工具提示会显示在网页上该元素的右侧，并显示工具提示的文本。
  • 这称为右工具提示。

以下示例演示了一个工具提示，当将鼠标悬停在上面时，该工具提示将显示在元素的右侧。

<html>
<head>
<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 120px;
	 	 	 background-color: #000;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 top: -5px;
	 	 	 left: 110%;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	}
</style>
</head>
<body>
<h2>Right Tooltip Example</h2>
<div class="tooltip">
	 	Hover over this this text
	 	<span class="tooltiptext">This is a right tooltip</span>
</div>
</body>
</html>

左侧工具提示框

  • 此工具提示旨在显示元素左侧的信息。
  • 当您将鼠标移到某个指定元素上时，工具提示会显示在网页上该元素的左侧，并显示工具提示的文本。
  • 这称为左侧工具提示。

以下示例演示了一个工具提示，当将鼠标悬停在上面时，该提示会显示在元素的左侧。

<html>
<head>
<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	 	 cursor: pointer;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 120px;
	 	 	 background-color: #000;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 right: 110%;
	 	 	 margin-left: -60px;
	 	 	 opacity: 0;
	 	 	 transition: opacity 0.3s;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	 	 opacity: 1;
	 	}
</style>
</head>
<body>
<body style="text-align:center;">
<h2>Left Tooltip Example</h2>
<div class="tooltip">
	 	Hover over this text
	 	<span class="tooltiptext">This is a left tooltip</span>
</div>
</body>
</html>

工具提示箭头

为了在一侧创建工具提示箭头，我们使用伪元素类 ：：after 和 content 属性，在工具提示后添加空内容。

边框用于制作箭头，从而产生一个看起来像对话气泡的工具提示。Tooltop 箭头可以是 top、botton、right 和 left，如以下部分中的 demonstarted 所示。

顶部箭头工具提示框

顶部箭头工具提示是指位于与该元素关联的元素下方的工具提示。

它包括一个向上的箭头，用于指示工具提示和元素之间的连接。

以下示例显示了一个顶部箭头工具提示，该工具提示显示在元素的底部，当将鼠标悬停在上面时指向该元素。

<html>
<head>
<style>
.tooltip {
	 position: relative;
	 display: inline-block;
}
.tooltip .tooltiptext {
	 visibility: hidden;
	 width: 150px;
	 background-color: black;
	 color: #fff;
	 text-align: center;
	 border-radius: 6px;
	 padding: 5px 0;
	 position: absolute;
	 z-index: 1;
	 top: 120%;
	 left: 50%;
	 margin-left: -20px;
}
.tooltip .tooltiptext::after {
	 content: "";
	 position: absolute;
	 bottom: 100%;
	 left: 20%;
	 margin-left: -5px;
	 border-width: 8px;
	 border-style: solid;
	 border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
	 visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Top Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
	 <span class="tooltiptext">This is Tooltip text with top arrow</span>
</div>
</body>
</html>

底部箭头工具提示框

底部箭头工具提示是指位于与该元素关联的元素上方的工具提示。

它包括一个向下的箭头，用于指示工具提示和元素之间的连接。

以下示例显示了一个底部箭头工具提示，该工具提示显示在元素的顶部，当将鼠标悬停在上面时指向该元素。

<html>
<head>
<style>
.tooltip {
	 	position: relative;
	 	display: inline-block;
}
.tooltip .tooltiptext {
	 	visibility: hidden;
	 	width: 150px;
	 	background-color: black;
	 	color: #fff;
	 	text-align: center;
	 	border-radius: 6px;
	 	padding: 5px 0;
	 	position: absolute;
	 	z-index: 1;
	 	bottom: 125%;
	 	left: 50%;
	 	margin-left: -70px;
}	
.tooltip .tooltiptext::after {
	 	content: "";
	 	position: absolute;
	 	top: 100%;
	 	left: 50%;
	 	margin-left: -5px;
	 	border-width: 7px;
	 	border-style: solid;
	 	border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
	 	visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Bottom Arrow Tooltip</h2><br/><br/>
<div class="tooltip">Hover over this text
	 	<span class="tooltiptext">This is Bottom arrow tooltip text</span>
</div>
</body>
</html>

向右箭头工具提示框

向右箭头工具提示是指位于与该元素关联的元素左侧的工具提示。

它包括一个指向右边的箭头，用于指示工具提示和元素之间的连接。

以下示例演示了一个右箭头工具提示，该工具提示显示在元素的左侧，当将鼠标悬停在上面时指向该元素。

<html>
<head>
<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 150px;
	 	 	 background-color: black;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px 0;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 top: -5px;
	 	 	 right: 110%;
	 	}
	 	.tooltip .tooltiptext::after {
	 	 	 content: "";
	 	 	 position: absolute;
	 	 	 top: 35%;
	 	 	 left: 100%;
	 	 	 margin-top: -5px;
	 	 	 border-width: 8px;
	 	 	 border-style: solid;
	 	 	 border-color: transparent transparent transparent black;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	}
</style>
</head>
<body style="text-align:center;">
<h2>Right Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
	 	<span class="tooltiptext">This is Right Arrow Tooltip text</span>
</div>
</body>
</html>

向左箭头工具提示框

向左箭头工具提示是指位于与该元素关联的元素右侧的工具提示。

它包括一个指向左侧的箭头，用于指示工具提示和元素之间的连接。

以下示例演示了一个左箭头工具提示，该工具提示显示在元素的右侧，当将鼠标悬停在上面时指向该元素。

<html>
<head>
<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 140px;
	 	 	 background-color: black;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px 0;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 top: -5px;
	 	 	 left: 110%;
	 	 	 }
	 	.tooltip .tooltiptext::after {
	 	 	 content: "";
	 	 	 position: absolute;
	 	 	 top: 30%;
	 	 	 right: 100%;
	 	 	 margin-top: -5px;
	 	 	 border-width: 8px;
	 	 	 border-style: solid;
	 	 	 border-color: transparent black transparent transparent;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	}
</style>
</head>
<body style="text-align:center;">
<h2>Left Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
	 	<span class="tooltiptext">This is Left Arrow Tooltip text</span>
</div>
</body>
</html>

淡入工具提示

CSS 淡入工具提示或工具提示动画是一种工具提示，它逐渐出现并具有淡入淡出效果，从而创建平滑且具有视觉吸引力的过渡。

要在 CSS 中实现工具提示中的淡入淡出，您可以结合使用 CSS 过渡和不透明度属性。

以下示例演示了淡入工具提示。当您将鼠标悬停时，将出现一个工具提示。工具提示将平滑淡入，并具有过渡效果。

<html>
<head>
<style>
	 	.tooltip {
	 	 	 position: relative;
	 	 	 display: inline-block;
	 	 	 cursor: pointer;
	 	}
	 	.tooltip .tooltiptext {
	 	 	 visibility: hidden;
	 	 	 width: 120px;
	 	 	 background-color: #555;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 border-radius: 6px;
	 	 	 padding: 5px;
	 	 	 position: absolute;
	 	 	 z-index: 1;
	 	 	 bottom: 125%;
	 	 	 left: 50%;
	 	 	 margin-left: -60px;
	 	 	 opacity: 0;
	 	 	 transition: opacity 2s;
	 	}
	 	.tooltip:hover .tooltiptext {
	 	 	 visibility: visible;
	 	 	 opacity: 1;
	 	}
</style>
</head>
<body style="text-align:center;">
<h2>Fade-in Tooltip Example</h2> <br/> <br/>
<div class="tooltip">
	 	Hover over this text
	 	<span class="tooltiptext">This is a fade-in tooltip</span>
</div>
</body>
</html>

工具提示的优点

工具提示提供额外的信息，而不会使网页变得混乱。它们可以帮助用户更好地理解网页的不同部分。

  • CSS工具提示可以定制，并针对不同的屏幕和设备放置在不同的位置。这使得它们对所有类型的网站都很有用，甚至是那些在不同屏幕上改变大小的网站。
  • CSS 工具提示是高度可定制的，它允许开发人员设置它们的样式以匹配网站的设计主题，包括颜色、字体和动画。
  • 实现 CSS 工具提示相对简单，不需要复杂的 JavaScript 或其他库。
<< CSS - box-sizing（盒子大小调整）属性 CSS - buttons（按钮）元素 >>