Mouse cursor coordinates over image:
not working

Question

thanks to the suggestions I received here, I cleaned up my code and I'm now using pure jQuery. I made slight edits to a script I found here and I've got this:

window.onload = function(){

    var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];

$( 'img' ).
    each(function () {
        var pos = $( this ).position(),
            top = pos.top,
            left = pos.left,
            width = $( this ).width(),
            height = $( this ).height(); 
        $( this ).
            mousemove(function ( e ) {
                var x = e.pageX - left,
                    y = e.pageY - top;

                $( tooltip ).text( 'x = ' + x + ', y = ' + y ).css({
                    left: e.clientX + 10,
                    top: e.clientY + 10
                }).show();
            }).
            mouseleave(function () {
                $( tooltip ).hide();
            }); 

    });

};

I have a problem: I tried changing one line of my code to:

$( tooltip ).text( 'x = ' + x + '<br/> y = ' + y ).css({

but it does not work. Instead of breaking the line, I get this:

line break not working

If you want to add HTML to your tooltip, you need to use `.html()`, not `.text()`. — jackwanders, Jun 28 '12 at 13:05

score 2 · Accepted Answer · answered Jun 28 '12 at 13:06

2

change:

$( tooltip ).text( 'x = ' + x + '<br/> y = ' + y ).css({

to:

$( tooltip ).html( 'x = ' + x + '<br/> y = ' + y ).css({

answered Jun 28 '12 at 13:06

roev

1,267
2
16
28

Thanks a lot Roev! I'll accept your answer and edit the question so that there is only one question, then I'll open another question. – Davide Jun 28 '12 at 13:11
Done. Now my question only contains one topic. – Davide Jun 28 '12 at 13:14

Mouse cursor coordinates over image:
not working

1 Answers1

Linked

Mouse cursor coordinates over image: not working

1 Answers1

Linked

Mouse cursor coordinates over image:
not working