Jump to:
| Project: | Hovertips and Clicktips |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (works as designed) |
Issue Summary
I have a table of around 10 columns whose <th> cells each have a separate hovertip. When I hover over the text of one table header, it may display its own hovertip ... or it may display the one 6 columns away. It's unpredictable. Some of the hovertip boxes appear to have others layered underneath them, and occasionally one will display one set of contents for a split second and then suddenly switch to another. (This is happening with my very first row of hovertips, so I'm sure there isn't a syntax problem higher up that might be throwing it off.)
Additionally, the page takes forever to load .... 5-10 minutes. It is a very large table (one row for each legislator in the U.S. House of Reps.), granted, but it is currently running on a non-Drupal site using standard "overlib" javascript without any loading problems at all. Any idea what's going on? I am pasting code for a sample table row below. I used one of the syntaxes suggested in hovertip.js.
<tr>
<th><B>ALABAMA</B></th>
<th>Party</th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#20">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#284">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#533">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#327">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#2104">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#888">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#819">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#1713">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">TBA</span></p><div id="termdefinition" class="hovertip"><h1>TBA</h1><p><a href="house_rc.html#2596">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">(-)/+</span></p><div id="termdefinition" class="hovertip"><h1>Incorrect/Correct Stances</h1><p>No. of incorrect stances / No. of correct stances <a href="house_rc.html">More info</a></p></div></th>
<th><p><span hovertip="termdefinition">Score</span></p><div id="termdefinition" class="hovertip"><h1>Score</h1><p>A+ = highest; F = lowest <a href="house_rc.html">More info</a></p></div></th>
</tr>
Comments
#1
Your problem is most likely due to the fact that you're using the same id value "termdefinition" over and over again on every hovertip. id values have to be unique.
Try using making each hovertip/id unique like:
... <span hovertip="termdefinition1"> ... <div id="termdefinition1" class="hovertip> ...... <span hovertip="termdefinition2"> ... <div id="termdefinition2" class="hovertip> ...
... <span hovertip="termdefinition3"> ... <div id="termdefinition3" class="hovertip> ...
James
#2
Problem appears to be user error.