CODEWITHSUNDEEP
javascriptphphtmlforms
AAA
AAA

Reputation: 3168

Tooltip after input field focus

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?

Upvotes: 0

Views: 2806

Answers (4)

Moin Zaman
Moin Zaman

Reputation: 25435

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>

Upvotes: 1

Clyde Lobo
Clyde Lobo

Reputation: 9174

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)

Upvotes: 1

Mauricio
Mauricio

Reputation: 5853

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

Upvotes: 1

Shoban
Shoban

Reputation: 23016

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

Upvotes: 1

Related Questions