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.

Leave a Reply

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