Skip to content

Commit 145e973

Browse files
docs: imperativeModeOnly prop
1 parent a8f5443 commit 145e973

File tree

2 files changed

+11
-0
lines changed

2 files changed

+11
-0
lines changed

docs/docs/examples/imperative-mode.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ interface TooltipImperativeProps {
8787

8888
The imperative methods <b>can</b> be applied alongside regular tooltip usage. For example, you could use just `close()` to close a regular tooltip after an API request is finished.
8989

90+
If you intend on using the tooltip exclusively with these methods, setting the `imperativeModeOnly` tooltip prop to disable default behavior is recommended. Otherwise, you might face undesired behavior.
91+
9092
:::
9193

9294
- `open()` opens the tooltip programatically. All of the arguments are optional
@@ -150,6 +152,14 @@ const tooltipRef2 = useRef<TooltipImperativeProps>(null)
150152
<Tooltip ref={tooltipRef2} />
151153
```
152154
155+
:::caution
156+
157+
Notice the tooltip still closes when unhovering the anchor element. This might be undesired if you're using the imperative methods exclusively.
158+
159+
If that's the case, use the `imperativeModeOnly` tooltip prop to disable default tooltip behavior.
160+
161+
:::
162+
153163
export const ImperativeModeExample = () => {
154164
const tooltipRef1 = useRef(null)
155165
const tooltipRef2 = useRef(null)

docs/docs/options.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ import { Tooltip } from 'react-tooltip';
118118
| `openEvents` | `Record<string, boolean>` | no | `mouseenter` `focus` | `mouseenter` `focus` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip |
119119
| `closeEvents` | `Record<string, boolean>` | no | `mouseleave` `blur` | `mouseleave` `blur` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip |
120120
| `globalCloseEvents` | `Record<string, boolean>` | no | | `escape` `scroll` `resize` `clickOutsideAnchor` | Global events to be listened to close the tooltip (`escape` closes on pressing `ESC`, `clickOutsideAnchor` is useful with click events on `openEvents`) |
121+
| `imperativeModeOnly` | `boolean` | no | `false` | `true` `false` | When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details |
121122
| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip |
122123
| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
123124
| `isOpen` | `boolean` | no | | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |

0 commit comments

Comments
 (0)