diff --git a/elements/map/src/helpers/select.js b/elements/map/src/helpers/select.js index 1b4c41525..22468b7bf 100644 --- 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} **/ 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 new file mode 100644 index 000000000..bcef4ef52 --- /dev/null +++ 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` + + `, + ).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 index 028665ecd..899c22b2a 100644 --- 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 index 7a5d05da9..43f2998a1 100644 --- 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 index 395dbed8d..6d4e3cee4 100644 --- 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;