Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0f9cdb3

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /