Skip to content

Commit 8928f97

Browse files
gabrieljablonskigabrieljablonski
committed
docs: render usage example
1 parent b2545db commit 8928f97

File tree

2 files changed

+128
-5
lines changed

2 files changed

+128
-5
lines changed

‎docs/docs/examples/render.mdx

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Render
6+
7+
Using the ReactTooltip render prop to render dynamic content based on the active anchor element.
8+
9+
import { Tooltip } from 'react-tooltip'
10+
import 'react-tooltip/dist/react-tooltip.css'
11+
12+
export const TooltipAnchor = ({ children, id, ...rest }) => {
13+
return (
14+
<span
15+
id={id}
16+
style={{
17+
display: 'flex',
18+
justifyContent: 'center',
19+
margin: 'auto',
20+
alignItems: 'center',
21+
width: '60px',
22+
height: '60px',
23+
borderRadius: '60px',
24+
color: '#222',
25+
background: 'rgba(255, 255, 255, 1)',
26+
cursor: 'pointer',
27+
boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
28+
border: '1px solid #333',
29+
}}
30+
{...rest}
31+
>
32+
{children}
33+
</span>
34+
)
35+
}
36+
37+
### Basic usage
38+
39+
The `render` prop can be used to render the tooltip content dynamically based on the currently active anchor element.
40+
The function signature is as follows:
41+
42+
```ts
43+
(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
44+
```
45+
46+
- `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element
47+
- `activeAnchor` is a ref to the anchor element currently active (or `null` if no element is active)
48+
- `ChildrenType` is essentially the same as `React.ReactNode`
49+
50+
```jsx
51+
import { Tooltip } from 'react-tooltip';
52+
import 'react-tooltip/dist/react-tooltip.css';
53+
54+
<a
55+
data-tooltip-id="my-tooltip"
56+
data-tooltip-content="1"
57+
data-some-relevant-attr="wow"
58+
>
59+
◕‿‿◕
60+
</a>
61+
<a
62+
data-tooltip-id="my-tooltip"
63+
data-tooltip-content="2"
64+
data-some-relevant-attr="so relevant"
65+
>
66+
◕‿‿◕
67+
</a>
68+
<a
69+
data-tooltip-id="my-tooltip"
70+
data-tooltip-content="3"
71+
data-some-relevant-attr="much important"
72+
>
73+
◕‿‿◕
74+
</a>
75+
<Tooltip
76+
id="my-tooltip"
77+
render={({ content, activeAnchor }) => (
78+
<span>
79+
The element #{content} is currently active.
80+
<br/>
81+
Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'}
82+
</span>
83+
)}
84+
/>
85+
```
86+
87+
<div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
88+
<TooltipAnchor
89+
data-tooltip-id="my-tooltip"
90+
data-tooltip-content="1"
91+
data-some-relevant-attr="wow"
92+
>
93+
◕‿‿◕
94+
</TooltipAnchor>
95+
<TooltipAnchor
96+
data-tooltip-id="my-tooltip"
97+
data-tooltip-content="2"
98+
data-some-relevant-attr="so relevant"
99+
>
100+
◕‿‿◕
101+
</TooltipAnchor>
102+
<TooltipAnchor
103+
data-tooltip-id="my-tooltip"
104+
data-tooltip-content="3"
105+
data-some-relevant-attr="much important"
106+
>
107+
◕‿‿◕
108+
</TooltipAnchor>
109+
<Tooltip
110+
id="my-tooltip"
111+
render={({ content, activeAnchor }) => (
112+
<span>
113+
The element #{content} is currently active.
114+
<br/>
115+
Relevant attribute:{' '}
116+
{
117+
activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'
118+
}
119+
</span>
120+
)}
121+
/>
122+
</div>

‎docs/docs/options.mdx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,14 +100,15 @@ import 'react-tooltip/dist/react-tooltip.css'
100100
| `className` | `string` | no | | | Class name to customize tooltip element |
101101
| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element |
102102
| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) |
103-
| `html` | `string` | no | | | HTML content to de displayed in tooltip |
103+
| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead |
104+
| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) |
104105
| `place` | `string` | no | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
105106
| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
106107
| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element |
107-
| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead |
108-
| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details |
109-
| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
110-
| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
108+
| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead |
109+
| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details |
110+
| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
111+
| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
111112
| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content |
112113
| `events` | `string[]` | no | `hover` | `hover` `click` | Events to watch for when handling the tooltip state |
113114
| `positionStrategy` | `string` | no | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |

0 commit comments

Comments
 (0)