Mouse cursor coordinates over image: <br/> not working
<p>thanks to the suggestions I received <a href="http://stackoverflow.com/questions/11235664/overlay-showing-mouse-cursor-coordinates-relative-to-an-image-when-mouse-cursor">here</a>, I cleaned up my code and I'm now using pure jQuery. I made slight edits to a script I found <a href="http://stackoverflow.com/questions/7414984/how-could-i-display-x-y-coordinates-on-image-in-real-time-to-the-user-when-the">here</a> and I've got this:</p>

<pre><code>window.onload = function(){

    var tooltip = $( '&lt;div id="tooltip"&gt;' ).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();
            }); 

    });

};
</code></pre>

<p>I have a problem: I tried changing one line of my code to:</p>

<pre><code>$( tooltip ).text( 'x = ' + x + '&lt;br/&gt; y = ' + y ).css({
</code></pre>

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

<p><img src="http://i.stack.imgur.com/T6aYa.png" alt="line break not working"></p>
