Rrose marker popup

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://rawgithub.com/erictheise/rrose/master/leaflet.rrose.css">
<script src="http://rawgithub.com/erictheise/rrose/master/rrose-src.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    width: 700px;
    height: 500px;
    padding: 0;
    margin: 0;
}

JavaScript

var zoom = 8;
var map = L.map('map', { attributionControl: false }).setView([50.846667, 4.354722], zoom);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map);

var marker1 = L.marker([51.5666667, 4.8]);
var rrose1 = new L.Rrose({ autoPan: false }).setContent('To Far North');
marker1.bindPopup(rrose1);
marker1.on('mouseover', function(e) {
    e.target.openPopup();
});
map.addLayer(marker1);

var marker2 = L.marker([50.846667, 4.354722]);
var rrose2 = new L.Rrose({ autoPan: false }).setContent('This Is OK');
marker2.bindPopup(rrose2);
marker2.on('mouseover', function(e) {
    e.target.openPopup();
});
map.addLayer(marker2);