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,
- you have an outside ID that contains all of your tooltip ID’s.
- you assign your tool tip ID’s to be uniqueNameToolTip. This will allow the below code to successfully identify and modify each ID independently.
- 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.
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>