diff --git a/CHANGELOG.md b/CHANGELOG.md index 52417c76b..6f000c081 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,10 +2,14 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it. +# Next + +- [Feat] Expose `showTimeout` and `hideTimeout` props for `Tooltip` + # v26.0.0 - [BREAKING] Remove unused `secondaryLabel` from `TexTfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`. -- [BREAKING] Remove `hint` from from `TexTfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`. +- [BREAKING] Remove `hint` from from `Textfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`. - Please use `message` instead. - [Feat] Update read only style for `TextField` and `TextArea` when `readOnly` is `true`. - [Feat] Add `disableResize` option to `TextArea` to disallow manual resizing. diff --git a/src/tooltip/tooltip.stories.tsx b/src/tooltip/tooltip.stories.tsx index f3623d964..f45f01cd6 100644 --- a/src/tooltip/tooltip.stories.tsx +++ b/src/tooltip/tooltip.stories.tsx @@ -78,6 +78,8 @@ TooltipPlaygroundStory.args = { position: 'top', gapSize: 5, withArrow: false, + showTimeout: 500, + hideTimeout: 100, } TooltipPlaygroundStory.argTypes = { @@ -94,12 +96,16 @@ export function TooltipRichContentStory({ position, gapSize, withArrow, -}: Pick) { + showTimeout, + hideTimeout, +}: Pick) { return ( @@ -122,6 +128,8 @@ TooltipRichContentStory.args = { position: 'bottom', gapSize: 10, withArrow: true, + showTimeout: 500, + hideTimeout: 100, } TooltipRichContentStory.argTypes = { diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx index 780773074..a4f7f60ac 100644 --- a/src/tooltip/tooltip.tsx +++ b/src/tooltip/tooltip.tsx @@ -66,6 +66,18 @@ interface TooltipProps extends ObfuscatedClassName { * @default false */ withArrow?: boolean + + /** + * The amount of time in milliseconds to wait before showing the tooltip + * @default 500 + */ + showTimeout?: number + + /** + * The amount of time in milliseconds to wait before hiding the tooltip + * @default 100 + */ + hideTimeout?: number } function Tooltip({ @@ -74,9 +86,11 @@ function Tooltip({ position = 'top', gapSize = 3, withArrow = false, + showTimeout = 500, + hideTimeout = 100, exceptionallySetClassName, }: TooltipProps) { - const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 }) + const tooltip = useTooltipStore({ placement: position, showTimeout, hideTimeout }) const isOpen = tooltip.useState('open') const child = React.Children.only(