在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>

根据您的意愿设计它以适合您的位置。