Skip to content

Commit 757e0f4

Browse files
gabrieljablonskigabrieljablonski
committed
Merge branch 'master' into feat/control-inject-styles
2 parents 3a96888 + 01305c7 commit 757e0f4

File tree

11 files changed

+91
-19
lines changed

11 files changed

+91
-19
lines changed

‎docs/docs/options.mdx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,14 @@ import { Tooltip } from 'react-tooltip';
113113
| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
114114
| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
115115
| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) |
116-
| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
117-
| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip |
116+
| `closeOnResize` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
117+
| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip |
118118
| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
119119
| `isOpen` | `boolean` | no | handled by internal state | `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`) |
120120
| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
121121
| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
122122
| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
123123
| `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 |
124+
| `border` | `CSSProperties['border']` | no | | a CSS border style | Change the style of the tooltip border (including the arrow) |
125+
| `opacity` | `CSSProperties['opacity']` | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip |
124126
| `disableStyleInjection` | <code>`boolean` &#124; `'core'`</code> | 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 |

‎docs/docs/upgrade-guide/changelog-v4-v5.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@ If you run into any problems with the tooltip not updating after changes are mad
6363
- [x] `offset` - also available on anchor element as `data-tooltip-offset`
6464
- [ ] `padding` - use `className` and custom CSS
6565
- [ ] `multiline` - supported by default in `content` and `html` props
66-
- [ ] `border` - use `className` and custom CSS
67-
- [ ] `borderClass` - use `className` and custom CSS
66+
- [x] `border`
67+
- [ ] `borderClass` - use `border` prop
6868
- [ ] `textColor` - use `className` and custom CSS
6969
- [ ] `backgroundColor` - use `className` and custom CSS
70-
- [ ] `borderColor` - use `className` and custom CSS
70+
- [ ] `borderColor` - use `border` prop
7171
- [ ] `arrowColor` - use `className` and custom CSS
7272
- [ ] `arrowRadius` - use `className` and custom CSS
7373
- [ ] `tooltipRadius` - use `className` and custom CSS

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"raw-loader": "^4.0.2",
2424
"react": "^18.2.0",
2525
"react-dom": "^18.2.0",
26-
"react-tooltip": "5.16.1"
26+
"react-tooltip": "5.18.0"
2727
},
2828
"devDependencies": {
2929
"@docusaurus/module-type-aliases": "^2.4.1",

‎docs/yarn.lock

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2775,9 +2775,9 @@ caniuse-api@^3.0.0:
27752775
lodash.uniq "^4.5.0"
27762776

27772777
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
2778-
version "1.0.30001434"
2779-
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5"
2780-
integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==
2778+
version "1.0.30001511"
2779+
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001511.tgz"
2780+
integrity sha512-NaWPJawcoedlghN4P7bDNeADD7K+rZaY6V8ZcME7PkEZo/nfOg+lnrUgRWiKbNxcQ4/toFKSxnS4WdbyPZnKkw==
27812781

27822782
ccount@^1.0.0:
27832783
version "1.1.0"
@@ -6126,10 +6126,10 @@ react-textarea-autosize@^8.3.2:
61266126
use-composed-ref "^1.3.0"
61276127
use-latest "^1.2.1"
61286128

6129-
react-tooltip@5.16.1:
6130-
version "5.16.1"
6131-
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.16.1.tgz#dafb42170c50d93eaa06e26581ba8e6f7ceb2c48"
6132-
integrity sha512-z3IKJppX4llW8wQLQB3o5qUutVul79HVXI+Ncjf/5FMHbniCYPnxS1oCLpOhOEG9lV2QZRrQe9+l/pLEPOrrXA==
6129+
react-tooltip@5.18.0:
6130+
version "5.18.0"
6131+
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.18.0.tgz#33e5880ef13e473def47714b17c21b3d77bf258a"
6132+
integrity sha512-qjDK/skUJJ27sc9lTWeNxp2rLzmenBTskSsRiDOCPnupGSz2GhL5IZxDizK/sOsk0hn5iSCywt+3jKxUJ3Y4Sw==
61336133
dependencies:
61346134
"@floating-ui/dom" "^1.0.0"
61356135
classnames "^2.3.0"

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-tooltip",
3-
"version": "5.16.1",
3+
"version": "5.18.0",
44
"description": "react tooltip component",
55
"scripts": {
66
"dev-rollup": "node ./prebuild.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",

‎src/components/Tooltip/Tooltip.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ const Tooltip = ({
4444
setIsOpen,
4545
activeAnchor,
4646
setActiveAnchor,
47+
border,
48+
opacity,
4749
}: ITooltip) => {
4850
const tooltipRef = useRef<HTMLElement>(null)
4951
const tooltipArrowRef = useRef<HTMLElement>(null)
@@ -237,6 +239,7 @@ const Tooltip = ({
237239
tooltipArrowReference: tooltipArrowRef.current,
238240
strategy: positionStrategy,
239241
middlewares,
242+
border,
240243
}).then((computedStylesData) => {
241244
if (Object.keys(computedStylesData.tooltipStyles).length) {
242245
setInlineStyles(computedStylesData.tooltipStyles)
@@ -503,6 +506,7 @@ const Tooltip = ({
503506
tooltipArrowReference: tooltipArrowRef.current,
504507
strategy: positionStrategy,
505508
middlewares,
509+
border,
506510
}).then((computedStylesData) => {
507511
if (!mounted.current) {
508512
// invalidate computed positions after remount
@@ -595,7 +599,11 @@ const Tooltip = ({
595599
[coreStyles['clickable']]: clickable,
596600
},
597601
)}
598-
style={{ ...externalStyles, ...inlineStyles }}
602+
style={{
603+
...externalStyles,
604+
...inlineStyles,
605+
opacity: opacity !== undefined && canShow ? opacity : undefined,
606+
}}
599607
ref={tooltipRef}
600608
>
601609
{content}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,4 +89,6 @@ export interface ITooltip {
8989
afterHide?: () => void
9090
activeAnchor: HTMLElement | null
9191
setActiveAnchor: (anchor: HTMLElement | null) => void
92+
border?: CSSProperties['border']
93+
opacity?: CSSProperties['opacity']
9294
}

‎src/components/TooltipController/TooltipController.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ const TooltipController = ({
4545
position,
4646
isOpen,
4747
disableStyleInjection = false,
48+
border,
49+
opacity,
4850
setIsOpen,
4951
afterShow,
5052
afterHide,
@@ -260,6 +262,28 @@ const TooltipController = ({
260262
}
261263
}, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect])
262264

265+
useEffect(() => {
266+
if (process.env.NODE_ENV === 'production') {
267+
return
268+
}
269+
if (style?.border) {
270+
// eslint-disable-next-line no-console
271+
console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.')
272+
}
273+
if (border && !CSS.supports('border', `${border}`)) {
274+
// eslint-disable-next-line no-console
275+
console.warn(`[react-tooltip] "${border}" is not a valid \`border\`.`)
276+
}
277+
if (style?.opacity) {
278+
// eslint-disable-next-line no-console
279+
console.warn('[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.')
280+
}
281+
if (opacity && !CSS.supports('opacity', `${opacity}`)) {
282+
// eslint-disable-next-line no-console
283+
console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`)
284+
}
285+
}, [])
286+
263287
/**
264288
* content priority: children < render or content < html
265289
* children should be lower priority so that it can be used as the "default" content
@@ -308,6 +332,8 @@ const TooltipController = ({
308332
style,
309333
position,
310334
isOpen,
335+
border,
336+
opacity,
311337
setIsOpen,
312338
afterShow,
313339
afterHide,

‎src/components/TooltipController/TooltipControllerTypes.d.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,14 @@ export interface ITooltipController {
6161
position?: IPosition
6262
isOpen?: boolean
6363
disableStyleInjection?: boolean | 'core'
64+
/**
65+
* @description see https://developer.mozilla.org/en-US/docs/Web/CSS/border.
66+
*
67+
* Adding a border with width > 3px, or with `em/cm/rem/...` instead of `px`
68+
* might break the tooltip arrow positioning.
69+
*/
70+
border?: CSSProperties['border']
71+
opacity?: CSSProperties['opacity']
6472
setIsOpen?: (value: boolean) => void
6573
afterShow?: () => void
6674
afterHide?: () => void
@@ -70,8 +78,8 @@ declare module 'react' {
7078
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
7179
'data-tooltip-id'?: string
7280
'data-tooltip-place'?: PlacesType
73-
'data-tooltip-content'?: string
74-
'data-tooltip-html'?: string
81+
'data-tooltip-content'?: string | null
82+
'data-tooltip-html'?: string | null
7583
'data-tooltip-variant'?: VariantType
7684
'data-tooltip-offset'?: number
7785
'data-tooltip-wrapper'?: WrapperType

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { CSSProperties } from 'react'
12
import type { Middleware } from '../components/Tooltip/TooltipTypes'
23

34
export interface IComputePositions {
@@ -20,4 +21,5 @@ export interface IComputePositions {
2021
offset?: number
2122
strategy?: 'absolute' | 'fixed'
2223
middlewares?: Middleware[]
24+
border?: CSSProperties['border']
2325
}

0 commit comments

Comments
 (0)