Skip to content

Commit 0f9cdb3

Browse files
danielbariondanielbarion
authored
Merge pull request #1047 from colynfulcrum/master
Support more placement options in TooltipTypes.d.ts
2 parents 546a2b2 + fdbe627 commit 0f9cdb3

File tree

4 files changed

+87
-18
lines changed

4 files changed

+87
-18
lines changed

‎docs/docs/examples/place.mdx

Lines changed: 59 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,37 +34,82 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3434
)
3535
}
3636

37-
The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'right' | 'bottom' | 'left'`.
37+
The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`.
3838

3939
### Using `data-tooltip-place` attribute
4040

4141
```jsx
4242
import { Tooltip } from 'react-tooltip';
43+
const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
4344

4445
<a id="my-tooltip-anchor">◕‿‿◕</a>
45-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
46-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the right!" place="right" />
47-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the bottom!" place="bottom" />
48-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the left!" place="left" />
46+
{PLACES.map(place => (
47+
<Tooltip
48+
key={place}
49+
anchorSelect="#my-tooltip-anchor"
50+
content={`Hello world from the ${place}!`}
51+
place={place}
52+
/>
53+
))}
4954
```
5055

51-
<TooltipAnchor id="my-tooltip-anchor">◕‿‿◕</TooltipAnchor>
52-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
53-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the right!" place="right" />
54-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the bottom!" place="bottom" />
55-
<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the left!" place="left" />
56+
export const PlacementExampleAttributes = () => {
57+
const PLACES1 = ['top', 'right', 'bottom', 'left'];
58+
const PLACES2 = ['top-start', 'right-start', 'bottom-start', 'left-start'];
59+
const PLACES3 = ['top-end', 'right-end', 'bottom-end', 'left-end'];
60+
61+
return (
62+
<>
63+
<div style={{display: 'flex', gap: '16px'}}>
64+
<TooltipAnchor id="my-tooltip-anchor1">◕‿‿◕</TooltipAnchor>
65+
<TooltipAnchor id="my-tooltip-anchor2">◕‿‿◕</TooltipAnchor>
66+
<TooltipAnchor id="my-tooltip-anchor3">◕‿‿◕</TooltipAnchor>
67+
</div>
68+
<div>
69+
{PLACES1.map(place => (
70+
<Tooltip
71+
key={place}
72+
anchorSelect="#my-tooltip-anchor1"
73+
content={`Hello world from the ${place}!`}
74+
place={place}
75+
/>
76+
))}
77+
{PLACES2.map(place => (
78+
<Tooltip
79+
key={place}
80+
anchorSelect="#my-tooltip-anchor2"
81+
content={`Hello world from the ${place}!`}
82+
place={place}
83+
/>
84+
))}
85+
{PLACES3.map(place => (
86+
<Tooltip
87+
key={place}
88+
anchorSelect="#my-tooltip-anchor3"
89+
content={`Hello world from the ${place}!`}
90+
place={place}
91+
/>
92+
))}
93+
</div>
94+
</>
95+
)
96+
}
97+
98+
<PlacementExampleAttributes />
99+
100+
56101

57102
### Using `place` prop
58103

59104
```jsx
60105
import { Tooltip } from 'react-tooltip';
61106

62-
const PLACES = ['top', 'right', 'bottom', 'left']
107+
const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
63108
const [place, setPlace] = useState(0)
64109

65110
<a
66111
data-tooltip-id="my-tooltip"
67-
onClick={() => setPlace(p => (p + 1) % 4)}
112+
onClick={() => setPlace(p => (p + 1) % 12)}
68113
>
69114
◕‿‿◕
70115
</a>
@@ -76,14 +121,14 @@ const [place, setPlace] = useState(0)
76121
```
77122

78123
export const PlacementExample = () => {
79-
const PLACES = ['top', 'right', 'bottom', 'left']
124+
const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
80125
const [place, setPlace] = useState(0)
81126

82127
return (
83128
<>
84129
<TooltipAnchor
85130
data-tooltip-id="my-tooltip"
86-
onClick={() => setPlace(p => (p + 1) % 4)}
131+
onClick={() => setPlace(p => (p + 1) % 12)}
87132
>
88133
◕‿‿◕
89134
</TooltipAnchor>

‎docs/docs/options.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ import { Tooltip } from 'react-tooltip';
5959
| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
6060
| data-tooltip-content | string | false | | | Content to de displayed in tooltip (`html` is priorized over `content`) |
6161
| data-tooltip-html | string | false | | | HTML content to de displayed in tooltip |
62-
| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
62+
| data-tooltip-place | string | false | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
6363
| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
6464
| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
6565
| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
@@ -94,7 +94,7 @@ import { Tooltip } from 'react-tooltip';
9494
| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) |
9595
| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead |
9696
| `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) |
97-
| `place` | `string` | no | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
97+
| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
9898
| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
9999
| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element |
100100
| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead |

‎src/components/Tooltip/TooltipTypes.d.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
import type { ElementType, ReactNode, CSSProperties, RefObject } from 'react'
22

3-
export type PlacesType = 'top' | 'right' | 'bottom' | 'left'
3+
export type PlacesType =
4+
| 'top'
5+
| 'top-start'
6+
| 'top-end'
7+
| 'right'
8+
| 'right-start'
9+
| 'right-end'
10+
| 'bottom'
11+
| 'bottom-start'
12+
| 'bottom-end'
13+
| 'left'
14+
| 'left-start'
15+
| 'left-end'
416

517
export type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'
618

‎src/utils/compute-positions-types.d.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,19 @@ export interface IComputePositions {
44
elementReference?: Element | HTMLElement | null
55
tooltipReference?: Element | HTMLElement | null
66
tooltipArrowReference?: Element | HTMLElement | null
7-
place?: 'top' | 'right' | 'bottom' | 'left'
7+
place?:
8+
| 'top'
9+
| 'top-start'
10+
| 'top-end'
11+
| 'right'
12+
| 'right-start'
13+
| 'right-end'
14+
| 'bottom'
15+
| 'bottom-start'
16+
| 'bottom-end'
17+
| 'left'
18+
| 'left-start'
19+
| 'left-end'
820
offset?: number
921
strategy?: 'absolute' | 'fixed'
1022
middlewares?: Middleware[]

0 commit comments

Comments
 (0)