Tooltip: process pointer events itself

Now it's possible to attach listeners to tooltip
Leaflet · Nov 1, 2021 · bba7672 · bba7672
1 parent 7ef9ae9
commit bba7672
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 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/Tooltip.js b/src/layer/Tooltip.js
@@ -70,9 +70,7 @@ export var Tooltip = DivOverlay.extend({
 
 		if (this.options.interactive) {
 			DomUtil.addClass(this._container, 'leaflet-interactive');
-			if (this._source) {
-				this._source.addInteractiveTarget(this._container);
-			}
+			this.addInteractiveTarget(this._container);
 		}
 
 		// @namespace Map
@@ -82,6 +80,8 @@ export var Tooltip = DivOverlay.extend({
 		map.fire('tooltipopen', {tooltip: this});
 
 		if (this._source) {
+			this.addEventParent(this._source);
+
 			// @namespace Layer
 			// @section Tooltip events
 			// @event tooltipopen: TooltipEvent
@@ -95,9 +95,7 @@ export var Tooltip = DivOverlay.extend({
 
 		if (this.options.interactive) {
 			DomUtil.removeClass(this._container, 'leaflet-interactive');
-			if (this._source) {
-				this._source.removeInteractiveTarget(this._container);
-			}
+			this.removeInteractiveTarget(this._container);
 		}
 
 		// @namespace Map
@@ -107,6 +105,8 @@ export var Tooltip = DivOverlay.extend({
 		map.fire('tooltipclose', {tooltip: this});
 
 		if (this._source) {
+			this.removeEventParent(this._source);
+
 			// @namespace Layer
 			// @section Tooltip events
 			// @event tooltipclose: TooltipEvent