Home/ Questions/Q 8634693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:47:09+00:00

I have a custom tooltip function (in jQuery) and it works great in all

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0