-
-
Notifications
You must be signed in to change notification settings - Fork 530
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d07bc9b
commit f53d1c9
Showing
2 changed files
with
181 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| --- | ||
| sidebar_position: 1 | ||
| --- | ||
|
|
||
| # Imperative mode | ||
|
|
||
| Using the ReactTooltip imperative mode to control the tooltip programatically. | ||
|
|
||
| import { useRef } from 'react'; | ||
| import { Tooltip } from 'react-tooltip' | ||
|
|
||
| export const TooltipAnchor = ({ children, id, ...rest }) => { | ||
| return ( | ||
| <span | ||
| id={id} | ||
| style={{ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| margin: 'auto', | ||
| alignItems: 'center', | ||
| width: '60px', | ||
| height: '60px', | ||
| borderRadius: '60px', | ||
| color: '#222', | ||
| background: 'rgba(255, 255, 255, 1)', | ||
| cursor: 'pointer', | ||
| boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)', | ||
| border: '1px solid #333', | ||
| }} | ||
| {...rest} | ||
| > | ||
| {children} | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| ### Basic usage | ||
|
|
||
| A ref object created with `React.useRef()` can passed to the `ref` tooltip prop. | ||
| It allows you to expose internal state variables (read-only), and also to control the tooltip programatically. | ||
|
|
||
| The relevant interfaces are as follows: | ||
|
|
||
| ```ts | ||
| interface TooltipImperativeOpenOptions { | ||
| anchorSelect?: string | ||
| position?: IPosition | ||
| place?: PlacesType | ||
| /** | ||
| * In practice, `ChildrenType` -> `React.ReactNode` | ||
| */ | ||
| content?: ChildrenType | ||
| } | ||
|
|
||
| interface TooltipImperativeProps { | ||
| open: (options?: TooltipImperativeOpenOptions) => void | ||
| close: () => void | ||
| /** | ||
| * @readonly | ||
| */ | ||
| activeAnchor: HTMLElement | null | ||
| /** | ||
| * @readonly | ||
| */ | ||
| place: PlacesType | ||
| /** | ||
| * @readonly | ||
| */ | ||
| isOpen: boolean | ||
| } | ||
| ``` | ||
|
|
||
| - `open()` opens the tooltip programatically. All of the function 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 | ||
|
|
||
| :::note | ||
|
|
||
| These are read-only. Updating their values has no effect on the tooltip. | ||
|
|
||
| ::: | ||
|
|
||
| - `activeAnchor` is a reference to the current anchor element | ||
| - `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 <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. | ||
|
|
||
| ::: | ||
|
|
||
| ```jsx | ||
| import { useRef } from 'react'; | ||
| import { Tooltip, TooltipImperativeProps } from 'react-tooltip'; | ||
|
|
||
| const tooltipRef1 = useRef<TooltipImperativeProps>(null) | ||
| const tooltipRef2 = useRef<TooltipImperativeProps>(null) | ||
|
|
||
| <a id="my-element"> | ||
| ◕‿‿◕ | ||
| </a> | ||
| <button | ||
| onClick={() => { | ||
| tooltipRef1.current?.open({ | ||
| anchorSelect: '#my-element', | ||
| content: 'Hello world!', | ||
| }) | ||
| tooltipRef2.current?.open({ | ||
| position: { | ||
| x: Math.random() * 500, | ||
| y: Math.random() * 300, | ||
| }, | ||
| place: 'bottom', | ||
| content: 'Where am I? 😕😕', | ||
| }) | ||
| }} | ||
| > | ||
| Open | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| tooltipRef1.current?.close() | ||
| tooltipRef2.current?.close() | ||
| }} | ||
| > | ||
| Close | ||
| </button> | ||
| <Tooltip ref={tooltipRef1} /> | ||
| <Tooltip ref={tooltipRef2} /> | ||
| ``` | ||
| export const ImperativeModeExample = () => { | ||
| const tooltipRef1 = useRef(null) | ||
| const tooltipRef2 = useRef(null) | ||
| return ( | ||
| <> | ||
| <TooltipAnchor id="my-element"> | ||
| ◕‿‿◕ | ||
| </TooltipAnchor> | ||
| <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}> | ||
| <button | ||
| onClick={() => { | ||
| tooltipRef1.current?.open({ | ||
| anchorSelect: '#my-element', | ||
| content: 'Hello world!', | ||
| }) | ||
| tooltipRef2.current?.open({ | ||
| position: { | ||
| x: 300 + Math.random() * 500, | ||
| y: 300 + Math.random() * 300, | ||
| }, | ||
| place: 'bottom', | ||
| content: 'Where am I? 😕😕', | ||
| }) | ||
| }} | ||
| > | ||
| Open | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| tooltipRef1.current?.close() | ||
| tooltipRef2.current?.close() | ||
| }} | ||
| > | ||
| Close | ||
| </button> | ||
| </div> | ||
| <Tooltip ref={tooltipRef1} /> | ||
| <Tooltip ref={tooltipRef2} /> | ||
| </> | ||
| ) | ||
| } | ||
| <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: 'fit-content', margin: 'auto' }}> | ||
| <ImperativeModeExample /> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters