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

feat(tooltip): add skipDelayDuration prop #467

Merged
merged 4 commits into from
Aug 25, 2024
Merged

feat(tooltip): add skipDelayDuration prop #467

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f120a4f
feat(tooltip):add skipDelayDuration prop
dev-rb Aug 18, 2024
3569924
style: format
dev-rb Aug 18, 2024
1a5811f
fix: add default value for skipDelayDuration
dev-rb Aug 18, 2024
0474090
chore: remove dev file
dev-rb Aug 24, 2024
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
34 changes: 33 additions & 1 deletion packages/core/dev/App.tsx
View file
Open in desktop
dev-rb marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,5 +1,37 @@
import { Tooltip } from "../src";

export default function App() {
return (
<></>
<div
style={{
display: "flex",
gap: "4rem",
}}
>
<Tooltip.Root skipDelayDuration={300}>
<Tooltip.Trigger>1</Tooltip.Trigger>
<Tooltip.Content>Button 1</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root skipDelayDuration={600}>
<Tooltip.Trigger>2</Tooltip.Trigger>
<Tooltip.Content>Button 2</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger>3</Tooltip.Trigger>
<Tooltip.Content>Button 3</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger>4</Tooltip.Trigger>
<Tooltip.Content>Button 4</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger>5</Tooltip.Trigger>
<Tooltip.Content>Button 5</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger>6</Tooltip.Trigger>
<Tooltip.Content>Button 6</Tooltip.Content>
</Tooltip.Root>
</div>
);
}
15 changes: 3 additions & 12 deletions packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@
},
"license": "MIT",
"author": "jer3m01 <[email protected]>",
"contributors": [
"Fabien Marie-Louise <[email protected]>"
],
"contributors": ["Fabien Marie-Louise <[email protected]>"],
"sideEffects": false,
"type": "module",
"exports": {
Expand All @@ -47,18 +45,11 @@
"types": "dist/index.d.ts",
"typesVersions": {
"*": {
"*": [
"./dist/*/index.d.ts",
"./dist/index.d.ts"
]
"*": ["./dist/*/index.d.ts", "./dist/index.d.ts"]
}
},
"source": "src/index.tsx",
"files": [
"dist",
"src",
"NOTICE.txt"
],
"files": ["dist", "src", "NOTICE.txt"],
"scripts": {
"build": "pnpm build:cp && pnpm build:tsup",
"build:cp": "cp ../../NOTICE.txt .",
Expand Down
19 changes: 18 additions & 1 deletion packages/core/src/tooltip/tooltip-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ let tooltipsCounter = 0;
let globalWarmedUp = false;
let globalWarmUpTimeout: number | undefined;
let globalCoolDownTimeout: number | undefined;
let globalSkipDelayTimeout: number | undefined;

export interface TooltipRootOptions
extends Omit<
Expand Down Expand Up @@ -82,6 +83,9 @@ export interface TooltipRootOptions
/** The duration from when the mouse leaves the trigger or content until the tooltip closes. */
closeDelay?: number;

/** The duration from when the mouse leaves the trigger or content and moves to another tooltip trigger or content */
skipDelayDuration?: number;

/** Whether to close the tooltip even if the user cursor is inside the safe area between the trigger and tooltip. */
ignoreSafeArea?: boolean;

Expand Down Expand Up @@ -116,6 +120,7 @@ export function TooltipRoot(props: TooltipRootProps) {
id: defaultId,
openDelay: 700,
closeDelay: 300,
skipDelayDuration: 300,
},
props,
);
Expand All @@ -129,6 +134,7 @@ export function TooltipRoot(props: TooltipRootProps) {
"triggerOnFocusOnly",
"openDelay",
"closeDelay",
"skipDelayDuration",
"ignoreSafeArea",
"forceMount",
]);
Expand Down Expand Up @@ -186,6 +192,13 @@ export function TooltipRoot(props: TooltipRootProps) {
window.clearTimeout(globalWarmUpTimeout);
globalWarmUpTimeout = undefined;

if (local.skipDelayDuration && local.skipDelayDuration >= 0) {
globalSkipDelayTimeout = window.setTimeout(() => {
window.clearTimeout(globalSkipDelayTimeout);
globalSkipDelayTimeout = undefined;
}, local.skipDelayDuration);
}

if (globalWarmedUp) {
window.clearTimeout(globalCoolDownTimeout);

Expand Down Expand Up @@ -214,6 +227,9 @@ export function TooltipRoot(props: TooltipRootProps) {

window.clearTimeout(globalCoolDownTimeout);
globalCoolDownTimeout = undefined;

window.clearTimeout(globalSkipDelayTimeout);
globalSkipDelayTimeout = undefined;
};

const warmupTooltip = () => {
Expand Down Expand Up @@ -244,7 +260,8 @@ export function TooltipRoot(props: TooltipRootProps) {
!immediate &&
local.openDelay &&
local.openDelay > 0 &&
!closeTimeoutId
!closeTimeoutId &&
!globalSkipDelayTimeout
) {
warmupTooltip();
} else {
Expand Down
Loading