Skip to content
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

fix: tooltip: Tooltip delay should be reset on close #5336

Merged
merged 2 commits into from
Jan 22, 2025
Merged

fix: tooltip: Tooltip delay should be reset on close #5336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc7a016
fix: tooltip: Tooltip delay should be reset on close
margaree Jan 21, 2025
51270f5
fix unit tests, add unit test
margaree Jan 22, 2025
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
31 changes: 31 additions & 0 deletions components/tooltip/test/tooltip.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,37 @@ describe('d2l-tooltip', () => {
await oneEvent(tooltipFixture, 'd2l-tooltip-show');
expect(tooltip.showing).to.be.true;
});

it('should show second tooltip without delay after hovering over first tooltip for greater than delay', async() => {
const doubleTooltipFixture = html`
<div>
<button id="explicit-target1">Hover me for tips</button>
<d2l-tooltip for="explicit-target1" for-type="descriptor">If I got a problem then a problem's got a problem.</d2l-tooltip>
<button id="explicit-target2">Hover me for tips</button>
<d2l-tooltip for="explicit-target2" for-type="descriptor">There might be another problem.</d2l-tooltip>
</div>
`;

const testFixture = await fixture(doubleTooltipFixture);

const target1 = testFixture.querySelector('#explicit-target1');
const target2 = testFixture.querySelector('#explicit-target2');

const tooltips = testFixture.querySelectorAll('d2l-tooltip');
const tooltip1 = tooltips[0];
const tooltip2 = tooltips[1];

// display tooltip 1 then leave
target1.dispatchEvent(new Event('mouseenter'));
await oneEvent(testFixture, 'd2l-tooltip-show');
expect(tooltip1.showing).to.be.true;
target1.dispatchEvent(new Event('mouseleave'));

// don't wait delay, enter target2, tooltip 2 should show without having to wait for delay
target2.dispatchEvent(new Event('mouseenter'));
await aTimeout(tooltip.delay / 2);
expect(tooltip2.showing).to.be.true;
});
});

describe('force-show', () => {
Expand Down
5 changes: 3 additions & 2 deletions components/tooltip/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,13 @@ const contentBorderSize = 1;
const contentHorizontalPadding = 15;
const outlineSize = 1;

/* once a user shows a tooltip, ignore delay if they hover adjacent target within this timeout */
/* once a user closes a tooltip, ignore delay if they hover adjacent target within this timeout */
let delayTimeoutId;
const resetDelayTimeout = () => {
if (delayTimeoutId) clearTimeout(delayTimeoutId);
delayTimeoutId = setTimeout(() => delayTimeoutId = null, 1000);
};
/* ignore delay if user hovers adjacent target when a tooltip is already open */
const getDelay = delay => {
if (delayTimeoutId) return 0;
else return delay;
Expand Down Expand Up @@ -847,7 +848,6 @@ class Tooltip extends RtlMixin(LitElement) {
if (!this._truncating) return;
}

resetDelayTimeout();
this._isHovering = true;
this._updateShowing();
}, getDelay(this.delay));
Expand Down Expand Up @@ -925,6 +925,7 @@ class Tooltip extends RtlMixin(LitElement) {
this._dismissibleId = null;
}
if (dispatch) {
resetDelayTimeout();
this.dispatchEvent(new CustomEvent(
'd2l-tooltip-hide', { bubbles: true, composed: true }
));
Expand Down
Loading