From 9d9b726af5004b5c2450933019dccf039014e396 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 27 Oct 2023 18:45:58 +0200 Subject: [PATCH] Cancel tooltip on mouseout Prevent a tooltip to be displayed if the user has moved out the mouse from the anchor. --- umap/static/umap/js/umap.controls.js | 2 +- umap/static/umap/js/umap.ui.js | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 4a81cd93..a024b7f8 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -1736,7 +1736,7 @@ L.U.Editable = L.Editable.extend({ }, drawingTooltip: function (e) { - if (e.layer instanceof L.Marker && e.type != 'editable:drawing:move') { + if (e.layer instanceof L.Marker && e.type == 'editable:drawing:start') { this.map.ui.tooltip({ content: L._('Click to add a marker') }) } if (!(e.layer instanceof L.Polyline)) { diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js index 30386915..501ec3d2 100644 --- a/umap/static/umap/js/umap.ui.js +++ b/umap/static/umap/js/umap.ui.js @@ -135,8 +135,6 @@ L.U.UI = L.Evented.extend({ }, tooltip: function (opts) { - this.TOOLTIP_ID = Math.random() - const id = this.TOOLTIP_ID function showIt() { if (opts.anchor && opts.position === 'top') { this.anchorTooltipTop(opts.anchor) @@ -150,10 +148,11 @@ L.U.UI = L.Evented.extend({ L.DomUtil.addClass(this.parent, 'umap-tooltip') this._tooltip.innerHTML = opts.content } + this.TOOLTIP_ID = window.setTimeout(L.bind(showIt, this), opts.delay || 0) + const id = this.TOOLTIP_ID function closeIt() { this.closeTooltip(id) } - window.setTimeout(L.bind(showIt, this), opts.delay || 0) if (opts.anchor) { L.DomEvent.once(opts.anchor, 'mouseout', closeIt, this) } @@ -200,6 +199,9 @@ L.U.UI = L.Evented.extend({ }, closeTooltip: function (id) { + // Clear timetout even if a new tooltip has been added + // in the meantime. Eg. after a mouseout from the anchor. + window.clearTimeout(id) if (id && id !== this.TOOLTIP_ID) return this._tooltip.className = '' this._tooltip.innerHTML = ''