Commit c5d96d7c415fd901758083f5bfedc0030d999dd2
1 parent
9bc5e676
Add option to show tooltip on hover
Showing
5 changed files
with
94 additions
and
18 deletions
... | ... | @@ -266,14 +266,23 @@ export default class TbGoogleMap { |
266 | 266 | content: '' |
267 | 267 | }); |
268 | 268 | var map = this; |
269 | - marker.addListener('click', function() { | |
270 | - if (settings.autocloseTooltip) { | |
271 | - map.tooltips.forEach((tooltip) => { | |
272 | - tooltip.popup.close(); | |
273 | - }); | |
274 | - } | |
275 | - popup.open(this.map, marker); | |
276 | - }); | |
269 | + if (settings.displayTooltipAction == 'hover') { | |
270 | + marker.addListener('mouseover', function () { | |
271 | + popup.open(this.map, marker); | |
272 | + }); | |
273 | + marker.addListener('mouseout', function () { | |
274 | + popup.close(); | |
275 | + }); | |
276 | + } else { | |
277 | + marker.addListener('click', function() { | |
278 | + if (settings.autocloseTooltip) { | |
279 | + map.tooltips.forEach((tooltip) => { | |
280 | + tooltip.popup.close(); | |
281 | + }); | |
282 | + } | |
283 | + popup.open(this.map, marker); | |
284 | + }); | |
285 | + } | |
277 | 286 | this.tooltips.push( { |
278 | 287 | markerArgs: markerArgs, |
279 | 288 | popup: popup, | ... | ... |
... | ... | @@ -354,6 +354,14 @@ export default class TbImageMap { |
354 | 354 | var popup = L.popup(); |
355 | 355 | popup.setContent(''); |
356 | 356 | marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false}); |
357 | + if (settings.displayTooltipAction == 'hover') { | |
358 | + marker.on('mouseover', function () { | |
359 | + this.openPopup(); | |
360 | + }); | |
361 | + marker.on('mouseout', function () { | |
362 | + this.closePopup(); | |
363 | + }); | |
364 | + } | |
357 | 365 | this.tooltips.push( { |
358 | 366 | markerArgs: markerArgs, |
359 | 367 | popup: popup, | ... | ... |
... | ... | @@ -156,8 +156,9 @@ export default class TbMapWidgetV2 { |
156 | 156 | |
157 | 157 | this.locationSettings.showLabel = this.ctx.settings.showLabel !== false; |
158 | 158 | this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false; |
159 | + this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click"; | |
159 | 160 | this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false; |
160 | - this.locationSettings.showPolygon = this.ctx.settings.showPolygon !== false; | |
161 | + this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true; | |
161 | 162 | this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000'; |
162 | 163 | this.locationSettings.label = this.ctx.settings.label || "${entityName}"; |
163 | 164 | this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569"; |
... | ... | @@ -978,6 +979,11 @@ const commonMapSettingsSchema = |
978 | 979 | "type": "boolean", |
979 | 980 | "default": true |
980 | 981 | }, |
982 | + "showTooltipAction": { | |
983 | + "title": "Action for displaying the tooltip", | |
984 | + "type": "string", | |
985 | + "default": "click" | |
986 | + }, | |
981 | 987 | "autocloseTooltip": { |
982 | 988 | "title": "Auto-close tooltips", |
983 | 989 | "type": "boolean", |
... | ... | @@ -1095,6 +1101,21 @@ const commonMapSettingsSchema = |
1095 | 1101 | "type": "javascript" |
1096 | 1102 | }, |
1097 | 1103 | "showTooltip", |
1104 | + { | |
1105 | + "key": "showTooltipAction", | |
1106 | + "type": "rc-select", | |
1107 | + "multiple": false, | |
1108 | + "items": [ | |
1109 | + { | |
1110 | + "value": "click", | |
1111 | + "label": "Show tooltip on click (Default)" | |
1112 | + }, | |
1113 | + { | |
1114 | + "value": "hover", | |
1115 | + "label": "Show tooltip on hover" | |
1116 | + } | |
1117 | + ] | |
1118 | + }, | |
1098 | 1119 | "autocloseTooltip", |
1099 | 1120 | { |
1100 | 1121 | "key": "tooltipPattern", |
... | ... | @@ -1235,6 +1256,11 @@ const imageMapSettingsSchema = |
1235 | 1256 | "type": "boolean", |
1236 | 1257 | "default": true |
1237 | 1258 | }, |
1259 | + "showTooltipAction": { | |
1260 | + "title": "Action for displaying the tooltip", | |
1261 | + "type": "string", | |
1262 | + "default": "click" | |
1263 | + }, | |
1238 | 1264 | "autocloseTooltip": { |
1239 | 1265 | "title": "Auto-close tooltips", |
1240 | 1266 | "type": "boolean", |
... | ... | @@ -1329,6 +1355,21 @@ const imageMapSettingsSchema = |
1329 | 1355 | "type": "javascript" |
1330 | 1356 | }, |
1331 | 1357 | "showTooltip", |
1358 | + { | |
1359 | + "key": "showTooltipAction", | |
1360 | + "type": "rc-select", | |
1361 | + "multiple": false, | |
1362 | + "items": [ | |
1363 | + { | |
1364 | + "value": "click", | |
1365 | + "label": "Show tooltip on click (Default)" | |
1366 | + }, | |
1367 | + { | |
1368 | + "value": "hover", | |
1369 | + "label": "Show tooltip on hover" | |
1370 | + } | |
1371 | + ] | |
1372 | + }, | |
1332 | 1373 | "autocloseTooltip", |
1333 | 1374 | { |
1334 | 1375 | "key": "tooltipPattern", | ... | ... |
... | ... | @@ -168,6 +168,14 @@ export default class TbOpenStreetMap { |
168 | 168 | var popup = L.popup(); |
169 | 169 | popup.setContent(''); |
170 | 170 | marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false}); |
171 | + if (settings.displayTooltipAction == 'hover') { | |
172 | + marker.on('mouseover', function () { | |
173 | + this.openPopup(); | |
174 | + }); | |
175 | + marker.on('mouseout', function () { | |
176 | + this.closePopup(); | |
177 | + }); | |
178 | + } | |
171 | 179 | this.tooltips.push({ |
172 | 180 | markerArgs: markerArgs, |
173 | 181 | popup: popup, | ... | ... |
... | ... | @@ -278,15 +278,25 @@ export default class TbTencentMap { |
278 | 278 | map: this.map |
279 | 279 | }); |
280 | 280 | var map = this; |
281 | - qq.maps.event.addListener(marker, 'click', function () { | |
282 | - if (settings.autocloseTooltip) { | |
283 | - map.tooltips.forEach((tooltip) => { | |
284 | - tooltip.popup.close(); | |
285 | - }); | |
286 | - } | |
287 | - popup.open(); | |
288 | - popup.setPosition(marker); | |
289 | - }); | |
281 | + if (settings.displayTooltipAction == 'hover') { | |
282 | + qq.maps.event.addListener(marker, 'mouseover', function () { | |
283 | + popup.open(); | |
284 | + popup.setPosition(marker); | |
285 | + }); | |
286 | + qq.maps.event.addListener(marker, 'mouseout', function () { | |
287 | + popup.close(); | |
288 | + }); | |
289 | + } else { | |
290 | + qq.maps.event.addListener(marker, 'click', function () { | |
291 | + if (settings.autocloseTooltip) { | |
292 | + map.tooltips.forEach((tooltip) => { | |
293 | + tooltip.popup.close(); | |
294 | + }); | |
295 | + } | |
296 | + popup.open(); | |
297 | + popup.setPosition(marker); | |
298 | + }); | |
299 | + } | |
290 | 300 | map.tooltips.push({ |
291 | 301 | markerArgs: markerArgs, |
292 | 302 | popup: popup, | ... | ... |