diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
index ea7aefab..e689bc9b 100644
--- a/docs/docs/options.mdx
+++ b/docs/docs/options.mdx
@@ -69,7 +69,7 @@ import { Tooltip } from 'react-tooltip';
| data-tooltip-delay-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip |
| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
| data-tooltip-hidden | boolean | false | `false` | `true` `false` | Tooltip will not be shown |
-| data-tooltip-class-name | string | false | | | Classnames for the tooltip container |
+| data-tooltip-class-name | string | false | | | Classnames for the tooltip container |
### Props
@@ -88,49 +88,50 @@ import { Tooltip } from 'react-tooltip';
#### Available props
-| name | type | required | default | values | description |
-| ----------------------- | -------------------------------------- | -------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref` | Tooltip reference | no | | `React.useRef` | Reference object which exposes internal state, and some methods for manually controlling the tooltip. See [the examples](./examples/imperative-mode.mdx). |
-| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally |
-| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally |
-| `content` | `string` | no | | | Content to be displayed in tooltip (`html` prop is priorized over `content`) |
-| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to be 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` `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 |
-| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details |
-| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
-| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
-| `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 |
-| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead |
-| `openOnClick` | `boolean` | no | `false` | `true` `false` | When enabled, the tooltip will open on click instead of on hover. Use `openEvents`, `closeEvents`, and `globalCloseEvents` for more customization |
-| `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 |
-| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
-| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |
-| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
-| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown |
-| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
-| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
-| ~~`closeOnEsc`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Pressing escape key will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. |
-| ~~`closeOnScroll`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Scrolling will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. |
-| ~~`closeOnResize`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Resizing the window will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. |
-| `openEvents` | `Record` | no | `mouseover` `focus` | `mouseover` `focus` `mouseenter` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip |
-| `closeEvents` | `Record` | no | `mouseout` `blur` | `mouseout` `blur` `mouseleave` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip |
-| `globalCloseEvents` | `Record` | no | | `escape` `scroll` `resize` `clickOutsideAnchor` | Global events to be listened to close the tooltip (`escape` closes on pressing `ESC`, `clickOutsideAnchor` is useful with click events on `openEvents`) |
-| `imperativeModeOnly` | `boolean` | no | `false` | `true` `false` | When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details |
-| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip |
-| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
-| `isOpen` | `boolean` | no | | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
-| `defaultIsOpen` | `boolean` | no | `false` | `true` `false` | It determines the initial visibility of the tooltip. If true, the tooltip is shown by default, if false or not provided then it's in hidden state by default. |
-| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
-| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
-| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
-| `disableTooltip` | `function` | no | | | A function that takes a ref to each anchor element and returns a boolean indicating whether to hide the tooltip for that specific anchor. |
-| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information |
-| `border` | CSS border | no | | a CSS border style | Change the style of the tooltip border (including the arrow) |
-| `opacity` | CSS opacity | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip |
-| `arrowColor` | CSS color | no | | a CSS background color | Change color of the tooltip arrow |
-| `disableStyleInjection` | `boolean` or `'core'` | no | `false` | `true` `false` `'core'` | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details |
-| `role` | React.AriaRole | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements |
+| name | type | required | default | values | description |
+| ----------------------- | -------------------------- | -------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` | Tooltip reference | no | | `React.useRef` | Reference object which exposes internal state, and some methods for manually controlling the tooltip. See [the examples](./examples/imperative-mode.mdx). |
+| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally |
+| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally |
+| `content` | `string` | no | | | Content to be displayed in tooltip (`html` prop is priorized over `content`) |
+| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to be 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` `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 |
+| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details |
+| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
+| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
+| `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 |
+| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead |
+| `openOnClick` | `boolean` | no | `false` | `true` `false` | When enabled, the tooltip will open on click instead of on hover. Use `openEvents`, `closeEvents`, and `globalCloseEvents` for more customization |
+| `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 |
+| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
+| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |
+| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
+| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown |
+| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
+| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
+| ~~`closeOnEsc`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Pressing escape key will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. |
+| ~~`closeOnScroll`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Scrolling will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. |
+| ~~`closeOnResize`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Resizing the window will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. |
+| `openEvents` | `Record` | no | `mouseover` `focus` | `mouseover` `focus` `mouseenter` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip |
+| `closeEvents` | `Record` | no | `mouseout` `blur` | `mouseout` `blur` `mouseleave` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip |
+| `globalCloseEvents` | `Record` | no | | `escape` `scroll` `resize` `clickOutsideAnchor` | Global events to be listened to close the tooltip (`escape` closes on pressing `ESC`, `clickOutsideAnchor` is useful with click events on `openEvents`) |
+| `imperativeModeOnly` | `boolean` | no | `false` | `true` `false` | When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details |
+| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip |
+| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
+| `isOpen` | `boolean` | no | | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
+| `defaultIsOpen` | `boolean` | no | `false` | `true` `false` | It determines the initial visibility of the tooltip. If true, the tooltip is shown by default, if false or not provided then it's in hidden state by default. |
+| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
+| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
+| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
+| `disableTooltip` | `function` | no | | | A function that takes a ref to each anchor element and returns a boolean indicating whether to hide the tooltip for that specific anchor. |
+| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information |
+| `border` | CSS border | no | | a CSS border style | Change the style of the tooltip border (including the arrow) |
+| `opacity` | CSS opacity | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip |
+| `arrowColor` | CSS color | no | | a CSS background color | Change color of the tooltip arrow |
+| `arrowSize` | `number` | no | `8` | | Change the size of the tooltip arrow |
+| `disableStyleInjection` | `boolean` or `'core'` | no | `false` | `true` `false` `'core'` | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details |
+| `role` | React.AriaRole | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements |
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 336faa99..63310afb 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -68,6 +68,7 @@ const Tooltip = ({
border,
opacity,
arrowColor,
+ arrowSize = 8,
role = 'tooltip',
}: ITooltip) => {
const tooltipRef = useRef(null)
@@ -345,6 +346,7 @@ const Tooltip = ({
strategy: positionStrategy,
middlewares,
border,
+ arrowSize,
}).then((computedStylesData) => {
handleComputedPosition(computedStylesData)
})
@@ -437,6 +439,7 @@ const Tooltip = ({
strategy: positionStrategy,
middlewares,
border,
+ arrowSize,
}).then((computedStylesData) => {
if (!mounted.current) {
// invalidate computed positions after remount
@@ -456,6 +459,7 @@ const Tooltip = ({
position,
imperativeOptions?.position,
float,
+ arrowSize,
])
useEffect(() => {
@@ -899,6 +903,7 @@ const Tooltip = ({
background: arrowColor
? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
: undefined,
+ '--rt-arrow-size': `${arrowSize}px`,
}}
ref={tooltipArrowRef}
/>
diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
index ee7fc42c..ebb75b90 100644
--- a/src/components/Tooltip/TooltipTypes.d.ts
+++ b/src/components/Tooltip/TooltipTypes.d.ts
@@ -158,5 +158,6 @@ export interface ITooltip {
border?: CSSProperties['border']
opacity?: CSSProperties['opacity']
arrowColor?: CSSProperties['backgroundColor']
+ arrowSize?: number
role?: React.AriaRole
}
diff --git a/src/components/Tooltip/core-styles.module.css b/src/components/Tooltip/core-styles.module.css
index cbb99823..0b1d4349 100644
--- a/src/components/Tooltip/core-styles.module.css
+++ b/src/components/Tooltip/core-styles.module.css
@@ -14,6 +14,7 @@
.arrow {
position: absolute;
background: inherit;
+ z-index: -1;
}
.noArrow {
diff --git a/src/components/Tooltip/styles.module.css b/src/components/Tooltip/styles.module.css
index f14041e3..f9afec59 100644
--- a/src/components/Tooltip/styles.module.css
+++ b/src/components/Tooltip/styles.module.css
@@ -6,8 +6,8 @@
}
.arrow {
- width: 8px;
- height: 8px;
+ width: var(--rt-arrow-size);
+ height: var(--rt-arrow-size);
}
[class*='react-tooltip__place-top'] > .arrow {
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index 289f1d1d..fd70a431 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -58,6 +58,7 @@ const TooltipController = React.forwardRef(
border,
opacity,
arrowColor,
+ arrowSize,
setIsOpen,
afterShow,
afterHide,
@@ -368,6 +369,7 @@ const TooltipController = React.forwardRef(
border,
opacity,
arrowColor,
+ arrowSize,
setIsOpen,
afterShow,
afterHide,
diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts
index a201ba1d..4aac979c 100644
--- a/src/components/TooltipController/TooltipControllerTypes.d.ts
+++ b/src/components/TooltipController/TooltipControllerTypes.d.ts
@@ -91,6 +91,7 @@ export interface ITooltipController {
border?: CSSProperties['border']
opacity?: CSSProperties['opacity']
arrowColor?: CSSProperties['backgroundColor']
+ arrowSize?: number
setIsOpen?: (value: boolean) => void
afterShow?: () => void
afterHide?: () => void
diff --git a/src/test/__snapshots__/tooltip-attributes.spec.js.snap b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
index 9f36495b..c4b2b54a 100644
--- a/src/test/__snapshots__/tooltip-attributes.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
@@ -17,7 +17,7 @@ exports[`tooltip attributes basic tooltip 1`] = `
Hello World!
@@ -41,7 +41,7 @@ exports[`tooltip attributes tooltip with class name 1`] = `
Hello World!
@@ -65,7 +65,7 @@ exports[`tooltip attributes tooltip with place 1`] = `
Hello World!
diff --git a/src/test/__snapshots__/tooltip-props.spec.js.snap b/src/test/__snapshots__/tooltip-props.spec.js.snap
index 9dc8d750..9a4a0ab4 100644
--- a/src/test/__snapshots__/tooltip-props.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-props.spec.js.snap
@@ -16,7 +16,7 @@ exports[`tooltip props basic tooltip 1`] = `
Hello World!
@@ -40,7 +40,7 @@ exports[`tooltip props clickable tooltip 1`] = `
@@ -62,7 +62,7 @@ exports[`tooltip props tooltip with custom position 1`] = `
Hello World!
@@ -94,7 +94,7 @@ exports[`tooltip props tooltip with delay show 1`] = `
Hello World!
@@ -116,7 +116,7 @@ exports[`tooltip props tooltip with disableTooltip return false 1`] = `
Hello World!
@@ -138,7 +138,7 @@ exports[`tooltip props tooltip with float 1`] = `
Hello World!
@@ -165,7 +165,7 @@ exports[`tooltip props tooltip with html 1`] = `
@@ -187,7 +187,7 @@ exports[`tooltip props tooltip with place 1`] = `
Hello World!
diff --git a/src/tokens.css b/src/tokens.css
index e0c198ff..6220a6e5 100644
--- a/src/tokens.css
+++ b/src/tokens.css
@@ -8,4 +8,5 @@
--rt-opacity: 0.9;
--rt-transition-show-delay: 0.15s;
--rt-transition-closing-delay: 0.15s;
+ --rt-arrow-size: 8px;
}
diff --git a/src/utils/compute-tooltip-position-types.d.ts b/src/utils/compute-tooltip-position-types.d.ts
index 984db78e..5fdd79c5 100644
--- a/src/utils/compute-tooltip-position-types.d.ts
+++ b/src/utils/compute-tooltip-position-types.d.ts
@@ -10,6 +10,7 @@ export interface IComputePositionArgs {
strategy?: 'absolute' | 'fixed'
middlewares?: Middleware[]
border?: CSSProperties['border']
+ arrowSize?: number
}
export interface IComputedPosition {
diff --git a/src/utils/compute-tooltip-position.ts b/src/utils/compute-tooltip-position.ts
index 1af535b9..2d6ddd4a 100644
--- a/src/utils/compute-tooltip-position.ts
+++ b/src/utils/compute-tooltip-position.ts
@@ -16,6 +16,7 @@ const computeTooltipPosition = async ({
shift({ padding: 5 }),
],
border,
+ arrowSize = 8,
}: IComputePositionArgs) => {
if (!elementReference) {
// elementReference can be null or undefined and we will not compute the position
@@ -78,7 +79,7 @@ const computeTooltipPosition = async ({
right: '',
bottom: '',
...borderSide,
- [staticSide]: `-${4 + borderWidth}px`,
+ [staticSide]: `-${arrowSize / 2 + borderWidth}px`,
}
/* c8 ignore end */