Merge pull request #1738 from ChantsovaEkaterina/features/map-tooltip-appearance

Add option to show tooltip on hover

ui/src/app/widget/lib/google-map.js

@@ -266,14 +266,23 @@ export default class TbGoogleMap {
             content: ''
         });
         var map = this;
-        marker.addListener('click', function() {
+        if (settings.displayTooltipAction == 'hover') {
-            if (settings.autocloseTooltip) {
+            marker.addListener('mouseover', function () {
-                map.tooltips.forEach((tooltip) => {
+                popup.open(this.map, marker);
-                    tooltip.popup.close();
+            });
-                });
+            marker.addListener('mouseout', function () {
-            }
+                popup.close();
-            popup.open(this.map, marker);
+            });
-        });
+        } else {
+            marker.addListener('click', function() {
+                if (settings.autocloseTooltip) {
+                    map.tooltips.forEach((tooltip) => {
+                        tooltip.popup.close();
+                    });
+                }
+                popup.open(this.map, marker);
+            });
+        }
         this.tooltips.push( {
             markerArgs: markerArgs,
             popup: popup,

ui/src/app/widget/lib/image-map.js

@@ -354,6 +354,15 @@ export default class TbImageMap {
         var popup = L.popup();
         popup.setContent('');
         marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
+        if (settings.displayTooltipAction == 'hover') {
+            marker.off('click');
+            marker.on('mouseover', function () {
+                this.openPopup();
+            });
+            marker.on('mouseout', function () {
+                this.closePopup();
+            });
+        }
         this.tooltips.push( {
             markerArgs: markerArgs,
             popup: popup,

ui/src/app/widget/lib/map-widget2.js

@@ -156,8 +156,9 @@ export default class TbMapWidgetV2 {
 
 		this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
 		this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
+		this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click";
 		this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
-		this.locationSettings.showPolygon = this.ctx.settings.showPolygon !== false;
+		this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
 		this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
 		this.locationSettings.label = this.ctx.settings.label || "${entityName}";
 		this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569";
@@ -978,6 +979,11 @@ const commonMapSettingsSchema =
 					"type": "boolean",
 					"default": true
 				},
+				"showTooltipAction": {
+					"title": "Action for displaying the tooltip",
+					"type": "string",
+					"default": "click"
+				},
 				"autocloseTooltip": {
 					"title": "Auto-close tooltips",
 					"type": "boolean",
@@ -1095,6 +1101,21 @@ const commonMapSettingsSchema =
 				"type": "javascript"
 			},
 			"showTooltip",
+			{
+				"key": "showTooltipAction",
+				"type": "rc-select",
+				"multiple": false,
+				"items": [
+					{
+						"value": "click",
+						"label": "Show tooltip on click (Default)"
+					},
+					{
+						"value": "hover",
+						"label": "Show tooltip on hover"
+					}
+				]
+			},
 			"autocloseTooltip",
 			{
 				"key": "tooltipPattern",
@@ -1235,6 +1256,11 @@ const imageMapSettingsSchema =
 					"type": "boolean",
 					"default": true
 				},
+				"showTooltipAction": {
+					"title": "Action for displaying the tooltip",
+					"type": "string",
+					"default": "click"
+				},
 				"autocloseTooltip": {
 					"title": "Auto-close tooltips",
 					"type": "boolean",
@@ -1329,6 +1355,21 @@ const imageMapSettingsSchema =
 				"type": "javascript"
 			},
 			"showTooltip",
+			{
+				"key": "showTooltipAction",
+				"type": "rc-select",
+				"multiple": false,
+				"items": [
+					{
+						"value": "click",
+						"label": "Show tooltip on click (Default)"
+					},
+					{
+						"value": "hover",
+						"label": "Show tooltip on hover"
+					}
+				]
+			},
 			"autocloseTooltip",
 			{
 				"key": "tooltipPattern",

ui/src/app/widget/lib/openstreet-map.js

@@ -168,6 +168,15 @@ export default class TbOpenStreetMap {
 		var popup = L.popup();
 		popup.setContent('');
 		marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
+		if (settings.displayTooltipAction == 'hover') {
+			marker.off('click');
+			marker.on('mouseover', function () {
+				this.openPopup();
+			});
+			marker.on('mouseout', function () {
+				this.closePopup();
+			});
+		}
 		this.tooltips.push({
 			markerArgs: markerArgs,
 			popup: popup,

ui/src/app/widget/lib/tencent-map.js

@@ -278,15 +278,25 @@ export default class TbTencentMap {
 			map: this.map
 		});
 		var map = this;
-		qq.maps.event.addListener(marker, 'click', function () {
+		if (settings.displayTooltipAction == 'hover') {
-			if (settings.autocloseTooltip) {
+			qq.maps.event.addListener(marker, 'mouseover', function () {
-				map.tooltips.forEach((tooltip) => {
+				popup.open();
-					tooltip.popup.close();
+				popup.setPosition(marker);
-				});
+			});
-			}
+			qq.maps.event.addListener(marker, 'mouseout', function () {
-			popup.open();
+				popup.close();
-			popup.setPosition(marker);
+			});
-		});
+		} else {
+			qq.maps.event.addListener(marker, 'click', function () {
+				if (settings.autocloseTooltip) {
+					map.tooltips.forEach((tooltip) => {
+						tooltip.popup.close();
+					});
+				}
+				popup.open();
+				popup.setPosition(marker);
+			});
+		}
 		map.tooltips.push({
 			markerArgs: markerArgs,
 			popup: popup,