From 7850e97eedcf3e7107efb43770fe5f2d2788f173 Mon Sep 17 00:00:00 2001
From: Marcus Jaschen <mjaschen@gmail.com>
Date: Fri, 14 May 2021 19:33:39 +0200
Subject: [PATCH] replace native HTML tooltip for custom POIs with Leaflet
 Tooltip (#415)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- the tooltip shows instantly when hovering a POI icon with the mouse cursor
- the content is the same as for the popup, except for the action button (“delete”) as the button isn't reachable by the mouse (the tooltip disappears when the mouse cursor leaves the icon area)
- (maybe we should add a hint to the tooltip, e.g. “Click icon for actions” (TBD))
- the tooltip is only attached to POI icons on devices without a touch interface, i. e. when `BR.Browser.touch` is `false`
- the tooltip is removed when the icon is clicked, otherwise tooltip and popup would be visible at the same time
- the tooltip is enabled again when the popup is closed
---
 js/plugin/POIMarkers.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/js/plugin/POIMarkers.js b/js/plugin/POIMarkers.js
index 6acf2e4..84f86d6 100644
--- a/js/plugin/POIMarkers.js
+++ b/js/plugin/POIMarkers.js
@@ -97,23 +97,37 @@ BR.PoiMarkers = L.Control.extend({
             markerColor: BR.conf.markerColors.poi,
         });
 
-        var content = '<p>' + BR.Util.sanitizeHTMLContent(name) + '</p>';
-        content += "<button id='remove-poi-marker' class='btn btn-secondary'><i class='fa fa-trash'></i></button>";
+        var content = BR.Util.sanitizeHTMLContent(name);
+        var contentWithAction =
+            '<p>' +
+            content +
+            '</p>' +
+            '<p><button id="remove-poi-marker" class="btn btn-secondary"><i class="fa fa-trash"></i></button></p>';
 
         var self = this;
-        var marker = L.marker(latlng, { icon: icon, draggable: true, name: name, title: name })
-            .bindPopup(content)
+        var marker = L.marker(latlng, { icon: icon, draggable: true, name: name })
+            .bindPopup(contentWithAction)
             .on('dragend', function () {
                 self.fire('update');
             })
             .on('popupopen', function () {
+                this.unbindTooltip();
                 $('#remove-poi-marker').on('click', function (e) {
                     self.markersLayer.removeLayer(marker);
                     e.preventDefault();
                     self.fire('update');
                 });
             })
+            .on('popupclose', function () {
+                if (false === BR.Browser.touch) {
+                    this.bindTooltip(content);
+                }
+            })
             .addTo(this.markersLayer);
+
+        if (false === BR.Browser.touch) {
+            marker.bindTooltip(content);
+        }
     },
 
     clear: function () {