HTML 表单输入标题样式

Question

我正在为我的网站制作表单，我需要在我的输入字段中提供一些工具提示，以解释用户应在该字段中输入的内容。我已经四处寻找设置标题属性样式的方法以及使用“span”和其他标签的几种方法，但似乎没有任何效果。有些方法适用于文本，但没有一种适用于输入字段。

有没有办法在输入字段上制作这样的工具提示？越简单越好。

Answer 1

有几种方法可以做到这一点， 例如，Jquery UI 提供了一种方法 (https://jqueryui.com/tooltip/)

或者您可以使用 a 作为工具提示并通过 js 在悬停时（或任何时候）触发它，此示例：Eric Kidd 的 this example 非常相似。

要在悬停时显示工具提示，您需要做的基本上是：

1. 为标签设置样式以显示在您想要的任何位置（这将是您的工具提示框）
2. 定义一个 .is-active 类，如果标签未附加到表单输入，它将隐藏您的标签

3. 在悬停时触发类，例如这样

   $(".form").mouseenter( handlerIn ).mouseleave( handlerOut );
   
   function handlerIn () {
    this.addClass("is-active");
   }
   
   function handlerOut () {
    this.removeClass("is-active");
   }