diff --git a/examples/cartodb.js b/examples/cartodb.js
index c385fe1c5c..1b6628e430 100644
--- a/examples/cartodb.js
+++ b/examples/cartodb.js
@@ -10,17 +10,28 @@ const mapConfig = {
       'options': {
         'cartocss_version': '2.1.1',
         'cartocss': '#layer { polygon-fill: #F00; }',
-        'sql': 'select * from european_countries_e where area > 0',
       },
     },
   ],
 };
 
+function setArea(n) {
+  mapConfig.layers[0].options.sql =
+    'select * from european_countries_e where area > ' + n;
+}
+const areaSelect = document.getElementById('country-area');
+setArea(areaSelect.value);
+
 const cartoDBSource = new CartoDB({
   account: 'documentation',
   config: mapConfig,
 });
 
+areaSelect.addEventListener('change', function () {
+  setArea(this.value);
+  cartoDBSource.setConfig(mapConfig);
+});
+
 const map = new Map({
   layers: [
     new TileLayer({
@@ -32,17 +43,7 @@ const map = new Map({
   ],
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: [8500000, 8500000],
     zoom: 2,
   }),
 });
-
-function setArea(n) {
-  mapConfig.layers[0].options.sql =
-    'select * from european_countries_e where area > ' + n;
-  cartoDBSource.setConfig(mapConfig);
-}
-
-document.getElementById('country-area').addEventListener('change', function () {
-  setArea(this.value);
-});
diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js
index 71c8484980..2df217968d 100644
--- a/examples/kml-earthquakes.js
+++ b/examples/kml-earthquakes.js
@@ -69,10 +69,12 @@ const tooltip = new bootstrap.Tooltip(info, {
 });
 
 let currentFeature;
-const displayFeatureInfo = function (pixel) {
-  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
-    return feature;
-  });
+const displayFeatureInfo = function (pixel, target) {
+  const feature = target.closest('.ol-control')
+    ? undefined
+    : map.forEachFeatureAtPixel(pixel, function (feature) {
+        return feature;
+      });
   if (feature) {
     info.style.left = pixel[0] + 'px';
     info.style.top = pixel[1] + 'px';
@@ -97,9 +99,14 @@ map.on('pointermove', function (evt) {
     return;
   }
   const pixel = map.getEventPixel(evt.originalEvent);
-  displayFeatureInfo(pixel);
+  displayFeatureInfo(pixel, evt.originalEvent.target);
 });
 
 map.on('click', function (evt) {
-  displayFeatureInfo(evt.pixel);
+  displayFeatureInfo(evt.pixel, evt.originalEvent.target);
+});
+
+map.getTargetElement().addEventListener('pointerleave', function () {
+  tooltip.hide();
+  currentFeature = undefined;
 });
diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js
index 61200f32f0..38f5fd0045 100644
--- a/examples/kml-timezones.js
+++ b/examples/kml-timezones.js
@@ -93,10 +93,12 @@ const tooltip = new bootstrap.Tooltip(info, {
 });
 
 let currentFeature;
-const displayFeatureInfo = function (pixel) {
-  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
-    return feature;
-  });
+const displayFeatureInfo = function (pixel, target) {
+  const feature = target.closest('.ol-control')
+    ? undefined
+    : map.forEachFeatureAtPixel(pixel, function (feature) {
+        return feature;
+      });
   if (feature) {
     info.style.left = pixel[0] + 'px';
     info.style.top = pixel[1] + 'px';
@@ -121,9 +123,14 @@ map.on('pointermove', function (evt) {
     return;
   }
   const pixel = map.getEventPixel(evt.originalEvent);
-  displayFeatureInfo(pixel);
+  displayFeatureInfo(pixel, evt.originalEvent.target);
 });
 
 map.on('click', function (evt) {
-  displayFeatureInfo(evt.pixel);
+  displayFeatureInfo(evt.pixel, evt.originalEvent.target);
+});
+
+map.getTargetElement().addEventListener('pointerleave', function () {
+  tooltip.hide();
+  currentFeature = undefined;
 });
diff --git a/examples/reprojection-by-code.js b/examples/reprojection-by-code.js
index 2e169c1340..0e92582e2b 100644
--- a/examples/reprojection-by-code.js
+++ b/examples/reprojection-by-code.js
@@ -139,12 +139,19 @@ searchButton.onclick = function (event) {
 /**
  * Handle checkbox change events.
  */
-renderEdgesCheckbox.onchange = function () {
+function onReprojectionChange() {
   osmSource.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
-};
-showTilesCheckbox.onchange = function () {
-  debugLayer.setVisible(showTilesCheckbox.checked);
-};
-showGraticuleCheckbox.onchange = function () {
+}
+function onGraticuleChange() {
   graticule.setVisible(showGraticuleCheckbox.checked);
-};
+}
+function onTilesChange() {
+  debugLayer.setVisible(showTilesCheckbox.checked);
+}
+showGraticuleCheckbox.addEventListener('change', onGraticuleChange);
+renderEdgesCheckbox.addEventListener('change', onReprojectionChange);
+showTilesCheckbox.addEventListener('change', onTilesChange);
+
+onReprojectionChange();
+onGraticuleChange();
+onTilesChange();