diff --git a/examples/synthetic-points.html b/examples/synthetic-points.html
index a63999bc9c..972dd161d8 100644
--- a/examples/synthetic-points.html
+++ b/examples/synthetic-points.html
@@ -43,6 +43,8 @@
 
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=synthetic-points" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
diff --git a/examples/synthetic-points.js b/examples/synthetic-points.js
index 32003cccfa..2036efc48f 100644
--- a/examples/synthetic-points.js
+++ b/examples/synthetic-points.js
@@ -53,10 +53,25 @@ var popup = new ol.Overlay({
 var map = new ol.Map({
   layers: [vector],
   renderer: ol.RendererHint.CANVAS,
-  target: 'map',
+  target: document.getElementById('map'),
   view: new ol.View2D({
     center: [0, 0],
     zoom: 2
   }),
   overlays: [popup]
 });
+
+$(map.getViewport()).on('mousemove', function(e) {
+  var pixel = map.getEventPixel(e.originalEvent);
+
+  var hit = false;
+  map.forEachFeatureAtPixel(pixel, function(feature) {
+    hit = true;
+  });
+
+  if (hit) {
+    map.getTarget().style.cursor = 'pointer';
+  } else {
+    map.getTarget().style.cursor = '';
+  }
+});