2

I have a custom tooltip function (in jQuery) and it works great in all [major] browsers (even in IE8) except for IE7.

The doctype for the site is the newer html 5 doctype (<!DOCTYPE html>).

There are 5 links/images. IE7 shows the first tooltip correctly (minus some minor layout issues - but that can be fixed) but on the other links (images) it reverts back to the original browser tooltip for the rest.

$('#port-window a').hover(function() {
        var tip = $(this).attr('title');
        $(this).attr('title','');
        $(this).append("<div id='tooltip'>"+ tip +"</div>");
        $("#tooltip")
            .css("position","relative")
            .css("z-index","999")
            .fadeIn("slow");
    }, function() {
        $(this).attr('title',$('#tooltip').html());
        $(this).children('div#tooltip').remove();
    });

Html for the titles is like this:

<ul class="portfolio">
      <li>
        <div id="port-window">
            <a title="This is the title" href="[blogurl]/work/web-design-dev/website/">
                <span class="window"></span>
                <span class="gradient"></span>
                <img src="[blogurl]/portfolio-images/thumbs/image.jpg" alt="alt tag info" title="img title attr - not used" />
            </a>
        </div>
      </li>
</ul>

Can anyone shed some light on how to resolve this issue?

5
  • What are you using in the title attribute? are any errors happening?
    – Kevin B
    Oct 2, 2012 at 19:02
  • Can you please provide a working fiddle in jsfiddle.net?
    – Ortiga
    Oct 2, 2012 at 19:04
  • Hi Guys. Added html above. I'll work on the jsFiddle and provide a link soon. Don't mind the href tags - those are strictly for wordpress
    – Geoff
    Oct 2, 2012 at 19:07
  • jsfiddle.net/designer84/Xg7ru. This'll give you the general idea...
    – Geoff
    Oct 2, 2012 at 19:32
  • I am not sure this would be of much help help but while hovering over the mouse on second and third image, IE7 is not firing back the mouseover event. Try console.log('Event !') for mouseover & you'll find oout what I am saying.
    – anuj_io
    Oct 2, 2012 at 19:43

3 Answers 3

2

Check this in IE7 http://jsfiddle.net/Xg7ru/1/

The mistake which you was making was not hard to catch, you were using id #port-window 3 times in a page which is usually not a problem for CSS, but jQuery will returen the first element out of DOM with the given ID hence it was working for first picture. I am really not sure how it worked in other broswer.

I changed the HTML mark up from id='port-window' to class='port-window' and correspondingly changed the selector in JS,CSS and it seems to be working fine in IE7 for me now.

EDIT: As per specs,there can be just one DOM node for a given ID

1
  • Holy crap, how did this get past me? I've changed them to classes and it works fine now. Thanks for pointing out my idiocy
    – Geoff
    Oct 2, 2012 at 20:40
0

I think the problem might be with the .attr() method.

You might want to try using the .prop() method instead.

The two are very similar, but there are distinctions between them, and in fact most of the time .prop() is the right one to use.

More importantly, I believe there are bugs with .attr() and old versions of IE, so some things will work with .prop() that don't work with .attr(). This may be one of those scenarios.

I don't have IE7 to hand to try it out on your code, so you'll have to try it and let me know if it works.

Reference:

Hope that helps.

0

The main problem is that you have multiple id="port-window" objects. You cannot do that - one object per id. Change them to a class. I would recommend this code that works in IE7 (and change the CSS to use .port-window instead of #port-window):

<ul class="portfolio">
    <li>
        <div class="port-window">
            <a data-title="TITLE 1" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 2" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 3" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
</ul>​

The tooltip is stored in a data item (so you don't have to clear it) and it just keeps track of the new div rather than having to find it again:

$('.port-window a').hover(function() {
    $("<div id='tooltip' style='display: none; position: relative; z-index: 999;' >" +
            $(this).data('title') + "</div>")
        .insertAfter(this)
        .fadeIn("slow");
}, function() {
    $('#tooltip').remove();
});

​Working demo using your HTML (plus fixes): http://jsfiddle.net/jfriend00/LsnnH/

8
  • I can see why you would suggest that, but using the title attribute does have the advantage of graceful fallback. Granted the question is describing a somewhat less than graceful fallback, but I'm sure it could be sorted while still using title.
    – Spudley
    Oct 2, 2012 at 19:28
  • @Spudley - It just seemed silly to me to use the title attribute that you had to clear and then put back so I moved it to a data-title attribute to make it simpler. That change had nothing to do with solving the problem, but seems cleaner to me this way.
    – jfriend00
    Oct 2, 2012 at 19:30
  • .hide().css("position","relative").css("z-index","999"); You don't have to use jQuery for this rather putting them in styles for #tooltip would be more meaningful.
    – anuj_io
    Oct 2, 2012 at 19:36
  • @designer84 - Put my code in the OP's jsFiddle (with one minor HTML change) and it works in IE7: jsfiddle.net/jfriend00/LsnnH.
    – jfriend00
    Oct 2, 2012 at 19:40
  • @tea_totaler - made those changes too.
    – jfriend00
    Oct 2, 2012 at 19:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.