Question

function tip(evt,s){
        $('p#vtip').show();

        xOffset = -10; // x distance from mouse
        yOffset = 10; // y distance from mouse 
        top = (evt.pageY + yOffset); 
        left = (evt.pageX + xOffset);

        var str = $(s, "> #content").html();
        $('p#vtip #content').html(str);
        $('p#vtip').css("top", top+"px").css("left", left+"px").fadeIn("slow");
}

In Firefox everything is OK.

However, in Chrome, and Internet Explorer 8, it is always in the bottom:

This is HTML:

<div>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br>
    </div>

<p id="vtip" style="position:absolute"><img id="vtipArrow" src="vtip_arrow.png" />testtest<span class="content"></span></p>

Answer 1

If you’re using jQuery, you may want to take a different approach for your event handling.

First, change id="content" to class="content". IDs must be unique, and will cause problems if you refer to them more than once in your HTML. Classes can be used multiple times.

Second, if you’re using jQuery, you might as well have it take care of assigning event handlers. Notice that I removed your ‘onmouseover’ statements.

I also gave an ID to the div that contains the spans.

<div id="container">
     <span>程序错误<div class ="content">good</div></span><br>
     <span>程序错误<div class ="content">good</div></span><br>
     <span>程序错误<div class ="content">good</div></span><br>
     <span>程序错误<div class ="content">good</div></span><br>

    </div>

Next, in your jQuery javascript, assign the ‘mouseover’ event like this:

$('document').ready(function() {

    $('#container span').bind('mouseover', function(evt) {
        $('p#vtip').show();

        var xOffset = -10; // x distance from mouse
        var yOffset = 10; // y distance from mouse 
        var top = (evt.pageY + yOffset); 
        var left = (evt.pageX + xOffset);

        var str = $(this).children('.content').html();
        $('p#vtip .content').html(str);
        $('p#vtip').css({top: top}).css({left: left}).fadeIn("slow");
    });

});

This will assign the mouseover event to all spans that are a child of #container. You refer back to the element with the handler via ‘this’, or $(this) if you want to use jQuery functions.