Why is my code OK in Firefox, but not in Chrome and Internet Explorer 8?

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

You've got problems because you've used the same ID multiple times. This isn't valid so behaviour is undefined. Also you've got way more markup than you need. Lastly I would use an existing tooltip plugin rather than rolling your own but if you're so inclined so do this, I would start with something like this:

<dl class="tips">
  <dt>程序错误</dt><dd>good</dd>
  <dt>程序错误</dt><dd>good</dd>
  <dt>程序错误</dt><dd>good</dd>
  <dt>程序错误</dt><dd>good</dd>
  <dt>程序错误</dt><dd>good</dd>
  <dt>程序错误</dt><dd>good</dd>
</div>

with CSS:

dl.tips dt { display: inline; }
dl.tips dd { display: none; position: absolute; }

and Javascript:

$(function() {
  $("dl.tips dd").hover(function(evt) {
    $(this).next().show().css({
      top: evt.pageY - 10,
      left:} evt.pageX + 10
    });
  }, function() {
    $(this).next().hide();
  });
});

Now that will only set the location of the tooltip once. If you want it to track the mouse movement use mousemove() and mouseout() instead of hover() .

This methods avoids unnecessary (and typically expensive) DOM manipulation and is far more unobtrusive in the markup only marking the outer container with a class.

Answer 2

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 span s.

<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.

Answer 3

pageX and pageY are not standard properties of the event object. They are Firefox extensions and won't work elsewhere.

However jQuery fixes up mouse event objects to add these non-standard properties when your event handler is bound from a jQuery method. That's not the case here because you are using inline event handler attributes. Get rid of those.

Additionally you have <div> inside <span> which is invalid, and multiple elements with the same id , which is invalid and often won't work, and you're missing var declarations inside your function which could cause problems.

<style>
    #tipped .content {
        position: absolute; background: white; border: solid cyan 1px;
        /* other styling to make it a bubble */
    }
</style>
<div id="tipped">
    <div>程序错误<div class="content">good</div></div>
    <div>程序错误<div class="content">good</div></div>
    <div>程序错误<div class="content">good</div></div>
    <div>程序错误<div class="content">good</div></div>
</div>
<script type="text/javascript">
    $('#tipped>div .content').hide();
    $('#tipped>div').hover(function(event) {
        $(this).find('.content').css({left: event.pageX-10, top: event.pageY+10}).fadeIn('slow');
    }, function() {
        $(this).find('.content').hide();
    });
</script>