diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index 6acbc3e988..83163c2d58 100644 --- a/ui/src/app/widget/lib/google-map.js +++ b/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.autocloseTooltip) { - map.tooltips.forEach((tooltip) => { - tooltip.popup.close(); - }); - } - popup.open(this.map, marker); - }); + if (settings.displayTooltipAction == 'hover') { + marker.addListener('mouseover', function () { + popup.open(this.map, marker); + }); + marker.addListener('mouseout', function () { + popup.close(); + }); + } 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, diff --git a/ui/src/app/widget/lib/image-map.js b/ui/src/app/widget/lib/image-map.js index 17f0b13af3..3b47be27ec 100644 --- a/ui/src/app/widget/lib/image-map.js +++ b/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, diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index fac3de7aa2..fbba511859 100644 --- a/ui/src/app/widget/lib/map-widget2.js +++ b/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", diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index c7d253ea3f..15b69fd87f 100644 --- a/ui/src/app/widget/lib/openstreet-map.js +++ b/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, diff --git a/ui/src/app/widget/lib/tencent-map.js b/ui/src/app/widget/lib/tencent-map.js index 6c3f5b1921..b2de679439 100644 --- a/ui/src/app/widget/lib/tencent-map.js +++ b/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.autocloseTooltip) { - map.tooltips.forEach((tooltip) => { - tooltip.popup.close(); - }); - } - popup.open(); - popup.setPosition(marker); - }); + if (settings.displayTooltipAction == 'hover') { + qq.maps.event.addListener(marker, 'mouseover', function () { + popup.open(); + popup.setPosition(marker); + }); + qq.maps.event.addListener(marker, 'mouseout', function () { + popup.close(); + }); + } 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,