Make tooltips interactive themselves (#7532)

* Tooltip: process pointer events itself Now it's possible to attach listeners to tooltip * DivOverlay: inherit from Interactive Layer * DivOverlay: process 'interactive' option Co-authored-by: Vladimir Agafonkin <agafonkin@gmail.com>
Leaflet · Feb 7, 2022 · dfff770 · dfff770
1 parent 662388b
commit dfff770
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 23 deletions.
diff --git a/spec/suites/layer/TooltipSpec.js b/spec/suites/layer/TooltipSpec.js
@@ -58,9 +58,29 @@ describe('Tooltip', function () {
 		expect(map.hasLayer(layer._tooltip)).to.be(false);
 	});
 
+	it("is not interactive by default", function () {
+		var layer = new L.Marker(center).addTo(map);
+		var spy = sinon.spy();
+
+		layer.bindTooltip('Tooltip', {permanent: true});
+		layer._tooltip.on('click', spy);
+		happen.click(layer._tooltip._container);
+		expect(spy.called).to.be(false);
+	});
+
 	it("can be made interactive", function () {
 		var layer = new L.Marker(center).addTo(map);
 		var spy = sinon.spy();
+
+		layer.bindTooltip('Tooltip', {permanent: true, interactive: true});
+		layer._tooltip.on('click', spy);
+		happen.click(layer._tooltip._container);
+		expect(spy.calledOnce).to.be(true);
+	});
+
+	it("events are propagated to bound layer", function () {
+		var layer = new L.Marker(center).addTo(map);
+		var spy = sinon.spy();
 		layer.on('click', spy);
 
 		layer.bindTooltip('Tooltip', {permanent: true, interactive: true});
@@ -291,11 +311,14 @@ describe('Tooltip', function () {
 	});
 
 	it("map.openTooltip considers interactive option", function () {
-		if (!window.getComputedStyle) { this.skip(); } // IE9+
-
-		var tooltip = L.tooltip({interactive: true}).setContent('Tooltip');
+		var spy = sinon.spy();
+		var tooltip = L.tooltip({interactive: true, permanent: true})
+		  .setContent('Tooltip')
+		  .on('click', spy);
 		map.openTooltip(tooltip, center);
-		expect(getComputedStyle(tooltip._container).pointerEvents).to.equal('auto');
+
+		happen.click(tooltip._container);
+		expect(spy.calledOnce).to.be(true);
 	});
 
 	it("can call closeTooltip while not on the map", function () {

diff --git a/src/layer/DivOverlay.js b/src/layer/DivOverlay.js
@@ -8,7 +8,7 @@ import * as DomUtil from '../dom/DomUtil';
 
 /*
  * @class DivOverlay
- * @inherits Layer
+ * @inherits Interactive layer
  * @aka L.DivOverlay
  * Base model for L.Popup and L.Tooltip. Inherit from it for custom overlays like plugins.
  */
@@ -19,6 +19,10 @@ export var DivOverlay = Layer.extend({
 	// @section
 	// @aka DivOverlay options
 	options: {
+		// @option interactive: Boolean = false
+		// If true, the popup/tooltip will listen to the mouse events.
+		interactive: false,
+
 		// @option offset: Point = Point(0, 0)
 		// The offset of the overlay position.
 		offset: [0, 0],
@@ -101,6 +105,11 @@ export var DivOverlay = Layer.extend({
 		}
 
 		this.bringToFront();
+
+		if (this.options.interactive) {
+			DomUtil.addClass(this._container, 'leaflet-interactive');
+			this.addInteractiveTarget(this._container);
+		}
 	},
 
 	onRemove: function (map) {
@@ -110,6 +119,11 @@ export var DivOverlay = Layer.extend({
 		} else {
 			DomUtil.remove(this._container);
 		}
+
+		if (this.options.interactive) {
+			DomUtil.removeClass(this._container, 'leaflet-interactive');
+			this.removeInteractiveTarget(this._container);
+		}
 	},
 
 	// @namespace DivOverlay

diff --git a/src/layer/Tooltip.js b/src/layer/Tooltip.js
@@ -54,10 +54,6 @@ export var Tooltip = DivOverlay.extend({
 		// If true, the tooltip will follow the mouse instead of being fixed at the feature center.
 		sticky: false,
 
-		// @option interactive: Boolean = false
-		// If true, the tooltip will listen to the feature events.
-		interactive: false,
-
 		// @option opacity: Number = 0.9
 		// Tooltip container opacity.
 		opacity: 0.9
@@ -67,20 +63,15 @@ export var Tooltip = DivOverlay.extend({
 		DivOverlay.prototype.onAdd.call(this, map);
 		this.setOpacity(this.options.opacity);
 
-		if (this.options.interactive) {
-			DomUtil.addClass(this._container, 'leaflet-interactive');
-			if (this._source) {
-				this._source.addInteractiveTarget(this._container);
-			}
-		}
-
 		// @namespace Map
 		// @section Tooltip events
 		// @event tooltipopen: TooltipEvent
 		// Fired when a tooltip is opened in the map.
 		map.fire('tooltipopen', {tooltip: this});
 
 		if (this._source) {
+			this.addEventParent(this._source);
+
 			// @namespace Layer
 			// @section Tooltip events
 			// @event tooltipopen: TooltipEvent
@@ -92,20 +83,15 @@ export var Tooltip = DivOverlay.extend({
 	onRemove: function (map) {
 		DivOverlay.prototype.onRemove.call(this, map);
 
-		if (this.options.interactive) {
-			DomUtil.removeClass(this._container, 'leaflet-interactive');
-			if (this._source) {
-				this._source.removeInteractiveTarget(this._container);
-			}
-		}
-
 		// @namespace Map
 		// @section Tooltip events
 		// @event tooltipclose: TooltipEvent
 		// Fired when a tooltip in the map is closed.
 		map.fire('tooltipclose', {tooltip: this});
 
 		if (this._source) {
+			this.removeEventParent(this._source);
+
 			// @namespace Layer
 			// @section Tooltip events
 			// @event tooltipclose: TooltipEvent