Skip to content

Commit

Permalink
fix(tooltip): set default openDelay to 500ms
Browse files Browse the repository at this point in the history
In 76a6ea8 all `onClick` events were changed to `onPointerUp`. This allows Apple Pencil to work on buttons with tooltips.

Unfortunately, this changes click behaviour in a subtle way. With `onClick`, if you mouse down on an element, then move the mouse to a different element before releasing the mouse, nothing happens. With `onPointerUp`, the different element is clicked.

An alternate solution to is set a default `openDelay` on Tooltips to a higher value (default is no delay). I did a bit of searching and found it's actually considered a best-practice to make the delay ~500ms by default, and only reduce the delay in specific use-cases where it makes sense.

Tooltip now has a default `openDelay` of 500ms.
  • Loading branch information
psychedelicious committed Oct 6, 2024
1 parent 51f5f2e commit 76d3080
Showing 1 changed file with 10 additions and 2 deletions.
12 changes: 10 additions & 2 deletions lib/components/tooltip/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,17 @@ const modifiers: TooltipProps['modifiers'] = [

export const Tooltip: ComponentWithAs<ComponentWithAs<'div', ChakraTooltipProps>, ChakraTooltipProps> = typedMemo(
forwardRef<TooltipProps, typeof ChakraTooltip>((props: TooltipProps, ref) => {
const { children, hasArrow = true, placement = 'top', ...rest } = props;
const { children, hasArrow = true, placement = 'top', openDelay = 500, ...rest } = props;
return (
<ChakraTooltip ref={ref} hasArrow={hasArrow} placement={placement} arrowSize={8} modifiers={modifiers} {...rest}>
<ChakraTooltip
ref={ref}
hasArrow={hasArrow}
placement={placement}
arrowSize={8}
modifiers={modifiers}
openDelay={openDelay}
{...rest}
>
{children}
</ChakraTooltip>
);
Expand Down

0 comments on commit 76d3080

Please # to comment.