diff --git a/umap/static/umap/js/modules/ui/base.js b/umap/static/umap/js/modules/ui/base.js
index 725e3c9b..c2a91024 100644
--- a/umap/static/umap/js/modules/ui/base.js
+++ b/umap/static/umap/js/modules/ui/base.js
@@ -33,8 +33,9 @@ export class Positioned {
   anchorBottom(el) {
     this.container.className = 'tooltip-bottom'
     const coords = this.getPosition(el)
+    const selfCoords = this.getPosition(this.container)
     this.setPosition({
-      left: coords.left,
+      left: coords.left + coords.width / 2 - selfCoords.width / 2,
       top: coords.bottom + 11,
     })
   }
diff --git a/umap/static/umap/js/modules/ui/tooltip.js b/umap/static/umap/js/modules/ui/tooltip.js
index 88a859f9..579afc09 100644
--- a/umap/static/umap/js/modules/ui/tooltip.js
+++ b/umap/static/umap/js/modules/ui/tooltip.js
@@ -1,24 +1,29 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 import { Positioned } from './base.js'
+import * as Utils from '../utils.js'
 
 export default class Tooltip extends Positioned {
   constructor(parent) {
     super()
     this.parent = parent
-    this.container = DomUtil.create('div', 'with-transition', this.parent)
-    this.container.id = 'umap-tooltip-container'
+    this.container = Utils.loadTemplate(
+      '<div id="umap-tooltip-container" class="with-transition"></div>'
+    )
+    this.parent.appendChild(this.container)
     DomEvent.disableClickPropagation(this.container)
-    DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
-    DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
-    DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
+    this.container.addEventListener('contextmenu', (event) => event.stopPropagation()) // Do not activate our custom context menu.
+    this.container.addEventListener('wheel', (event) => event.stopPropagation())
+    this.container.addEventListener('MozMousePixelScroll', (event) =>
+      event.stopPropagation()
+    )
   }
 
   open(opts) {
     const showIt = () => {
+      this.container.innerHTML = Utils.escapeHTML(opts.content)
+      this.parent.classList.add('umap-tooltip')
       this.openAt(opts)
-      L.DomUtil.addClass(this.parent, 'umap-tooltip')
-      this.container.innerHTML = U.Utils.escapeHTML(opts.content)
     }
     this.TOOLTIP_ID = window.setTimeout(L.bind(showIt, this), opts.delay || 0)
     const id = this.TOOLTIP_ID
@@ -26,7 +31,7 @@ export default class Tooltip extends Positioned {
       this.close(id)
     }
     if (opts.anchor) {
-      L.DomEvent.once(opts.anchor, 'mouseout', closeIt)
+      opts.anchor.addEventListener('mouseout', closeIt, { once: true })
     }
     if (opts.duration !== Number.POSITIVE_INFINITY) {
       window.setTimeout(closeIt, opts.duration || 3000)
@@ -41,6 +46,6 @@ export default class Tooltip extends Positioned {
     this.container.className = ''
     this.container.innerHTML = ''
     this.setPosition({})
-    L.DomUtil.removeClass(this.parent, 'umap-tooltip')
+    this.parent.classList.remove('umap-tooltip')
   }
 }