diff --git a/examples/geographic.html b/examples/geographic.html
index 2418468a4f..77349d450d 100644
--- a/examples/geographic.html
+++ b/examples/geographic.html
@@ -13,6 +13,8 @@ resources:
   - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
   - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
 ---
-<div id="map" class="map"><div id="popup"></div></div>
+<div id="map" class="map">
+  <div id="popup"></div>
+</div>
 <div id="info"></div>
 
diff --git a/examples/geographic.js b/examples/geographic.js
index d44a81c39a..61ea219cd9 100644
--- a/examples/geographic.js
+++ b/examples/geographic.js
@@ -68,9 +68,11 @@ map.on('click', function (event) {
     const coordinate = feature.getGeometry().getCoordinates();
     popup.setPosition(coordinate);
     $(element).popover({
-      placement: 'top',
+      container: element.parentElement,
       html: true,
+      sanitize: false,
       content: formatCoordinate(coordinate),
+      placement: 'top',
     });
     $(element).popover('show');
   } else {