diff --git a/docs/docs/examples/place.mdx b/docs/docs/examples/place.mdx
index ab823a6e..b8e1b108 100644
--- a/docs/docs/examples/place.mdx
+++ b/docs/docs/examples/place.mdx
@@ -34,37 +34,82 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
)
}
-The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'right' | 'bottom' | 'left'`.
+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'`.
### Using `data-tooltip-place` attribute
```jsx
import { Tooltip } from 'react-tooltip';
+const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
<a id="my-tooltip-anchor">◕‿‿◕</a>
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the right!" place="right" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the bottom!" place="bottom" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the left!" place="left" />
+{PLACES.map(place => (
+ <Tooltip
+ key={place}
+ anchorSelect="#my-tooltip-anchor"
+ content={`Hello world from the ${place}!`}
+ place={place}
+ />
+))}
```
-<TooltipAnchor id="my-tooltip-anchor">◕‿‿◕</TooltipAnchor>
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the right!" place="right" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the bottom!" place="bottom" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the left!" place="left" />
+export const PlacementExampleAttributes = () => {
+ const PLACES1 = ['top', 'right', 'bottom', 'left'];
+ const PLACES2 = ['top-start', 'right-start', 'bottom-start', 'left-start'];
+ const PLACES3 = ['top-end', 'right-end', 'bottom-end', 'left-end'];
+
+ return (
+ <>
+ <div style={{display: 'flex', gap: '16px'}}>
+ <TooltipAnchor id="my-tooltip-anchor1">◕‿‿◕</TooltipAnchor>
+ <TooltipAnchor id="my-tooltip-anchor2">◕‿‿◕</TooltipAnchor>
+ <TooltipAnchor id="my-tooltip-anchor3">◕‿‿◕</TooltipAnchor>
+ </div>
+ <div>
+ {PLACES1.map(place => (
+ <Tooltip
+ key={place}
+ anchorSelect="#my-tooltip-anchor1"
+ content={`Hello world from the ${place}!`}
+ place={place}
+ />
+ ))}
+ {PLACES2.map(place => (
+ <Tooltip
+ key={place}
+ anchorSelect="#my-tooltip-anchor2"
+ content={`Hello world from the ${place}!`}
+ place={place}
+ />
+ ))}
+ {PLACES3.map(place => (
+ <Tooltip
+ key={place}
+ anchorSelect="#my-tooltip-anchor3"
+ content={`Hello world from the ${place}!`}
+ place={place}
+ />
+ ))}
+ </div>
+ </>
+ )
+}
+
+<PlacementExampleAttributes />
+
+
### Using `place` prop
```jsx
import { Tooltip } from 'react-tooltip';
-const PLACES = ['top', 'right', 'bottom', 'left']
+const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
const [place, setPlace] = useState(0)
<a
data-tooltip-id="my-tooltip"
- onClick={() => setPlace(p => (p + 1) % 4)}
+ onClick={() => setPlace(p => (p + 1) % 12)}
>
◕‿‿◕
</a>
@@ -76,14 +121,14 @@ const [place, setPlace] = useState(0)
```
export const PlacementExample = () => {
- const PLACES = ['top', 'right', 'bottom', 'left']
+ const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
const [place, setPlace] = useState(0)
return (
<>
<TooltipAnchor
data-tooltip-id="my-tooltip"
- onClick={() => setPlace(p => (p + 1) % 4)}
+ onClick={() => setPlace(p => (p + 1) % 12)}
>
◕‿‿◕
</TooltipAnchor>
diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
index c767c4e1..ed8d2b12 100644
--- a/docs/docs/options.mdx
+++ b/docs/docs/options.mdx
@@ -59,7 +59,7 @@ import { Tooltip } from 'react-tooltip';
| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
| data-tooltip-content | string | false | | | Content to de displayed in tooltip (`html` is priorized over `content`) |
| data-tooltip-html | string | false | | | HTML content to de displayed in tooltip |
-| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
+| 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) |
| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
| 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';
| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) |
| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead |
| `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) |
-| `place` | `string` | no | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
+| `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) |
| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element |
| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead |
diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
index 5d35edc5..23f5c0b0 100644
--- a/src/components/Tooltip/TooltipTypes.d.ts
+++ b/src/components/Tooltip/TooltipTypes.d.ts
@@ -1,6 +1,18 @@
import type { ElementType, ReactNode, CSSProperties, RefObject } from 'react'
-export type PlacesType = 'top' | 'right' | 'bottom' | 'left'
+export type PlacesType =
+ | 'top'
+ | 'top-start'
+ | 'top-end'
+ | 'right'
+ | 'right-start'
+ | 'right-end'
+ | 'bottom'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'left'
+ | 'left-start'
+ | 'left-end'
export type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'
diff --git a/src/utils/compute-positions-types.d.ts b/src/utils/compute-positions-types.d.ts
index baa0596c..fc960570 100644
--- a/src/utils/compute-positions-types.d.ts
+++ b/src/utils/compute-positions-types.d.ts
@@ -4,7 +4,19 @@ export interface IComputePositions {
elementReference?: Element | HTMLElement | null
tooltipReference?: Element | HTMLElement | null
tooltipArrowReference?: Element | HTMLElement | null
- place?: 'top' | 'right' | 'bottom' | 'left'
+ place?:
+ | 'top'
+ | 'top-start'
+ | 'top-end'
+ | 'right'
+ | 'right-start'
+ | 'right-end'
+ | 'bottom'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'left'
+ | 'left-start'
+ | 'left-end'
offset?: number
strategy?: 'absolute' | 'fixed'
middlewares?: Middleware[]