HTML 提示框代码示例 - 简单易懂 - 常规

以下是一个简单的 HTML 提示框代码：

<!DOCTYPE html>
<html>
<head>
	<title>提示框示例</title>
	<style>
		/* 定义提示框样式 */
		.tooltip {
			position: relative;
			display: inline-block;
			border-bottom: 1px dotted black;
			/* 鼠标悬停时显示提示框 */
		}
		.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 0.3s;
		}
		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: #555 transparent transparent transparent;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
			opacity: 1;
		}
	</style>
</head>
<body>
	<h2>示例提示框</h2>
	<p>这是一个带有提示框的文字 <span class='tooltip'>鼠标悬停在这里 <span class='tooltiptext'>这是提示框的内容</span></span></p>
</body>
</html>

该代码定义了一个 class 为 tooltip 的元素，当鼠标悬停在该元素上时，会显示 class 为 tooltiptext 的元素，即提示框。提示框样式可以根据自己的需求进行修改。