Show/Hide ToolTips with jQuery (revisited)

Finally, I got around to putting together a very simple demonstration (no graphics or styling) of using jQuery to show and hide (toggle) tool tips. I have put together I demo you can access at examples/jquery/show_hide_tooltips_ex1. Ctrl+U to view source.

What I have put together in this demonstration:

  • an on ready document function that tells jQuery when the web page has rendered to become active
  • a binded click event on all input boxes with a class named ‘form_field’ that will call back a function when clicked
  • a call back function that will hide all other tooltips and display the one corresponding to the input box clicked

Here is the source code to view. Again, to see it functioning go to the above link! And don’t forget for all of this to function you must include the jQuery JavaScript framework into your <head></head> html page. You can link or grab a copy from Google Code (here), and the version I am using is jquery-1.3.2.min.js.

$('.form_field').bind("click",
    function()
    {
      var divs = $('.tooltip_example1');
      var field = this.id;
      var div = $('.tooltip_example1[id='+field+']');
 
      if(div.css('display') == 'none')
      {
        divs.hide(function()
        {
          div.show();
        });
      }
      else
      {
        div.hide();
      }
    });
  });

And within the body of your html page you should add the following html

<table border="0">
<tbody>
<tr>
<td>
          Username</td>
<td>
<input id="username" class="form_field" size="30" type="text" /></td>
<td>
<div id="username" class="tooltip_example1" style="display:none">
          This is how we'll identify you</div></td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="password" class="form_field" size="30" type="text" /></td>
<td>
<div id="password" class="tooltip_example1" style="display:none">
           And how you keep it safe</div></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Submit" /></td>
</tr>
</tbody></table>

The value in this kind of toggling is as a user goes through a form they can see suggested messages by you, the web developer.

Leave a Reply

Your email address will not be published. Required fields are marked *