replace native HTML tooltip for custom POIs with Leaflet Tooltip (#415)

- 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

@@ -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 () {