feat: disable tooltip of select interaction (#1409)

* add possibility to disable tooltip * update SelectOptions type with `tooltip` * add test for disabling tooltip
EOX-A · Dec 12, 2024 · 23e5297 · 23e5297
1 parent 3ce2c85
commit 23e5297
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 22 deletions.
diff --git a/elements/map/src/helpers/select.js b/elements/map/src/helpers/select.js
@@ -31,6 +31,7 @@ export class EOxSelectInteraction {
     this.options = options;
     this.active = options.active || selectLayer.getVisible();
     this.panIn = options.panIn || false;
+    this.tooltip = options.tooltip === false ? false : true;
     /** @type {Array<string|number>} **/
     this.selectedFids = [];
 
@@ -40,26 +41,28 @@ export class EOxSelectInteraction {
     /** @type {import("ol").Overlay} **/
     let overlay;
 
-    if (existingTooltip) {
-      this.tooltip = existingTooltip.getElement();
-      overlay = existingTooltip;
-    } else {
-      this.tooltip =
-        this.eoxMap.querySelector("eox-map-tooltip") ||
-        options.overlay?.element;
+    if (this.tooltip) {
+      if (existingTooltip) {
+        this.tooltipElement = existingTooltip.getElement();
+        overlay = existingTooltip;
+      } else {
+        this.tooltipElement =
+          this.eoxMap.querySelector("eox-map-tooltip") ||
+          options.overlay?.element;
 
-      if (this.tooltip) {
-        overlay = new Overlay({
-          // @ts-expect-error - Type 'Element' is missing the following properties from type 'HTMLElement'
-          element: this.tooltip,
-          position: undefined,
-          offset: [0, 0],
-          positioning: "top-left",
-          className: "eox-map-tooltip",
-          id: "eox-map-tooltip",
-          ...options.overlay,
-        });
-        this.eoxMap.map.addOverlay(overlay);
+        if (this.tooltipElement) {
+          overlay = new Overlay({
+            // @ts-expect-error - Type 'Element' is missing the following properties from type 'HTMLElement'
+            element: this.tooltipElement,
+            position: undefined,
+            offset: [0, 0],
+            positioning: "top-left",
+            className: "eox-map-tooltip",
+            id: "eox-map-tooltip",
+            ...options.overlay,
+          });
+          this.eoxMap.map.addOverlay(overlay);
+        }
       }
     }
 
@@ -161,9 +164,9 @@ export class EOxSelectInteraction {
             event.pixel[1] > this.eoxMap.offsetHeight / 2 ? "bottom" : "top";
           overlay.setPositioning(`${yPosition}-${xPosition}`);
           overlay.setPosition(feature ? event.coordinate : null);
-          if (feature && this.tooltip) {
+          if (feature && this.tooltipElement) {
             // @ts-expect-error TODO
-            this.tooltip.feature = feature;
+            this.tooltipElement.feature = feature;
           }
         }
 

diff --git a/elements/map/test/cases/hover/disable-tooltip.js b/elements/map/test/cases/hover/disable-tooltip.js
@@ -0,0 +1,34 @@
+import { html } from "lit";
+import ecoRegionsFixture from "../../fixtures/ecoregions.json";
+import vectorLayerStyleJson from "../../fixtures/hoverInteraction.json";
+import { simulateEvent } from "../../utils/events";
+
+/**
+ * Tests to disable the default hover tooltip
+ */
+const disableTooltip = () => {
+  cy.intercept("https://openlayers.org/data/vector/ecoregions.json", (req) => {
+    req.reply(ecoRegionsFixture);
+  });
+  const layers = JSON.parse(JSON.stringify(vectorLayerStyleJson));
+  layers[0].interactions[0].options.tooltip = false;
+  cy.mount(
+    html`<eox-map .layers=${layers}>
+      <eox-map-tooltip></eox-map-tooltip>
+    </eox-map>`,
+  ).as("eox-map");
+  cy.get("eox-map").and(($el) => {
+    const eoxMap = $el[0];
+
+    eoxMap.map.on("loadend", () => {
+      simulateEvent(eoxMap.map, "pointermove", 120, -140);
+    });
+  });
+  cy.get("eox-map")
+    .shadow()
+    .within(() => {
+      cy.get("eox-map-tooltip").should("not.exist");
+    });
+};
+
+export default disableTooltip;
diff --git a/elements/map/test/cases/hover/index.js b/elements/map/test/cases/hover/index.js
@@ -3,4 +3,5 @@
 export { default as addSelectInteraction } from "./add-select-interaction";
 export { default as selectAfterReArrangingLayers } from "./select-after-re-arranging-layers";
 export { default as displayTooltip } from "./display-tooltip";
+export { default as disableTooltip } from "./disable-tooltip";
 export { default as displayTooltipOneLayerVisible } from "./display-tooltip-one-layer-visible";
diff --git a/elements/map/test/tooltip.cy.js b/elements/map/test/tooltip.cy.js
@@ -1,5 +1,9 @@
 import "../src/main";
-import { displayTooltip, displayTooltipOneLayerVisible } from "./cases/hover";
+import {
+  displayTooltip,
+  disableTooltip,
+  displayTooltipOneLayerVisible,
+} from "./cases/hover";
 
 /**
  * Test suite for the EOX Map to load Tooltip
@@ -10,6 +14,11 @@ describe("tooltip", () => {
    */
   it("displays a tooltip on hover", () => displayTooltip());
 
+  /**
+   * Test case to disable the default tooltip
+   */
+  it("disable the default tooltip", () => disableTooltip());
+
   /**
    * Test case to displays a tooltip on hover when multiple layers are initialized and only one visible
    */

diff --git a/elements/map/types.ts b/elements/map/types.ts
@@ -108,6 +108,10 @@ export type SelectOptions = Omit<
   layer?: EoxLayer;
   style?: import("ol/style/flat.js").FlatStyleLike;
   overlay?: import("ol/Overlay").Options;
+  /**
+   * @property {boolean} [tooltip = true] if true, will display a tooltip when hovering over a feature.
+   */
+  tooltip?: boolean;
   active?: boolean;
   panIn?: boolean;
   modify?: boolean;