Commit c5d96d7c415fd901758083f5bfedc0030d999dd2

Authored by Chantsova Ekaterina
1 parent 9bc5e676

Add option to show tooltip on hover

... ... @@ -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,
... ...