Tooltip after input field focus

Question

I am sure there is a proper term for it but don't know it. How can I make a small note pop up when a user is on each field? Like let's say they go to name field; then as soon as they click on the name field on the right side, I want a small note to show up giving them a message like "make sure you use full name". I want to do this for a couple of fields I have. How can I do this?

Give us an example of a site that does what you need. That way we can give you specific code or even decipher how the other do it. — Moin Zaman, Jan 27 '11 at 05:37
that's better :) so my example is what you want. you can style the `span.note` element to have a background image if you want it to look better. — Moin Zaman, Jan 27 '11 at 08:17
It doesn't have to be. You can use your own hosted version. I use it because its easy to do so with JSBin. But Its a good practice to use Google's hosted CDN version of jQuery for benefits in performance, caching etc. read here for more: http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jquery — Moin Zaman, Jan 27 '11 at 08:48

score 1 · Answer 1 · answered Jan 27 '11 at 04:39

1

Are you looking for ToolTips? Checkout these collection from smashing magazine.

answered Jan 27 '11 at 04:39

Shoban

22,920
8
63
107

score 1 · Answer 2 · answered Jan 27 '11 at 04:40

1

I use this plugin for what you are asking. JQuery tooltip

answered Jan 27 '11 at 04:40

Mauricio

5,854
2
28
34

score 1 · Answer 3 · answered Jan 27 '11 at 04:42

1

FlowPlayer.org has a good jQuery tooltip plugin that you can use.

Check this for a demo of using it on a form(it suits your requirement)

answered Jan 27 '11 at 04:42

Clyde Lobo

9,126
7
34
61

Moin Zaman · Answer 4 · 2011-01-27T08:18:04.083

Here is a simple example: http://jsbin.com/iruyo3

Code pasted here for reference too.

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

Tooltip after input field focus

4 Answers4