feat(tooltip): adds tooltip support for restMs and delay properties

content/docs/components/tooltip.mdx

@@ -53,6 +53,16 @@ You can disable the arrow of the tooltip component by passing the `arrow` prop w
 
 <Example name="tooltip.disableArrow" />
 
+## Hover delay
+
+When your tooltip uses the `hover` trigger type, use the `restMs` prop to specify the amount of time (in milliseconds) the user's cursor must be "resting" on the trigger before the tooltip appears.
+
+Use the `delay` prop as a fallback with `restMs` to ensure that the tooltip appears after a certain amount of time even if the user's cursor is still moving.
+
+If you want to specify different behavior delay behavior for `open` and `close`, you can pass an object to `delay` that allows both `open` and `close` properties.
+
+<Example name="tooltip.hoverDelay" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

examples/tooltip/index.ts

@@ -1,4 +1,5 @@
 export { animation } from './tooltip.animation';
+export { hoverDelay } from './tooltip.hoverDelay';
 export { disableArrow } from './tooltip.disableArrow';
 export { placement } from './tooltip.placement';
 export { root } from './tooltip.root';

examples/tooltip/tooltip.hoverDelay.tsx

@@ -0,0 +1,78 @@
+import { type CodeData } from '~/components/code-demo';
+import { Button, Tooltip } from '~/src';
+
+const code = `
+'use client';
+
+import { Button, Tooltip } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }} restMs={100}>
+        <Button>Delayed tooltip</Button>
+      </Tooltip>
+      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }}>
+        <Button>Delayed tooltip without restMs</Button>
+      </Tooltip>
+      <Tooltip content="Tooltip content" restMs={500}>
+        <Button>Delayed tooltip with restMs only</Button>
+      </Tooltip>
+    </div>
+  );
+}
+`;
+
+const codeRSC = `
+import { Button, Tooltip } from 'flowbite-react';
+
+function Component() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }} restMs={100}>
+        <Button>Delayed tooltip</Button>
+      </Tooltip>
+      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }}>
+        <Button>Delayed tooltip without restMs</Button>
+      </Tooltip>
+      <Tooltip content="Tooltip content" restMs={500}>
+        <Button>Delayed tooltip with restMs only</Button>
+      </Tooltip>
+    </div>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }} restMs={100}>
+        <Button>Delayed tooltip</Button>
+      </Tooltip>
+      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }}>
+        <Button>Delayed tooltip without restMs</Button>
+      </Tooltip>
+      <Tooltip content="Tooltip content" restMs={500}>
+        <Button>Delayed tooltip with restMs only</Button>
+      </Tooltip>
+    </div>
+  );
+}
+
+export const hoverDelay: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'tooltip/tooltip.hoverDelay.tsx',
+  component: <Component />,
+};

src/components/Floating/Floating.tsx

@@ -38,7 +38,9 @@ export interface FloatingProps extends Omit<ComponentProps<'div'>, 'content' | '
   animation?: false | `duration-${number}`;
   arrow?: boolean;
   content: ReactNode;
+  delay?: number | Partial<{ open: number; close: number }>;
   placement?: 'auto' | Placement;
+  restMs?: number;
   style?: FloatingStyle;
   theme: FlowbiteFloatingTheme;
   trigger?: 'hover' | 'click';
@@ -54,6 +56,8 @@ export const Floating: FC<FloatingProps> = ({
   children,
   className,
   content,
+  delay,
+  restMs,
   placement = 'top',
   style = 'dark',
   theme,
@@ -84,6 +88,8 @@ export const Floating: FC<FloatingProps> = ({
   const focus = useFocus(context);
   const { getFloatingProps, getReferenceProps } = useFloatingInteractions({
     context,
+    delay,
+    restMs,
     role: 'tooltip',
     trigger,
     interactions: [focus],

src/components/Tooltip/Tooltip.stories.tsx

@@ -44,3 +44,16 @@ SlowAnimation.args = {
   placement: 'bottom',
   children: <Button>Tooltip with slow animation</Button>,
 };
+
+export const Delay = Template.bind({});
+Delay.storyName = 'Delay';
+Delay.args = {
+  delay: {
+    open: 1000,
+    close: 200,
+  },
+  restMs: 500,
+  content: 'Tooltip content',
+  placement: 'bottom',
+  children: <Button>Tooltip with delay</Button>,
+};

src/components/Tooltip/Tooltip.tsx

@@ -11,7 +11,9 @@ export interface TooltipProps extends Omit<ComponentProps<'div'>, 'content' | 's
   animation?: false | `duration-${number}`;
   arrow?: boolean;
   content: ReactNode;
+  delay?: number | Partial<{ open: number; close: number }>;
   placement?: 'auto' | Placement;
+  restMs?: number;
   style?: 'dark' | 'light' | 'auto';
   theme?: DeepPartial<FlowbiteTooltipTheme>;
   trigger?: 'hover' | 'click';
@@ -26,7 +28,9 @@ export const Tooltip: FC<TooltipProps> = ({
   children,
   className,
   content,
+  delay,
   placement = 'top',
+  restMs,
   style = 'dark',
   theme: customTheme = {},
   trigger = 'hover',
@@ -39,7 +43,9 @@ export const Tooltip: FC<TooltipProps> = ({
       animation={animation}
       arrow={arrow}
       content={content}
+      delay={delay}
       placement={placement}
+      restMs={restMs}
       style={style}
       theme={theme}
       trigger={trigger}

src/hooks/use-floating.ts

@@ -39,19 +39,25 @@ export type UseFloatingInteractionsParams = {
   trigger?: 'hover' | 'click';
   role?: UseRoleProps['role'];
   interactions?: ElementProps[];
+  delay?: number | Partial<{ open: number; close: number }>;
+  restMs?: number;
 };
 
 export const useFloatingInteractions = ({
   context,
   trigger,
   role = 'tooltip',
   interactions = [],
+  delay,
+  restMs,
 }: UseFloatingInteractionsParams) => {
   return useInteractions([
     useClick(context, { enabled: trigger === 'click' }),
     useHover(context, {
+      delay,
       enabled: trigger === 'hover',
       handleClose: safePolygon(),
+      restMs,
     }),
     useDismiss(context),
     useRole(context, { role }),