I am using a tooltip plugin (developed in house by someone who is on vacation) that works everywhere but in IE6. Naturally, it is being used on a site by people that use only IE6 so I need to find a way to get it displaying.
How would you even start to debug such a thing? I’ve Googled for the problem to see what other javascript tooltip plugins have done to deal with this but cannt find anything that pertains or solves my problem. So, I would love to debug it myself but I really don’t know where to begin!
How would you start trying to crack this nut?
Some code:
In the html we insert the following (with display:none set in the css)…
var noteContainer =
'<div style="float:left;" class="ttip-container">
<div class="ttip-box">
(<a class="ttip_heading" href="javascript:void(0)">notes</a>)
<div class="ttip" style="background-color:#ffffff;">
<h3>Notes</h3>
<div class="subhead">' + noteMessage + '</div>
<div class="subhead_bottom">Click <a href="javascript:void(0)" class="note" noteData="' + note + '" mId="' + mId + '" visibleToM="d"><em>(notes)</em></a> to ' + actionCap + '</div>
<img class="point" src="img/hovertip.gif" width="18" height="14" />
</div>
</div>
</div>';
Then the plugin sets this to diplay:block on hover over an anchor link.
So… where would you start debugging an IE6 javascript issue? I have IE6 running in a VM so I can work with it… just can’t get it to tell me anything about what might be going on.
Is the HTML actually being inserted into the DOM properly? If there’s a parsing error the DOM methods in IE will choke (can’t insert invalid HTML in IE6). This is step 1. Make sure the markup is actually there (view source is fine).
Then see if your event is firing: put an alert inside the (presumably) click handler. See if your css-changing function is actually firing.
Then see if your css-changing function has a handle on the object. Try something like
alert(this.tagName)(ore.tagName, or however else you might have a handle on the element to show/hide).Let us know how those go.