jQuery custom tooltip (not ui) not working in IE7 only

Question

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?

What are you using in the title attribute? are any errors happening? — Kevin B, Oct 02 '12 at 19:02
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 02 '12 at 19:07
http://jsfiddle.net/designer84/Xg7ru/. This'll give you the general idea... — Geoff, Oct 02 '12 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 02 '12 at 19:43

score 2 · Accepted Answer · answered Oct 02 '12 at 19:52

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

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 02 '12 at 20:40

jfriend00 · Answer 2 · 2012-10-02T20:02:35.057

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/

edited Oct 02 '12 at 20:02

answered Oct 02 '12 at 19:16

jfriend00

683,504
96
985
979

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 02 '12 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 02 '12 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 02 '12 at 19:36
@designer84 - Put my code in the OP's jsFiddle (with one minor HTML change) and it works in IE7: http://jsfiddle.net/jfriend00/LsnnH/. – jfriend00 Oct 02 '12 at 19:40
@tea_totaler - made those changes too. – jfriend00 Oct 02 '12 at 19:42
@designer84 - OK, now that we can see the OP's HTML for multiple items, the main problem was multiple objects with the same ID. I've changed my answer to fix that issue also. – jfriend00 Oct 02 '12 at 19:47
LOL I just found out about it. – anuj_io Oct 02 '12 at 19:54
Thanks guys. I feel dumb now ;) – Geoff Oct 02 '12 at 20:42

score 0 · Answer 3 · edited May 23 '17 at 11:43

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.

jQuery custom tooltip (not ui) not working in IE7 only

3 Answers3