Question

我确信它有一个合适的术语，但不知道。当用户在每个字段上时，如何弹出一个小注释？就像我们说他们去名字领域一样;然后，当他们点击右侧的名称字段时，我想要一个小注释显示给他们一条消息，例如“确保使用全名”。我想为我所拥有的几个领域做这件事。我怎么能这样做？

Answer 1

您在寻找工具提示吗？从smashing magazine查看这些集合。

Answer 2

我根据你的要求使用这个插件。 JQuery tooltip

Answer 3

FlowPlayer.org有一个很好的jQuery工具提示插件，你可以使用。

检查this以获取在表单上使用它的演示（适合您的要求）

Answer 4

以下是一个简单示例：http://jsbin.com/iruyo3

此处粘贴代码以供参考。

<!doctype html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
      body { font:normal 62.5% tahoma; margin:20px }

      #myForm .note { display:none; }
      #myForm fieldset { border:0 }
      #myForm label { width:100px; float:left; height:25px; line-height:25px; text-align:right; padding-right:10px }


    </style>
  </head>
  <body>

    <form id="myForm">

      <fieldset>
        <label>Name</label>
        <input type="text" name="fullname">
        <span class="note">Enter your full name.</span>
      </fieldset>

      <fieldset>
        <label>Company</label>
        <input type="text" name="fullname">
        <span class="note">Enter your work place.</span>
      </fieldset>      

    </form>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function() {
      $('#myForm input:text').focus(function(){
        $('.note').hide();
        $(this).next().fadeIn();
      });
    });
  </script>
  </body>
</html>

输入字段焦点后的工具提示

4 个答案: