鼠标悬停显示提示文字 html+css

也可以结合表单提交验证显示

html 复制代码

<style>
[data-tooltip] {
  position: relative;
  cursor: pointer;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1000;
  font-size: 12px;
}

/* 鼠标悬停时显示提示 */
[data-tooltip]:hover::after {
  visibility: visible;
  opacity: 1;
}

/* 为 input 元素添加相对定位 */
input[data-tooltip] {
  position: relative;
}

/* 提示位置 */
[data-tooltip-position="top"]::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
}

[data-tooltip-position="bottom"]::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
}

input[data-tooltip] {
  position: relative;
  display: inline-block; /* Ensure proper layout */
}
input::after{
	width:100px;height:20px;
}
</style>
<form action="">
<div data-tooltip="这是一个输入框" data-tooltip-position="top"><input type="text" value="" placeholder="Please fill in your requirements"></div>
<div data-tooltip="这是一个编辑框" data-tooltip-position="top"><textarea  name="content" placeholder="Please fill in your requirements"></textarea></div>
<button data-tooltip="这是一个按钮提示" data-tooltip-position="top">带提示的按钮</button>
</form>

[data-tooltip] : 选择所有带有 data-tooltip 属性的元素。
position: relative; : 使这些元素相对于其正常位置进行定位，这样可以为 ::after 伪元素创建一个参考点。
cursor: pointer;: 当鼠标悬停在这些元素上时，鼠标会变为手型，表明该元素是可交互的。

[data-tooltip]::after : 选择所有带有 data-tooltip 属性的元素的 ::after 伪元素，创建工具提示。
content: attr(data-tooltip); : 伪元素的内容来自于元素本身的 data-tooltip 属性，这里显示工具提示的文本。
position: absolute; : 使工具提示的位置相对于 data-tooltip 元素进行绝对定位。
background: rgba(0, 0, 0, 0.8);: 背景色设置为半透明的黑色。
color: white;: 字体颜色为白色。
padding: 5px 10px;: 内边距，使工具提示内容不至于紧贴边缘。
border-radius: 4px;: 圆角效果，使工具提示的角变得柔和。
white-space: nowrap;: 防止工具提示的文本换行。
visibility: hidden; 和 opacity: 0;: 初始状态下工具提示不可见，且透明度为 0。
transition: opacity 0.3s;: 设置渐变过渡效果，在显示或隐藏时产生平滑的动画效果。
z-index: 1000;: 设置较高的层级，确保工具提示显示在其它内容之上。
font-size: 12px;: 设置工具提示的字体大小。
[data-tooltip]:hover::after : 当鼠标悬停在带有 data-tooltip 属性的元素上时，显示工具提示。
visibility: visible; 和 opacity: 1;: 将工具提示的可见性设置为可见，透明度设置为完全不透明（显示工具提示）

这两段 CSS 用来控制工具提示的显示位置。

[data-tooltip-position="bottom"]::after : 选择 data-tooltip-position="bottom" 的元素，显示工具提示在元素的下方。
top: 100%;: 将工具提示放置在元素的下方（即，顶部与元素底部对齐）。
left: 50%;: 水平居中对齐工具提示。
transform: translateX(-50%); : 同样利用 transform 来实现水平居中。
margin-top: 5px;: 为工具提示与元素之间留出 5px 的间隙。