From b92a79979230dcf5f874d351201bc4f19d801b0e Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Tue, 12 May 2026 10:51:14 +0800 Subject: [PATCH 1/3] docs: document align.overflow option including alwaysByViewport Closes #363 --- README.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c5533df..daf2583 100644 --- a/README.md +++ b/README.md @@ -83,12 +83,36 @@ Online demo: https://tooltip-react-component.vercel.app/ | mouseLeaveDelay | number | 0.1 | delay time (in second) before tooltip hides when mouse leave | | getTooltipContainer | (triggerNode: HTMLElement) => HTMLElement | () => document.body | get container of tooltip, default to body | | destroyOnHidden | boolean | false | destroy tooltip when it is hidden | -| align | object | | align config of tooltip. Please ref demo for usage example | +| align | object | | align config of tooltip, ref [dom-align](https://github.com/yiminghe/dom-align). See [align overflow](#align-overflow) below | | showArrow | boolean \| object | false | whether to show arrow of tooltip | | zIndex | number | | config popup tooltip zIndex | | classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class | | styles | styles?: {root?: React.CSSProperties;container?: React.CSSProperties;}; | | Semantic DOM styles | +### align.overflow + +The `align` prop accepts an object that may include an `overflow` field to control how the tooltip adjusts when it overflows the visible area. This is powered by [dom-align](https://github.com/yiminghe/dom-align). + +| name | type | default | description | +| ---------------- | ---------------- | ------- | -------------------------------------------------------------------------------------------------------- | +| adjustX | boolean \| number | false | adjust tooltip position in the X direction when it overflows | +| adjustY | boolean \| number | false | adjust tooltip position in the Y direction when it overflows | +| alwaysByViewport | boolean | false | when `true`, always adjusts position based on the viewport rather than the scrollable parent container | + +```jsx +tooltip content} +> + + +``` + +When `alwaysByViewport` is `true`, the tooltip will reposition itself to stay within the browser viewport. This is particularly useful when the trigger element is inside a scrollable container and you want the tooltip to always be visible on screen. + ## Important Note `Tooltip` requires a child node that accepts an `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` event. This means the child node must be a built-in component like `div` or `span`, or a custom component that passes its props to its built-in component child. From fa513898414cfc40d5c678b1edcae20e82f1beab Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Tue, 12 May 2026 10:56:48 +0800 Subject: [PATCH 2/3] docs: fix anchor link for Align Overflow section Change header from '### align.overflow' to '### Align Overflow' so the generated anchor #align-overflow matches the link in the props table. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index daf2583..e1e83b7 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ Online demo: https://tooltip-react-component.vercel.app/ | classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class | | styles | styles?: {root?: React.CSSProperties;container?: React.CSSProperties;}; | | Semantic DOM styles | -### align.overflow +### Align Overflow The `align` prop accepts an object that may include an `overflow` field to control how the tooltip adjusts when it overflows the visible area. This is powered by [dom-align](https://github.com/yiminghe/dom-align). From f6b74166b8a291463d70339f90f2e4fa4dbbcf6e Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 12 May 2026 11:07:39 +0800 Subject: [PATCH 3/3] Apply suggestion from @gemini-code-assist[bot] Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e1e83b7..362bc0d 100644 --- a/README.md +++ b/README.md @@ -83,7 +83,7 @@ Online demo: https://tooltip-react-component.vercel.app/ | mouseLeaveDelay | number | 0.1 | delay time (in second) before tooltip hides when mouse leave | | getTooltipContainer | (triggerNode: HTMLElement) => HTMLElement | () => document.body | get container of tooltip, default to body | | destroyOnHidden | boolean | false | destroy tooltip when it is hidden | -| align | object | | align config of tooltip, ref [dom-align](https://github.com/yiminghe/dom-align). See [align overflow](#align-overflow) below | +| align | object | | align config of tooltip, ref [dom-align](https://github.com/yiminghe/dom-align). See [Align Overflow](#align-overflow) below | | showArrow | boolean \| object | false | whether to show arrow of tooltip | | zIndex | number | | config popup tooltip zIndex | | classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class |