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.

Show/Hide ToolTips with jQuery

An Updated Post Can Be Found Here

As a developer I have faced many problems with tooltips and getting div’s to appear, disappear, and jump through hoops. Today I figured out a nice way.

This code below dynamically shows and hides certain div’s. Using no onClick event handling. There are 3 pre-reqs,

  1. you have an outside ID that contains all of your tooltip ID’s.
  2. you assign your tool tip ID’s to be uniqueNameToolTip. This will allow the below code to successfully identify and modify each ID independently.
  3. in your CSS for the aToolTip class you should set “visibility: hidden”. This will hide the tool tip by default.

Here is the code below. I have made bold the appended “ToolTip” for each unique ID and the “#Change_Me” which needs to be changed to reflect your code.

<script type="text/javascript"><!--mce:0--></script>

This code should be inserted in to your <head>.

In your body, you will have code that looks like:

<div id="CHANGE_ME">
<table border="0" cellspacing="4" cellpadding="8">
<tbody>
<tr>
<td style="text-align:right">name</td>
<td></td>
<td id="uniqueNameToolTip"> <img src="/images/ToolTipName.jpg" alt="" /></td>
</tr>
</tbody></table>
</div>

That’s it. Now, when the page loads you will find that when you focus on the text box the tool tip in the right column of the table will appear. I know the formatting is a bit off, bear with me! Question/Comments please post. Note this was developed on an asp.net page, but the concept and functionality (of the javascript) persists on asp, asp.net, php, so forth.