# All files / src/tooltip TooltipHoverModeProvider.tsx

100% Statements 108/108
100% Branches 2/2
100% Functions 2/2
100% Lines 108/108

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    1091x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    207x
    207x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
     "use client";
    import {
      createContext,
      useContext,
      type ReactElement,
      type ReactNode,
    } from "react";
    import {
      createHoverModeContext,
      useHoverModeProvider,
      type HoverModeConfiguration,
      type HoverModeContext,
    } from "../hoverMode/useHoverModeProvider.js";
    import { DEFAULT_TOOLTIP_DELAY } from "./constants.js";

    /** @remarks \@since 6.0.0 */
    export type TooltipHoverModeContext = HoverModeContext;

    const context = createContext<TooltipHoverModeContext>(
      createHoverModeContext({
        hoverTimeout: DEFAULT_TOOLTIP_DELAY,
        leaveTimeout: 0,
      })
    );
    context.displayName = "TooltipHoverMode";
    const { Provider } = context;

    /**
     * @internal
     * @remarks \@since 6.0.0
     */
    export function useTooltipHoverMode(): Readonly<TooltipHoverModeContext> {
      return useContext(context);
    }

    /**
     * @remarks \@since 6.0.0
     */
    export interface TooltipHoverModeProviderProps
      extends Partial<HoverModeConfiguration> {
      children: ReactNode;

      /**
       * @see {@link HoverModeConfiguration.hoverTimeout}
       * @defaultValue `1000`
       */
      hoverTimeout?: number;

      /**
       * @see {@link HoverModeConfiguration.leaveTimeout}
       * @defaultValue `0`
       */
      leaveTimeout?: number;

      /**
       * @see {@link HoverModeConfiguration.disableTimeout}
       * @defaultValue `1000`
       */
      disableTimeout?: number;
    }

    /**
     * **Client Component**
     *
     * Updates all tooltips that are rendered as a child anywhere in the React tree
     * to immediately appear for a short duration once a tooltip has become visible.
     * You can also use this provider to configure all tooltips' visibility delay to
     * a new value.
     *
     * @example
     * Configuration Example
     * ```tsx
     * <TooltipHoverModeProvider
     *   // wait 3 seconds before displaying any tooltips
     *   hoverTimeout={3000}
     *
     *   // wait 1 second before hiding any tooltips
     *   leaveTimeout={1000}
     *
     *   // disable the hover mode functionality only if another tooltip has not
     *   // been visible for 20 seconds
     *   disableTimeout={20000}
     * >
     *   <RestOfTheApp />
     * </TooltipHoverModeProvider>
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function TooltipHoverModeProvider(
      props: TooltipHoverModeProviderProps
    ): ReactElement {
      const {
        hoverTimeout = DEFAULT_TOOLTIP_DELAY,
        leaveTimeout = 0,
        disableTimeout = DEFAULT_TOOLTIP_DELAY,
        defaultActiveId,
        children,
      } = props;
      const context = useHoverModeProvider({
        hoverTimeout,
        leaveTimeout,
        disableTimeout,
        defaultActiveId,
      });

      return <Provider value={context}>{children}</Provider>;
    }