jquery tooltip probelm in IE8

Question

Hi guys,

i have linkbuttons inside table columns and want to display tooltip even if it is disabled..This worked fine in FF and Chrome but not in IE8 as IE8 disabled elements don't receive any events i tried this workaround

i create a span outside the linkbutton if it is disabled and find the parent of the linkbutton i.e table cell.....then clear the table cells contents,add the span to it and then add the link button to the span and apply the tooltip to the span.

but again IE8 applies the jquery generated code to the table cell as well as the span and so my tooltip generates 2 times making it appear bolder.......i don't want this.this works fine in FF and chrome

i am using the simple tooltip jquery plugin which you can find here

http://dev.mariusilie.net/content/simple-tooltip-jquery-plugin

and here my code

$(document).ready(function (){

    var $elems=$(".with-tooltip");
    $elems.each(function(){
    var state=$(this).attr("disabled");
   if(state==true || state=="disabled")
   {
      var $child=$(this);
      var newElem= $(document.createElement('span'));
      newElem.attr("title","privacy requested by owner"); 
      var parentElement=$child.parent();
      parentElement.empty();
      newElem.append($child);
      newElem.simpletooltip();
      parentElement.append(newElem);       
   }


    });



    });

you can view this problem at www.sandesh4u.com/default2.aspx

if you do a view source you will see what is the problem..

please help.i dont know much jquery...

Answer 1

I don't have IE8 to test, but I've rewritten things which changes the order of calls to empty and append - which might be enough to fix IE...

$(document).ready(function() {
    $(".with-tooltip").
        each(function() {
            var $child = $(this),
                state = $child.attr("disabled");
            if (state == true || state == "disabled") {
                $child.parent().replaceWith(
                    $('<span title="privacy requested by owner">').
                        append($child).
                        simpletooltip()
                );
            }
        });
});

(I think that state test can be simplified to if (state), but I'm not 100% sure)

Answer 2

I recommend using a different DOCTYPE to prevent such problems:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd

Answer 3

never mind....i changed the code a bit...

i found the wrap() function in jquery quite useful for adding a parent...i will post my new code here....also the bolder tip is a problem with plugin and it is something that i can live with....

thank you all for helping me on this subject

$(document).ready(function() {
    $(".with-tooltip").
        each(function() {
            var $child = $(this),
                state = $child.attr("disabled");
            if (state == true || state == "disabled") {
               $child.wrap(document.createElement("span"));
                $child.parent().attr("title","Privacy requested by owner").simpletooltip();

            }
        });
});