OpenLayers Mouseposition as Tooltip at current mouseposition

HTML

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<div id="tooltip"></div>
 <div id="map"></div>

CSS

html,body{
 width:100%; height:100%;
 margin:0px; padding:0px;
 }
 #map{
 width:100%; height:100%;
 margin:0px; padding:0px;
 }
 #tooltip
 {
 position:absolute;
 background:white;
 z-Index:1000;
 padding:5px;
 border-radius:5px;
 border: 1px solid grey;
 }

JavaScript

var WGS84 = new OpenLayers.Projection("EPSG:4326");    
 var google_mercator = new OpenLayers.Projection("EPSG:900913");    

 map = new OpenLayers.Map ("map");
 var mapextent = 
 new OpenLayers.Bounds(-123.17341, 49.24343, -123.06183, 49.29899).transform(WGS84, google_mercator);

 //base layers
 var openstreetmap = new OpenLayers.Layer.OSM();
 

 map.addLayer(openstreetmap);
 map.zoomToExtent(mapextent);
 
 map.events.register("mousemove", map, function (e) {
    var position = map.getLonLatFromViewPortPx(e.xy);
     position=position.transform(google_mercator,WGS84);
    OpenLayers.Util.getElement("tooltip").innerHTML = "<label>Latitude: " + position.lat + "</label><br/><label>Longitude: " + position.lon + "</label>";
	$("#tooltip").css({position:"absolute", left:e.x+15,top:e.y});
});