Skip to content

Commit 67ef365

Browse files
driskulldriskull
committed
refactor(tooltip): Use pointer events in favor of mouse events. (#5318)
pointer events will fire on disabled elements.
1 parent 7fcb410 commit 67ef365

File tree

3 files changed

+89
-9
lines changed

3 files changed

+89
-9
lines changed

‎src/components/tooltip/TooltipManager.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,17 +97,17 @@ export default class TooltipManager {
9797

9898
private addListeners(): void {
9999
document.addEventListener("keydown", this.keyDownHandler);
100-
document.addEventListener("mouseover", this.mouseEnterShow, { capture: true });
101-
document.addEventListener("mouseout", this.mouseLeaveHide, { capture: true });
100+
document.addEventListener("pointerover", this.mouseEnterShow, { capture: true });
101+
document.addEventListener("pointerout", this.mouseLeaveHide, { capture: true });
102102
document.addEventListener("pointerdown", this.clickHandler, { capture: true });
103103
document.addEventListener("focusin", this.focusShow, { capture: true });
104104
document.addEventListener("focusout", this.blurHide, { capture: true });
105105
}
106106

107107
private removeListeners(): void {
108108
document.removeEventListener("keydown", this.keyDownHandler);
109-
document.removeEventListener("mouseover", this.mouseEnterShow, { capture: true });
110-
document.removeEventListener("mouseout", this.mouseLeaveHide, { capture: true });
109+
document.removeEventListener("pointerover", this.mouseEnterShow, { capture: true });
110+
document.removeEventListener("pointerout", this.mouseLeaveHide, { capture: true });
111111
document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
112112
document.removeEventListener("focusin", this.focusShow, { capture: true });
113113
document.removeEventListener("focusout", this.blurHide, { capture: true });
@@ -178,9 +178,9 @@ export default class TooltipManager {
178178
return;
179179
}
180180

181-
if (type === "mouseover" && event.composedPath().includes(activeTooltipEl)) {
181+
if (type === "pointerover" && event.composedPath().includes(activeTooltipEl)) {
182182
this.clearHoverTimeout(activeTooltipEl);
183-
} else if (type === "mouseout" && !hoverTimeouts.has(activeTooltipEl)) {
183+
} else if (type === "pointerout" && !hoverTimeouts.has(activeTooltipEl)) {
184184
this.hoverTooltip(activeTooltipEl, false);
185185
}
186186
}

‎src/components/tooltip/tooltip.e2e.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ describe("calcite-tooltip", () => {
229229
expect(content.textContent).toBe("hi");
230230
});
231231

232-
it("should honor tooltips on mouseover/mouseout", async () => {
232+
it("should honor tooltips on pointerover/pointerout", async () => {
233233
const page = await newE2EPage();
234234

235235
await page.setContent(
@@ -450,7 +450,7 @@ describe("calcite-tooltip", () => {
450450
expect(await hoverTip.getProperty("open")).toBe(false);
451451

452452
await page.$eval("#hoverRef", (elm: HTMLElement) => {
453-
elm.dispatchEvent(new Event("mouseover"));
453+
elm.dispatchEvent(new Event("pointerover"));
454454
});
455455

456456
await page.waitForTimeout(TOOLTIP_DELAY_MS);
@@ -507,7 +507,7 @@ describe("calcite-tooltip", () => {
507507
expect(await hoverTip.getProperty("open")).toBe(false);
508508

509509
await page.$eval("#hoverRef", (elm: HTMLElement) => {
510-
elm.dispatchEvent(new Event("mouseover"));
510+
elm.dispatchEvent(new Event("pointerover"));
511511
});
512512

513513
await page.waitForTimeout(TOOLTIP_DELAY_MS);

‎src/demos/tooltip.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,38 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
156156
</div>
157157
</div>
158158

159+
<!-- disabled -->
160+
<div class="parent">
161+
<div class="child right-aligned-text">disabled</div>
162+
163+
<div class="child">
164+
<calcite-button disabled appearance="outline" id="tooltip-auto-disabled-ref">auto</calcite-button>
165+
</div>
166+
167+
<div class="child">
168+
<calcite-button disabled appearance="outline" id="tooltip-auto-start-disabled-ref">auto-start</calcite-button>
169+
</div>
170+
<div class="child">
171+
<calcite-button disabled appearance="outline" id="tooltip-auto-end-disabled-ref">auto-end</calcite-button>
172+
</div>
173+
</div>
174+
175+
<!-- disabled native -->
176+
<div class="parent">
177+
<div class="child right-aligned-text">disabled</div>
178+
179+
<div class="child">
180+
<button disabled id="tooltip-auto-disabled-native-ref">auto</button>
181+
</div>
182+
183+
<div class="child">
184+
<button disabled id="tooltip-auto-start-disabled-native-ref">auto</button>
185+
</div>
186+
<div class="child">
187+
<button disabled id="tooltip-auto-end-disabled-native-ref">auto</button>
188+
</div>
189+
</div>
190+
159191
<!-- containers to hold the tooltip -->
160192
<div>
161193
<calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-ref">
@@ -287,6 +319,54 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
287319
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
288320
magna aliqua.
289321
</calcite-tooltip>
322+
323+
<calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-disabled-ref">
324+
<p>placement: auto</p>
325+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
326+
magna aliqua.
327+
</calcite-tooltip>
328+
<calcite-tooltip
329+
label="tooltip - auto-start"
330+
placement="auto-start"
331+
reference-element="tooltip-auto-start-disabled-ref"
332+
>
333+
<p>placement: auto-start</p>
334+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
335+
magna aliqua.
336+
</calcite-tooltip>
337+
<calcite-tooltip
338+
label="tooltip - auto-end"
339+
placement="auto-end"
340+
reference-element="tooltip-auto-end-disabled-ref"
341+
>
342+
<p>placement: auto-end</p>
343+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
344+
magna aliqua.
345+
</calcite-tooltip>
346+
347+
<calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-disabled-native-ref">
348+
<p>placement: auto</p>
349+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
350+
magna aliqua.
351+
</calcite-tooltip>
352+
<calcite-tooltip
353+
label="tooltip - auto-start"
354+
placement="auto-start"
355+
reference-element="tooltip-auto-start-disabled-native-ref"
356+
>
357+
<p>placement: auto-start</p>
358+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
359+
magna aliqua.
360+
</calcite-tooltip>
361+
<calcite-tooltip
362+
label="tooltip - auto-end"
363+
placement="auto-end"
364+
reference-element="tooltip-auto-end-disabled-native-ref"
365+
>
366+
<p>placement: auto-end</p>
367+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
368+
magna aliqua.
369+
</calcite-tooltip>
290370
</div>
291371
</demo-dom-swapper>
292372
</body>

0 commit comments

Comments
 (0)