Use popover from Bootstrap

examples/overlay.html

@@ -8,13 +8,6 @@
     <link rel="stylesheet" href="examples.css" type="text/css">
     <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
-      .overlay {
-        display: none;
-        font-size: 10pt;
-      }
-      .ol-overlaycontainer .overlay {
-        display: block;
-      }
       #vienna {
         text-decoration: none;
         color: white;
@@ -22,44 +15,8 @@
         font-weight: bold;
         text-shadow: black 0.1em 0.1em 0.2em;
       }
-      #popup {
-        width: 170px;
-        margin-left: -92px;
-        margin-bottom: 12px;
-        border-radius: 5px;
-        padding: 5px;
-      }
-
-      /* Popup CSS generated with http://cssarrowplease.com/ */
-
-      .arrow_box {
-        position: relative;
-        background: #88b7d5;
-        border: 2px solid #c2e1f5;
-      }
-      .arrow_box:after, .arrow_box:before {
-        top: 100%;
-        border: solid transparent;
-        content: " ";
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-      }
-
-      .arrow_box:after {
-        border-color: rgba(136, 183, 213, 0);
-        border-top-color: #88b7d5;
-        border-width: 10px;
-        left: 50%;
-        margin-left: -10px;
-      }
-      .arrow_box:before {
-        border-color: rgba(194, 225, 245, 0);
-        border-top-color: #c2e1f5;
-        border-width: 13px;
-        left: 50%;
-        margin-left: -13px;
+      .popover-content {
+        min-width: 180px;
       }
     </style>
     <title>Overlay example</title>
@@ -107,9 +64,11 @@
       <!-- Clickable label for Vienna -->
       <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
       <!-- Popup -->
-      <div class="overlay arrow_box" id="popup"></div>
+      <div id="popup" title="Welcome to ol3"></div>
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=overlay" type="text/javascript"></script>
     <script src="social-links.js" type="text/javascript"></script>
 

examples/overlay.js

@@ -36,10 +36,18 @@ var popup = new ol.Overlay({
   element: document.getElementById('popup')
 });
 map.addEventListener('click', function(evt) {
+  var element = popup.getElement();
   var coordinate = evt.getCoordinate();
-  popup.getElement().innerHTML =
-      'Welcome to ol3. The location you clicked was<br>' +
-      ol.Coordinate.toStringHDMS(ol.projection.transform(
-          coordinate, 'EPSG:3857', 'EPSG:4326'));
+  var hdms = ol.Coordinate.toStringHDMS(ol.projection.transform(
+      coordinate, 'EPSG:3857', 'EPSG:4326'));
+
+  $(element).popover('destroy');
   popup.setPosition(coordinate);
+  $(element).popover({
+    placement: 'top',
+    animation: false,
+    html: true,
+    content: '<p>The location you clicked was:</p><code>' + hdms + '</code>'
+  });
+  $(element).popover('show');
 });