Question

The following code is to generate tooltips on hover… hover over some text with the following code e.g.

span class="ttip" rel="#tip_1" 

It then pulls the div with the id of tip_1 from an external file (tooltips.html). Trouble is in IE 7 & 8 – it just loads the tooltip box – not the content inside… (Like it can’t communicate with the tooltips.html file)

Any ideas please?

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.ttip').hover(function(){
            var offset = jQuery(this).offset();
            console.log(offset)

            var width = jQuery(this).outerWidth();
            var tooltipId = jQuery(this).attr("rel");

            jQuery('#tooltip-cont').empty().load('/tooltips.html ' + tooltipId).fadeIn(500);
            jQuery('#tooltip-cont').css({ top:offset.top, left:offset.left + width + 10 }).show();
        }, function(){
            jQuery('#tooltip-cont').stop(true, true).fadeOut(200);
        });
    });
</script>

Answer 1

Unless this is a transposition error while posting your question, you have an extra space in your URL (after .html):

.load('/tooltips.html ' + tooltipId)

should probably be:

.load('/tooltips.html' + tooltipId)

Unrelated: you have a lot of inefficient re-querying going on in that code. You should store references to already queried elements, and use the chaining nature of jQuery where possible.