From d50dde7ffe19f1a41a986baec6e9d3f98d2ad34b Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Wed, 1 Nov 2023 15:40:21 -0300 Subject: [PATCH] docs: imperative mode --- docs/docs/examples/imperative-mode.mdx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/docs/docs/examples/imperative-mode.mdx b/docs/docs/examples/imperative-mode.mdx index 93d92eb2..e41502cd 100644 --- a/docs/docs/examples/imperative-mode.mdx +++ b/docs/docs/examples/imperative-mode.mdx @@ -70,13 +70,23 @@ interface TooltipImperativeProps { } ``` -- `open()` opens the tooltip programatically. All of the function arguments are optional +#### Methods + +:::info + +The imperative methods can be applied alongside regular tooltip usage. For example, you could use just `close()` to close a regular tooltip after an API request is finished. + +::: + +- `open()` opens the tooltip programatically. All of the arguments are optional - `anchorSelect` overrides the selector currently in use. Ideally, it should match only one element (e.g. `#some-element`) - `position` overrides the tooltip position. Behaves the same way as the `position` tooltip prop - `place` overrides the tooltip placement relative to the anchor. Behaves the same was the `place` tooltip prop - `content` overrides the tooltip content - `close()` closes the tooltip programatically +#### Internal state + :::note These are read-only. Updating their values has no effect on the tooltip. @@ -87,12 +97,6 @@ These are read-only. Updating their values has no effect on the tooltip. - `place` is the current tooltip placement relative to the anchor element. Can differ from the `place` tooltip prop if the tooltip is close to the edges of its container - `isOpen` indicates whether the tooltip is currently being shown or not -:::info - -The imperative methods can be applied alongside regular tooltip usage. For example, you could use just `close()` to close a regular tooltip after an API request is finished. - -::: - ```jsx import { useRef } from 'react'; import { Tooltip, TooltipImperativeProps } from 'react-tooltip';