From a684598ae047a163072be191a30604e898495d30 Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Fri, 23 Jun 2023 15:07:42 -0400 Subject: [PATCH 1/8] Update TooltipTypes.d.ts Support more place types that floating-ui supports. These actually already work but I need the type to be updated to reflect existing allowed types. --- src/components/Tooltip/TooltipTypes.d.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index 5d35edc5..68e6f168 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" + | "right" + | "bottom" + | "left" + | "top-start" + | "top-end" + | "right-start" + | "right-end" + | "bottom-start" + | "bottom-end" + | "left-start" + | "left-end"; export type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info' From 737efb81c7c8c7c2ebd9f16d253b841db89a3a62 Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Fri, 23 Jun 2023 15:28:57 -0400 Subject: [PATCH 2/8] Update src/components/Tooltip/TooltipTypes.d.ts Co-authored-by: Gabriel Jablonski --- src/components/Tooltip/TooltipTypes.d.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index 68e6f168..23f5c0b0 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -1,18 +1,18 @@ import type { ElementType, ReactNode, CSSProperties, RefObject } from 'react' export type PlacesType = - | "top" - | "right" - | "bottom" - | "left" - | "top-start" - | "top-end" - | "right-start" - | "right-end" - | "bottom-start" - | "bottom-end" - | "left-start" - | "left-end"; + | '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' From 262911c634f4bea12bd6006509c443d84c403149 Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Fri, 23 Jun 2023 17:45:37 -0400 Subject: [PATCH 3/8] Update compute-positions-types.d.ts Updated types on place --- src/utils/compute-positions-types.d.ts | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/utils/compute-positions-types.d.ts b/src/utils/compute-positions-types.d.ts index baa0596c..b8cc9ba2 100644 --- a/src/utils/compute-positions-types.d.ts +++ b/src/utils/compute-positions-types.d.ts @@ -1,11 +1,23 @@ import type { Middleware } from '../components/Tooltip/TooltipTypes' export interface IComputePositions { - elementReference?: Element | HTMLElement | null - tooltipReference?: Element | HTMLElement | null - tooltipArrowReference?: Element | HTMLElement | null - place?: 'top' | 'right' | 'bottom' | 'left' - offset?: number - strategy?: 'absolute' | 'fixed' - middlewares?: Middleware[] + elementReference?: Element | HTMLElement | null; + tooltipReference?: Element | HTMLElement | null; + tooltipArrowReference?: Element | HTMLElement | null; + 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[]; } From 5fa007e196e20082cc1d8d5a777c449887fc78a5 Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Fri, 23 Jun 2023 17:49:41 -0400 Subject: [PATCH 4/8] Update options.mdx Added more place types --- docs/docs/options.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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~~
**DEPRECATED**
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~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | From 625e655b01ee13b28d95e55991ffdae2a944456b Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Fri, 23 Jun 2023 17:51:01 -0400 Subject: [PATCH 5/8] Update place.mdx Updated place example to include more types --- docs/docs/examples/place.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/examples/place.mdx b/docs/docs/examples/place.mdx index ab823a6e..10e53f2b 100644 --- a/docs/docs/examples/place.mdx +++ b/docs/docs/examples/place.mdx @@ -34,7 +34,7 @@ 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 From b5ba13ace08385e0d7b6d6f1b0bef168fab23362 Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Fri, 23 Jun 2023 17:53:20 -0400 Subject: [PATCH 6/8] Update compute-positions-types.d.ts removed semi-colons --- src/utils/compute-positions-types.d.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/utils/compute-positions-types.d.ts b/src/utils/compute-positions-types.d.ts index b8cc9ba2..2d89e728 100644 --- a/src/utils/compute-positions-types.d.ts +++ b/src/utils/compute-positions-types.d.ts @@ -1,9 +1,9 @@ import type { Middleware } from '../components/Tooltip/TooltipTypes' export interface IComputePositions { - elementReference?: Element | HTMLElement | null; - tooltipReference?: Element | HTMLElement | null; - tooltipArrowReference?: Element | HTMLElement | null; + elementReference?: Element | HTMLElement | null + tooltipReference?: Element | HTMLElement | null + tooltipArrowReference?: Element | HTMLElement | null place?: | 'top' | 'top-start' @@ -17,7 +17,7 @@ export interface IComputePositions { | 'left' | 'left-start' | 'left-end'; - offset?: number; - strategy?: 'absolute' | 'fixed'; - middlewares?: Middleware[]; + offset?: number + strategy?: 'absolute' | 'fixed' + middlewares?: Middleware[] } From 1afbb63a69f1c44860a72fc4694edb46dd1b9fbc Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Fri, 23 Jun 2023 17:53:54 -0400 Subject: [PATCH 7/8] Update compute-positions-types.d.ts Removed semi-colon --- src/utils/compute-positions-types.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/compute-positions-types.d.ts b/src/utils/compute-positions-types.d.ts index 2d89e728..fc960570 100644 --- a/src/utils/compute-positions-types.d.ts +++ b/src/utils/compute-positions-types.d.ts @@ -16,7 +16,7 @@ export interface IComputePositions { | 'bottom-end' | 'left' | 'left-start' - | 'left-end'; + | 'left-end' offset?: number strategy?: 'absolute' | 'fixed' middlewares?: Middleware[] From fdbe627e5c0c67d00ab4fc55eb71e035e0fb8889 Mon Sep 17 00:00:00 2001 From: colynfulcrum <122113864+colynfulcrum@users.noreply.github.com> Date: Sat, 24 Jun 2023 09:42:45 -0400 Subject: [PATCH 8/8] Update place.mdx Updated examples to include more placement types --- docs/docs/examples/place.mdx | 71 +++++++++++++++++++++++++++++------- 1 file changed, 58 insertions(+), 13 deletions(-) diff --git a/docs/docs/examples/place.mdx b/docs/docs/examples/place.mdx index 10e53f2b..b8e1b108 100644 --- a/docs/docs/examples/place.mdx +++ b/docs/docs/examples/place.mdx @@ -40,31 +40,76 @@ The `place` prop and the `data-tooltip-place` attribute accept the following val ```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'] ◕‿‿◕ - - - - +{PLACES.map(place => ( + +))} ``` -◕‿‿◕ - - - - +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 ( + <> +
+ ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ +
+
+ {PLACES1.map(place => ( + + ))} + {PLACES2.map(place => ( + + ))} + {PLACES3.map(place => ( + + ))} +
+ + ) +} + + + + ### 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) setPlace(p => (p + 1) % 4)} + onClick={() => setPlace(p => (p + 1) % 12)} > ◕‿‿◕ @@ -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 ( <> setPlace(p => (p + 1) % 4)} + onClick={() => setPlace(p => (p + 1) % 12)} > ◕‿‿◕