Function useHelpTooltip

useHelpTooltip(
    delay?: number,
    duration?: number,
): {
    showHelp: boolean;
    setShowHelp: Dispatch<SetStateAction<boolean>>;
    handleTooltipClose: () => void;
    handleTooltipOpen: () => void;
}

Hook to manage help tooltip visibility with customizable timing. Consolidates the help tooltip logic used across multiple components.

Parameters

delay: number = 500
Delay before showing tooltip (default: 500ms)
duration: number = 2000
Duration to show tooltip (default: 2000ms)

Returns {
    showHelp: boolean;
    setShowHelp: Dispatch<SetStateAction<boolean>>;
    handleTooltipClose: () => void;
    handleTooltipOpen: () => void;
}

Tooltip state and handlers

Example

const { showHelp, handleTooltipClose, handleTooltipOpen } = useHelpTooltip(1000, 3000);

<Tooltip
  open={showHelp}
  onClose={handleTooltipClose}
  onOpen={handleTooltipOpen}
>
  <Button>Help Button</Button>
</Tooltip>

Source

export function useHelpTooltip(delay = 500, duration = 2000) {
  const appContext = useAppContext();
  const [showHelp, setShowHelp] = useState(false);

  /**
   * Effect hook to show and hide help tooltip based on settings.
   * Shows help tooltip after delay and hides it after duration if showHelp is enabled.
   * @source
   */
  useEffect(() => {
    if (appContext.userSettings.showHelp === false) return;

    delayAction(delay, () => setShowHelp(true));
    delayAction(duration, () => setShowHelp(false));
  }, [delay, duration, appContext.userSettings.showHelp]);

  const handleTooltipClose = () => {
    setShowHelp(false);
  };

  const handleTooltipOpen = () => {
    setShowHelp(true);
  };

  return {
    showHelp,
    setShowHelp,
    handleTooltipClose,
    handleTooltipOpen,
  };
}

Function useHelpTooltip

Parameters

Returns { showHelp: boolean; setShowHelp: Dispatch<SetStateAction<boolean>>; handleTooltipClose: () => void; handleTooltipOpen: () => void;}

Example

Source

Settings

Returns {
showHelp: boolean;
setShowHelp: Dispatch<SetStateAction<boolean>>;
handleTooltipClose: () => void;
handleTooltipOpen: () => void;
}