Skip to content

Commit 4202bd6

Browse files
yoyo837gemini-code-assist[bot]
yoyo837
and
gemini-code-assist[bot]
authored
docs: document align.overflow option including alwaysByViewport (#511)
* docs: document align.overflow option including alwaysByViewport Closes #363 * 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. * Apply suggestion from @gemini-code-assist[bot] Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
1 parent 02bfaab commit 4202bd6

1 file changed

Lines changed: 25 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,36 @@ Online demo: https://tooltip-react-component.vercel.app/
8383
| mouseLeaveDelay | number | 0.1 | delay time (in second) before tooltip hides when mouse leave |
8484
| getTooltipContainer | (triggerNode: HTMLElement) => HTMLElement | () => document.body | get container of tooltip, default to body |
8585
| destroyOnHidden | boolean | false | destroy tooltip when it is hidden |
86-
| align | object | | align config of tooltip. Please ref demo for usage example |
86+
| align | object | | align config of tooltip, ref [dom-align](https://github.com/yiminghe/dom-align). See [Align Overflow](#align-overflow) below |
8787
| showArrow | boolean \| object | false | whether to show arrow of tooltip |
8888
| zIndex | number | | config popup tooltip zIndex |
8989
| classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class |
9090
| styles | styles?: {root?: React.CSSProperties;container?: React.CSSProperties;}; | | Semantic DOM styles |
9191

92+
### Align Overflow
93+
94+
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).
95+
96+
| name | type | default | description |
97+
| ---------------- | ---------------- | ------- | -------------------------------------------------------------------------------------------------------- |
98+
| adjustX | boolean \| number | false | adjust tooltip position in the X direction when it overflows |
99+
| adjustY | boolean \| number | false | adjust tooltip position in the Y direction when it overflows |
100+
| alwaysByViewport | boolean | false | when `true`, always adjusts position based on the viewport rather than the scrollable parent container |
101+
102+
```jsx
103+
<Tooltip
104+
placement="top"
105+
align={{
106+
overflow: { adjustX: true, adjustY: true, alwaysByViewport: true },
107+
}}
108+
overlay={<span>tooltip content</span>}
109+
>
110+
<button>hover me</button>
111+
</Tooltip>
112+
```
113+
114+
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.
115+
92116
## Important Note
93117

94118
`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.

0 commit comments

Comments
 (0)