在 HTML 中悬停弹出消息

Question

在我的 HTML 表单中，我想要一个弹出消息（类似于 ToolTip），它将通知用户大写锁定已打开。目前，我的表单正确检查大写锁定并在文本框右侧的 div 中显示警告。此 div 会强制页面更改，因为它占用了一些空间。

有没有办法让 div 作为通知云弹出？通过设置 z-index 或其他方法以在捕获大写锁定时弹出类似于工具提示的内容？

Answer 1

<div style="position: relative;">
  <input type="text" id="my_input" name="my_input" value="" />
  <div style="position: absolute; z-index: 10; top: 0px; right: 0px;">
    CAPS LOCK is on!
  </div>
</div>

只需根据您的喜好设置样式即可。