Skip to content

mobile tooltip on tap #1526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 6, 2023
Merged

mobile tooltip on tap #1526

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
067ea97
mobile tooltip on tap
Fil May 6, 2023
12a52b4
pointermove on pointerenter
mbostock May 6, 2023
6d0007b
ignore pointerleave for non-mouse
mbostock May 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/marks/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,7 @@ export class Tooltip extends Mark {
let sticky = false;

function pointermove(event) {
if (sticky) return;
if (event.buttons === 1) return; // dragging
if (sticky || (event.pointerType === "mouse" && event.buttons === 1)) return; // dragging
const rect = svg.getBoundingClientRect();
let ii, fxi, fyi;
if (
Expand Down Expand Up @@ -206,7 +205,8 @@ export class Tooltip extends Mark {
}
}

function pointerdown() {
function pointerdown(event) {
if (event.pointerType !== "mouse") return;
if (sticky) {
sticky = false;
dot.attr("display", "none");
Expand All @@ -217,7 +217,8 @@ export class Tooltip extends Mark {
}
}

function pointerleave() {
function pointerleave(event) {
if (event.pointerType !== "mouse") return;
if (!sticky) {
dot.attr("display", "none");
dot.attr("pointer-events", "none");
Expand Down Expand Up @@ -246,6 +247,7 @@ export class Tooltip extends Mark {
// us receive pointer events from farther away, but would also make it hard
// to know when to remove the listeners. (Using a mutation observer to watch
// the entire document is likely too expensive.)
svg.addEventListener("pointerenter", pointermove);
svg.addEventListener("pointermove", pointermove);
svg.addEventListener("pointerdown", pointerdown);
svg.addEventListener("pointerleave", pointerleave);
Expand Down