diff --git a/README.md b/README.md index e1ed0d2da..f5da427f9 100755 --- a/README.md +++ b/README.md @@ -46,9 +46,12 @@ yarn add react-tooltip ## Usage -### Using NPM +> :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features. +In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details. -1 . Import the CSS file to set default styling +### Using NPM package + +1 . Import the CSS file to set default styling. ```js import 'react-tooltip/dist/react-tooltip.css' @@ -56,7 +59,7 @@ import 'react-tooltip/dist/react-tooltip.css' This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file. -2 . Import `react-tooltip` after installation +2 . Import `react-tooltip` after installation. ```js import { Tooltip } from 'react-tooltip' @@ -68,20 +71,41 @@ or if you want to still use the name ReactTooltip as V4: import { Tooltip as ReactTooltip } from 'react-tooltip' ``` -3 . Add `data-tooltip-content="your placeholder"` to your element +3 . Add `data-tooltip-id=""` and `data-tooltip-content=""` to your element. + +> `data-tooltip-id` is the equivalent of V4's `data-for`. ```jsx -

- Tooltip -

+ + ◕‿‿◕ + ``` -4 . Include react-tooltip component +4 . Include the `` element. + +> Don't forget to set the id, it won't work without it! ```jsx - + ``` +#### Using multiple anchor elements + +You can also set the `anchorSelect` tooltip prop to use the tooltip with multiple anchor elements without having to set `data-tooltip-id` on each of them. +`anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). + +```jsx + + ◕‿‿◕ + + + ◕‿‿◕ + + +``` + +Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases. + ### Standalone You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page. @@ -98,27 +122,26 @@ PS: all the files have a minified version and a non-minified version. For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options) -### Security Note +### Security note The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option. -#### JSX Note +#### JSX note -You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. +You can use [`React.renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. **Example:** ```jsx import ReactDOMServer from 'react-dom/server'; [...] -

I am JSX content)}> - Hover me -

+I am JSX content)} +> + ◕‿‿◕ + ``` -#### Note - -- **id** is necessary, because `` finds the tooltip via this attribute - ## Article [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a) diff --git a/bundlesize.config.json b/bundlesize.config.json index 95a5b3e9a..1c1eddeb9 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -2,15 +2,15 @@ "files": [ { "path": "./dist/react-tooltip.cjs.min.js", - "maxSize": "14 kB" + "maxSize": "14.5 kB" }, { "path": "./dist/react-tooltip.esm.min.js", - "maxSize": "14 kB" + "maxSize": "14.5 kB" }, { "path": "./dist/react-tooltip.umd.min.js", - "maxSize": "14 kB" + "maxSize": "14.5 kB" } ] } diff --git a/docs/docs/examples/_category_.json b/docs/docs/examples/_category_.json index 9d1e296b3..367d46aaf 100644 --- a/docs/docs/examples/_category_.json +++ b/docs/docs/examples/_category_.json @@ -3,6 +3,6 @@ "position": 4, "link": { "type": "generated-index", - "description": "Examples using props and some use cases with ReactTooltip component" + "description": "Examples for the tooltip props and some interesting use cases." } } diff --git a/docs/docs/examples/anchor-select.mdx b/docs/docs/examples/anchor-select.mdx new file mode 100644 index 000000000..67ec3c50b --- /dev/null +++ b/docs/docs/examples/anchor-select.mdx @@ -0,0 +1,202 @@ +--- +sidebar_position: 1 +--- + +# Anchor select + +Default color stylings available for the ReactTooltip component. + +import { Tooltip } from 'react-tooltip' +import 'react-tooltip/dist/react-tooltip.css' + +export const TooltipAnchor = ({ children, id, ...rest }) => { + return ( + + {children} + + ) +} + +### Basic usage + +The `anchorSelect` prop uses a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to attach the tooltip to the anchor elements. The most common use for this is selecting elements with a specific id, or with a CSS class. + +#### Using id attribute + +:::info + +A CSS selector for a specific id begins with a `#`. Don't forget to put it before the id on your selector! + +::: + +```jsx +import { Tooltip } from 'react-tooltip'; +import 'react-tooltip/dist/react-tooltip.css'; + +◕‿‿◕ + +``` + +◕‿‿◕ + + +#### Using class attribute + +:::info + +A CSS selector for a specific id begins with a `.`. Don't forget to put it before the class on your selector! + +::: + +```jsx +import { Tooltip } from 'react-tooltip'; +import 'react-tooltip/dist/react-tooltip.css'; + +◕‿‿◕ +◕‿‿◕ +◕‿‿◕ +◕‿‿◕ + +``` + +
+ + ◕‿‿◕ + + + ◕‿‿◕ + + + ◕‿‿◕ + + + ◕‿‿◕ + +
+ + +### Complex selectors + +Once you've understood how it works, you can write CSS selectors as complex as you can imagine. Here are some interesting examples. + +#### Attribute prefix + +:::info + +`[attr^='prefix']` can be read as "any element that has an attribute `attr` in which its value starts with `prefix`". Remove the `^` for an exact match. + +This example uses the name attribute, but it works for any HTML attribute (id, class, ...). + +::: + +```jsx +import { Tooltip } from 'react-tooltip'; +import 'react-tooltip/dist/react-tooltip.css'; + +◕‿‿◕ +◕‿‿◕ +◕‿‿◕ +◕‿‿◕ + +``` + +
+ + ◕‿‿◕ + + + ◕‿‿◕ + + + ◕‿‿◕ + + + ◕‿‿◕ + +
+ + +#### Child selector + +:::info + +Make sure there isn't an easier alternative before diving into complex selectors like this. + +Often you can just use a class selector or something else much simpler. + +::: + +```jsx +import { Tooltip } from 'react-tooltip'; +import 'react-tooltip/dist/react-tooltip.css'; + +
+ ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ +
+ + +``` + +
+ ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ +
+ + \ No newline at end of file diff --git a/docs/docs/examples/basic-examples.mdx b/docs/docs/examples/basic-examples.mdx index 641afe7e3..c32af94e9 100644 --- a/docs/docs/examples/basic-examples.mdx +++ b/docs/docs/examples/basic-examples.mdx @@ -1,10 +1,10 @@ --- -sidebar_position: 1 +sidebar_position: 0 --- # Basic examples -Basic examples of use ReactTooltip component. +Some basic examples of how to use the ReactTooltip component. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -15,6 +15,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { id={id} style={{ display: 'flex', + margin: 'auto', justifyContent: 'center', alignItems: 'center', width: '60px', @@ -33,36 +34,78 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -### Props +### Data attributes ```jsx import { Tooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css' - - ◕‿‿◕ +import 'react-tooltip/dist/react-tooltip.css'; - + + ◕‿‿◕ + + + ◕‿‿◕ + + ``` -◕‿‿◕ - +
+ + ◕‿‿◕ + + + ◕‿‿◕ + +
+ + +### Props -### Data attributes + +#### Using anchor element `id` ```jsx import { Tooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css'; - - ◕‿‿◕ +import 'react-tooltip/dist/react-tooltip.css' - +◕‿‿◕ + ``` - - ◕‿‿◕ - - +◕‿‿◕ + ---- +#### Using anchor elements `className` + +:::info + +Check the [Anchor select examples](./anchor-select.mdx) for more complex use cases. + +::: + +```jsx +import { Tooltip } from 'react-tooltip'; +import 'react-tooltip/dist/react-tooltip.css' + +◕‿‿◕ +◕‿‿◕ + +``` -To check all available options, please check `options` docs +
+ ◕‿‿◕ + ◕‿‿◕ +
+ diff --git a/docs/docs/examples/children.mdx b/docs/docs/examples/children.mdx index 7c0f1e1e9..5435e04ec 100644 --- a/docs/docs/examples/children.mdx +++ b/docs/docs/examples/children.mdx @@ -4,7 +4,7 @@ sidebar_position: 1 # Children -Children for content example of ReactTooltip component use case. +Using children for setting the ReactTooltip content. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -35,32 +35,38 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ### Using `children` as content -When using `children` as content, `content` and `html` params will be ignored and only children will be shown. +When using `children` as content, `html` and `content` props (and their respective data attributes) will take priority. + +This is useful for setting a placeholder for the tooltip content. ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - +◕‿‿◕ +
-

Tooltip

+

This is a very interesting header

+

Here's some interesting stuff:

    -
  • Lorem
    • -
  • Ipsum
    • +
  • Some
    • +
  • Interesting
    • +
  • Stuff
 ``` -
- ◕‿‿◕ - +
+ ◕‿‿◕ +
-

Tooltip

+

This is a very interesting header

+

Here's some interesting stuff:

    -
  • Lorem
    • -
  • Ipsum
    • +
  • Some
    • +
  • Interesting
    • +
  • Stuff
 diff --git a/docs/docs/examples/content.mdx b/docs/docs/examples/content.mdx index 47a83a7ce..1efb69218 100644 --- a/docs/docs/examples/content.mdx +++ b/docs/docs/examples/content.mdx @@ -4,7 +4,7 @@ sidebar_position: 1 # Content -Content in ReactTooltip component. +Setting the ReactTooltip content. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,43 +34,45 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -### Using `content` + +### Using `data-tooltip-content` anchor element attribute ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - + + ◕‿‿◕ + + ``` -
- ◕‿‿◕ - -
+ + ◕‿‿◕ + + -### Using `data-tooltip-content` +### Using `content` tooltip prop ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - +◕‿‿◕ + ``` -
- - ◕‿‿◕ - - -
+◕‿‿◕ + diff --git a/docs/docs/examples/delay.mdx b/docs/docs/examples/delay.mdx index b0ff4dc73..cbaf49c3a 100644 --- a/docs/docs/examples/delay.mdx +++ b/docs/docs/examples/delay.mdx @@ -4,7 +4,7 @@ sidebar_position: 1 # Delays -Delays available in ReactTooltip component. +Delay showing/hiding the ReactTooltip component. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,52 +34,52 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -### Delay to Hide tooltip +### Delay to hide tooltip ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; ◕‿‿◕ - +> + ◕‿‿◕ + + ``` -
- - ◕‿‿◕ - - -
+ + ◕‿‿◕ + + -### Delay to Show tooltip +### Delay to show tooltip ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; ◕‿‿◕ - +> + ◕‿‿◕ + + ``` -
- - ◕‿‿◕ - - -
+ + ◕‿‿◕ + + diff --git a/docs/docs/examples/events.mdx b/docs/docs/examples/events.mdx index eb7b9f82a..814d51750 100644 --- a/docs/docs/examples/events.mdx +++ b/docs/docs/examples/events.mdx @@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,34 +34,65 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } +:::note + +In a previous version, `click` had a different behavior, so it made sense to be enabled alongside `hover`. +Since that's changed, enabling both events `events={['hover', 'click']}` has the same effect of simply enabling `hover`. + +In the future, we should simply have a prop to enable `click` mode. + +::: + ### Using `hover` -This is the default of ReactTooltip events options. +:::info + +This is the default event option, so it doesn't have to be manually set. + +::: ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - + ◕‿‿◕ + ``` -
- ◕‿‿◕ - -
+◕‿‿◕ + ### Using `click` +:::info + +Clicking anywhere outside the anchor element will close the tooltip. + +::: + ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - + ◕‿‿◕ + ``` -
- ◕‿‿◕ - -
+◕‿‿◕ + diff --git a/docs/docs/examples/html.mdx b/docs/docs/examples/html.mdx index 390a6a433..99e8e896a 100644 --- a/docs/docs/examples/html.mdx +++ b/docs/docs/examples/html.mdx @@ -4,7 +4,7 @@ sidebar_position: 1 # HTML -HTML content in ReactTooltip component. +Using HTML content in ReactTooltip component. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,43 +34,57 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -### Using `html` +### Using `data-tooltip-html` attribute + +:::info + +You can also use [`React.renderToStaticMarkup()`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to render HTML/JSX. + +::: ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - + + ◕‿‿◕ + + ``` -
- ◕‿‿◕ - -
+ + ◕‿‿◕ + + + -### Using `data-tooltip-html` +### Using `html` prop + +:::info + +You should probably pass the content as children to the tooltip instead. + +::: ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - +◕‿‿◕ + ``` -
- - ◕‿‿◕ - - -
+◕‿‿◕ + diff --git a/docs/docs/examples/multiline.mdx b/docs/docs/examples/multiline.mdx index 1fd35d4dd..429d5dd9d 100644 --- a/docs/docs/examples/multiline.mdx +++ b/docs/docs/examples/multiline.mdx @@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,34 +34,58 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -### Using `html` +### Using `data-tooltip-html` + +:::info + +You can also use [`React.renderToStaticMarkup()`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to render HTML/JSX. + +::: + ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - + + ◕‿‿◕ + + ``` -
- ◕‿‿◕ - -
+ + ◕‿‿◕ + + -### Using `data-tooltip-html` + +### Using tooltip children and JSX ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - + ◕‿‿◕ + +
+ Hello + some stuff in between + world! +
+ ``` -
- - ◕‿‿◕ - - -
+◕‿‿◕ + +
+ Hello + some stuff in between + world! +
+ diff --git a/docs/docs/examples/offset.mdx b/docs/docs/examples/offset.mdx index 8e465f9b9..f28a49c92 100644 --- a/docs/docs/examples/offset.mdx +++ b/docs/docs/examples/offset.mdx @@ -4,7 +4,7 @@ sidebar_position: 1 # Offset -Offset param of ReactTooltip component. +Offset option for the ReactTooltip component. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,37 +34,46 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -`offset` accepts any `number` as param +### Using `data-tooltip-offset` attribute ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - +◕‿‿◕ +◕‿‿◕ +◕‿‿◕ +◕‿‿◕ +◕‿‿◕ + +``` - ◕‿‿◕ - +
+ ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ + +
- ◕‿‿◕ - +### Using `offset` tooltip prop - ◕‿‿◕ - +```jsx +import { Tooltip } from 'react-tooltip'; +import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - +◕‿‿◕ + ``` -
- ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - - - - - -
+◕‿‿◕ + diff --git a/docs/docs/examples/place.mdx b/docs/docs/examples/place.mdx index 61477a05c..e68603e3b 100644 --- a/docs/docs/examples/place.mdx +++ b/docs/docs/examples/place.mdx @@ -4,8 +4,9 @@ sidebar_position: 1 # Place -Available places of ReactTooltip component. +Changing the placement for the ReactTooltip component. +import { useState } from 'react'; import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -16,6 +17,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,23 +35,68 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -`place` available values `top` | `right` | `bottom` | `left` +The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'right' | 'bottom' | 'left'`. + +### Using `data-tooltip-place` attribute + +```jsx +import { Tooltip } from 'react-tooltip'; +import 'react-tooltip/dist/react-tooltip.css'; + +◕‿‿◕ + + + + +``` + +◕‿‿◕ + + + + + +### Using `place` prop ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - - - - +const PLACES = ['top', 'right', 'bottom', 'left'] +const [place, setPlace] = useState(0) + + setPlace(p => (p + 1) % 4)} +> + ◕‿‿◕ + + ``` -
- ◕‿‿◕ - - - - -
+export const PlacementExample = () => { + const PLACES = ['top', 'right', 'bottom', 'left'] + const [place, setPlace] = useState(0) + + return ( + <> + setPlace(p => (p + 1) % 4)} + > + ◕‿‿◕ + + + + ) +} + + diff --git a/docs/docs/examples/multiple-anchors.mdx b/docs/docs/examples/provider-wrapper.mdx similarity index 86% rename from docs/docs/examples/multiple-anchors.mdx rename to docs/docs/examples/provider-wrapper.mdx index 15819c167..a78683af2 100644 --- a/docs/docs/examples/multiple-anchors.mdx +++ b/docs/docs/examples/provider-wrapper.mdx @@ -2,9 +2,15 @@ sidebar_position: 1 --- -# Multiple anchors +# Provider/wrapper -Using multiple anchors elements with a single tooltip component. +Using multiple anchors elements with a single ReactTooltip component. + +:::danger + +This has been deprecated. Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. [Click here](../getting-started.mdx) for more details. + +::: import { Tooltip, TooltipProvider, TooltipWrapper } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -43,7 +49,7 @@ export const WithProvider = ({ children }) => { ### Setting up `` -To work with multiple anchors on a single tooltip, your component must be inside the ``. +To get the `` to work, your component must be inside the ``. For simplicity, just wrap your whole application with the provider. ```jsx @@ -96,6 +102,12 @@ import 'react-tooltip/dist/react-tooltip.css'; ### Multiple tooltips +:::danger + +Reminder that this has been deprecated. Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. [Click here](../getting-started.mdx) for more details. + +::: + If you need to use multiple tooltips, each with multiple anchors, use the tooltip `id` prop, and the wrapper `tooltipId` prop. ```jsx diff --git a/docs/docs/examples/state.mdx b/docs/docs/examples/state.mdx index 428762a2e..ca13b8fa2 100644 --- a/docs/docs/examples/state.mdx +++ b/docs/docs/examples/state.mdx @@ -4,13 +4,13 @@ sidebar_position: 1 # State -Controlled and uncontrolled state examples of ReactTooltip component. +Controlled state example for the ReactTooltip component. import { useState } from 'react' import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' -export const TooltipAnchor = ({ children, id, ...rest }) => { +export const TooltipAnchor = ({ children, id, background, ...rest }) => { return ( { height: '60px', borderRadius: '60px', color: '#222', - background: 'rgba(255, 255, 255, 1)', + background: background || 'rgba(255, 255, 255, 1)', cursor: 'pointer', boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)', border: '1px solid #333', @@ -34,95 +34,19 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -export const ControlledExample = () => { - const [isOpen, setIsOpen] = useState(false) - const [anchorId, setAnchorId] = useState('tooltip-anchor') - return ( - <> - { - setAnchorId('tooltip-anchor') - if (!isOpen) { - setIsOpen(true) - } - }} - > - ◕‿‿◕ - - { - setAnchorId('tooltip-anchor-2') - if (!isOpen) { - setIsOpen(true) - } - }} - > - ◕‿‿◕ - - { - setAnchorId('tooltip-anchor-3') - if (!isOpen) { - setIsOpen(true) - } - }} - > - ◕‿‿◕ - - { - setAnchorId('tooltip-anchor-4') - if (!isOpen) { - setIsOpen(true) - } - }} - > - ◕‿‿◕ - - { - setAnchorId('tooltip-anchor-5') - if (!isOpen) { - setIsOpen(true) - } - }} - > - ◕‿‿◕ - - { - setAnchorId('tooltip-anchor-6') - if (!isOpen) { - setIsOpen(true) - } - }} - > - ◕‿‿◕ - - - - ) -} - ### Controlled tooltip state -We can have a situation when we want to change the anchor id (the reference element id) and we want to let the tooltip being displayed. -In this case, the code is only updating isOpen to `true` and never to `false`, but this can be easy changed if you want. +:::caution + +Most of the time, leaving the state to be handled internally will be enough. + +Only do this if you need some more complex behavior. + +::: + +This is a very simple example in which hovering over any anchor element opens the tooltip, but it can only be closed by clicking the last anchor. + +It is just a demonstration, and you can come up with use cases as complex as you can imagine. ```jsx import { useState } from 'react'; @@ -130,194 +54,90 @@ import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; const [isOpen, setIsOpen] = useState(false) -const [anchorId, setAnchorId] = useState('tooltip-anchor') - { - setAnchorId('tooltip-anchor') - // in this example we only want to trigger the isOpen as true by one time - if (!isOpen) { - setIsOpen(true) - } - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-2') - // in this example we only want to trigger the isOpen as true by one time - if (!isOpen) { - setIsOpen(true) - } - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-3') - // in this example we only want to trigger the isOpen as true by one time - if (!isOpen) { - setIsOpen(true) - } - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-4') - // in this example we only want to trigger the isOpen as true by one time - if (!isOpen) { - setIsOpen(true) - } - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-5') - // in this example we only want to trigger the isOpen as true by one time - if (!isOpen) { - setIsOpen(true) - } - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-6') - // in this example we only want to trigger the isOpen as true by one time - if (!isOpen) { - setIsOpen(true) - } - }} -> ◕‿‿◕ + setIsOpen(true)}> + ◕‿‿◕ + + setIsOpen(true)}> + ◕‿‿◕ + + setIsOpen(true)}> + ◕‿‿◕ + + setIsOpen(true)}> + ◕‿‿◕ + + setIsOpen(true)}> + ◕‿‿◕ + + setIsOpen(true)} + onClick={() => setIsOpen(false)} +> + ◕‿‿◕ + ``` -
- -
- -export const UncontrolledExample = () => { - const [anchorId, setAnchorId] = useState('tooltip-anchor-uncontrolled') +export const ControlledStateExample = () => { + const [isOpen, setIsOpen] = useState(false) + console.log(isOpen) return ( <> { - setAnchorId('tooltip-anchor-uncontrolled') - }} + data-tooltip-id="my-tooltip" + onMouseEnter={() => setIsOpen(true)} > ◕‿‿◕ { - setAnchorId('tooltip-anchor-uncontrolled-2') - }} + data-tooltip-id="my-tooltip" + onMouseEnter={() => setIsOpen(true)} > ◕‿‿◕ { - setAnchorId('tooltip-anchor-uncontrolled-3') - }} + data-tooltip-id="my-tooltip" + onMouseEnter={() => setIsOpen(true)} > ◕‿‿◕ { - setAnchorId('tooltip-anchor-uncontrolled-4') - }} + data-tooltip-id="my-tooltip" + onMouseEnter={() => setIsOpen(true)} > ◕‿‿◕ { - setAnchorId('tooltip-anchor-uncontrolled-5') - }} + data-tooltip-id="my-tooltip" + onMouseEnter={() => setIsOpen(true)} > ◕‿‿◕ { - setAnchorId('tooltip-anchor-uncontrolled-6') - }} + background="lightgray" + data-tooltip-id="my-tooltip" + data-tooltip-content="Click me!" + onMouseEnter={() => setIsOpen(true)} + onClick={() => setIsOpen(false)} > ◕‿‿◕ ) } -#### Observation - -If we pass `setIsOpen` to the tooltip, the `isOpen` from parent will be updated by Tooltip events instead of the internal tooltip state, but if we don't and only use `isOpen` value, -we can control this state outside tooltip. - -### Uncontrolled tooltip state - -This is almost the same example as before, but now we doesn't control `isOpen` and the tooltip will handle the state internally. -With this, when the mouse leaves the element, the state is updated to `open` as `false`, because of that, we need to leave and enter a tooltip again. -So, the controlled state can be a great option to handle this situation. - -```jsx -import { useState } from 'react'; -import { Tooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css'; - -const [anchorId, setAnchorId] = useState('tooltip-anchor') - - { - setAnchorId('tooltip-anchor') - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-2') - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-3') - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-4') - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-5') - }} -> ◕‿‿◕ - { - setAnchorId('tooltip-anchor-6') - }} -> ◕‿‿◕ - -``` -
- +
- -#### Observation - -In this case, the internal state behavior will be very similar as using `setIsOpen` together with `isOpen` prop, the only difference is that state can be modified outside tooltip when using `setIsOpen` too. diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx index d39ed3bdc..3617aa506 100644 --- a/docs/docs/examples/styling.mdx +++ b/docs/docs/examples/styling.mdx @@ -6,7 +6,7 @@ sidebar_position: 1 How to customize tooltip styles in ReactTooltip styles. -Now tooltip arrow inherit his background color from tooltip (his parent). +Tooltip arrow inherits its background color from tooltip (its parent). import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -37,19 +37,22 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -### Basic explanation - Inline Styling +### Inline Styling -You can add styles into the tooltip as inline styling. +You can add styles into the tooltip with inline styling. ```jsx import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' - + ◕‿‿◕ ``` @@ -57,18 +60,17 @@ import 'react-tooltip/dist/react-tooltip.css'
- + ◕‿‿◕ - +
+### Classes -### Basic explanation - Classes - -You don't need `!important` anymore, you just need to know at least a bit about CSS Specificity ([MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) | [W3c Docs](https://www.w3schools.com/css/css_specificity.asp)). -Using CSS Specificity you can add a class with more specificity than the current used in tooltip and you can override or add new rules to the component style. +You don't need to use `!important` to override the styles, take advantage of CSS Specificity instead ([MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) | [W3c Docs](https://www.w3schools.com/css/css_specificity.asp)). +Using CSS Specificity you can add a class with more specificity than the default used in tooltip so you can override or add new rules to the component style. ```jsx import { Tooltip } from 'react-tooltip' @@ -82,10 +84,13 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -93,19 +98,22 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕ - +
#### Explanation -In this example, we are adding an extra level to the CSS classes, the following styles are the default one of Tooltip component when we write this docs: +In this example, we are adding an extra level to the CSS classes. The following are the default styles for the tooltip: {TooltipStyles} -So, if we only add new classes like the below, this will not work because this is the same level of specificity than the default dark variant as example, you can compare: +If we only add new classes like below, it will not work because it has the same level of specificity than the default dark variant. ```css .example { @@ -119,7 +127,7 @@ So, if we only add new classes like the below, this will not work because this i } ``` -So, to make this work as expected, we need to add a new more level like this one: +To make this work as expected, we need to add another level of specificity: ```css .some-class-or-rule .example { @@ -133,11 +141,9 @@ So, to make this work as expected, we need to add a new more level like this one } ``` -Now this will work as expected. - --- -### More examples - Colors +### Changing colors #### Orange @@ -153,10 +159,10 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -164,11 +170,11 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕
@@ -187,10 +193,10 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -198,10 +204,10 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕ - + #### Tooltip Arrow with a different color from Tooltip @@ -222,10 +228,10 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -233,13 +239,13 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕ - + -### More examples - Radius +### Changing the border radius #### Removing radius @@ -254,10 +260,10 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -265,10 +271,10 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕ - + #### Rounded @@ -284,10 +290,10 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -295,13 +301,13 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕ - + -### More examples - Padding +### Changing the padding #### Removing padding @@ -316,10 +322,10 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -327,10 +333,10 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕ - + #### Adding more padding @@ -346,10 +352,10 @@ import 'react-tooltip/dist/react-tooltip.css' ``` @@ -357,14 +363,16 @@ import 'react-tooltip/dist/react-tooltip.css' className="example-container" style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }} > - + ◕‿‿◕ - + -#### Observation +---- + +:::info -With CSS specificity everything can be overridden if you know what are you doing. +In summary, if you do it correctly you can use CSS specificity instead of `!important`. -The necessity of `!important` was removed because `!important` cut a lot of levels/possibilities related to CSS specificity. +::: \ No newline at end of file diff --git a/docs/docs/examples/variant.mdx b/docs/docs/examples/variant.mdx index 6e12c8912..c7ac0a5a5 100644 --- a/docs/docs/examples/variant.mdx +++ b/docs/docs/examples/variant.mdx @@ -4,7 +4,7 @@ sidebar_position: 1 # Variant -Standard colors available in ReactTooltip styles. +Default color stylings available for the ReactTooltip component. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -33,68 +33,64 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -`variant` available values `dark` | `light` | `success` | `warning` | `error` | `info` +`variant` can be one of `'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'` ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; ◕‿‿◕ - - +> + ◕‿‿◕ + + ```
◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - - ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ +
diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx index acf3218cb..939d9402e 100644 --- a/docs/docs/getting-started.mdx +++ b/docs/docs/getting-started.mdx @@ -4,7 +4,7 @@ sidebar_position: 1 # Getting Started -This docs is related to V5, [if you are using V4 please check here](https://reacttooltip.github.io/react-tooltip/) +This docs is related to V5, [if you are using V4 please check here](https://reacttooltip.github.io/react-tooltip/). A react tooltip is a floating react element that displays information related to an anchor element when it receives keyboard focus or the mouse hovers over it. @@ -49,6 +49,13 @@ yarn add react-tooltip ## Usage +:::info + +If you've been using V5 for a while, you'll notice we've deprecated the `anchorId` prop in favor of the `data-tooltip-it` attribute, or the `anchorSelect` prop. +For more info and more complex use cases using `anchorSelect`, check [the examples](./examples/anchor-select.mdx). + +::: + ### Set the default styling ```js @@ -63,70 +70,134 @@ There are two ways to use ReactTooltip. 1. Using props into ReactTooltip Element. 2. Using data-attributes on anchor element. -### ReactTooltip props -1 . Import `react-tooltip` after installation +### Using anchor data attributes + +1 . Import `react-tooltip` after installation. ```js import { Tooltip } from 'react-tooltip' ``` -2 . Create anchor element +2 . Add `data-tooltip-id=""`, `data-tooltip-content=""` and other attributes to your elements. + +:::info + +[Click here](./options.mdx#available-attributes) the full list of available data attributes. + +::: ```jsx -

Tooltip

+ + ◕‿‿◕ + + + ◕‿‿◕ + ``` -3 . Create `` element +3 . Create `` element and set the `id` prop. + +:::caution + +Don't forget to set the tooltip id, or it will not work! + +::: ```jsx - + ``` -### Anchor data attributes +
+ + ◕‿‿◕ + + ◕‿‿◕ + + +
+ + +### Using ReactTooltip props -1 . Import `react-tooltip` after installation +1 . Import `react-tooltip` after installation. ```js import { Tooltip } from 'react-tooltip' ``` -2 . Add `data-tooltip-content="your placeholder"` to your element +2 . Create anchor elements. ```jsx -

- Tooltip -

+◕‿‿◕

+◕‿‿◕

+◕‿‿◕

``` -3 . Create `` element +3 . Create `` element and set the `anchorSelect` prop. + +:::caution + +`anchorSelect` must be a valid CSS selector. [Click here](./examples/anchor-select.mdx) for more info. + +::: + +:::info + +[Click here](./options.mdx#available-props) the full list of available tooltip props. + +::: ```jsx - + + Hello world! + ``` + +
+ ◕‿‿◕ + ◕‿‿◕ + ◕‿‿◕ + + Hello world! + +
+ + ### Clickable tooltip By default, you can't interact with elements inside the tooltip. To allow for proper usage of elements such as buttons and inputs, use the `clickable` prop. ```jsx ◕‿‿◕ - + ◕‿‿◕ - + ``` -
+
◕‿‿◕ - + ◕‿‿◕ - +
diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 6dcee5870..865e87daf 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -4,7 +4,7 @@ sidebar_position: 3 # Options -All available prop and data-attribute options of ReactTooltip. +All available data attributes for the anchor element and props for the tooltip component. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { style={{ display: 'flex', justifyContent: 'center', + margin: 'auto', alignItems: 'center', width: '60px', height: '60px', @@ -33,79 +34,93 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } -### Props +### Data attributes ```jsx import { Tooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css' - - ◕‿‿◕ +import 'react-tooltip/dist/react-tooltip.css'; - + + ◕‿‿◕ + + ``` -◕‿‿◕ - + + ◕‿‿◕ + + -#### Available props +#### Available attributes -| name | type | required | default | values | description | -| ---------------- | -------------------------- | -------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| className | string | false | | | class name to customize tooltip element | -| classNameArrow | string | false | | | class name to customize tooltip arrow element | -| content | string | false | | | content to de displayed in tooltip (`content` prop is priorized over `html`) | -| html | string | false | | | html content to de displayed in tooltip | -| place | string | false | `top` | `top` `right` `bottom` `left` | place related to anchor element where the tooltip will be rendered if possible | -| offset | number | false | `10` | any `number` | space between the tooltip element and anchor element (arrow not included in calc) | -| id | string | false | | any `string` | set an internal tooltip id. required when using [multiple tooltips with a provider](./examples/multiple-anchors.mdx) | -| anchorId | string | false | `undefined` | any `string` | id reference from the element that the tooltip will be positioned around | -| variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values | -| wrapper | valid element | false | `div` | `ElementType` `div` `span` | element wrapper of tooltip container, can be `div`, `span` or any valid Element | -| children | valid React children | false | `undefined` | valid React children | content can be pass through props, data-attributes or as children, children will be priorized over other options | -| events | array | false | `hover` | `hover` `click` | pre-defined events to handle show or hide tooltip | -| positionStrategy | string | false | `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 | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value | -| delayHide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value | -| 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"`) | -| noArrow | boolean | false | `false` | `true` `false` | tooltip arrow will not be shown | -| clickable | boolean | false | `false` | `true` `false` | allow interaction with elements inside the tooltip. useful when using buttons and inputs | -| closeOnEsc | boolean | false | `false` | `true` `false` | pressing escape key will close the tooltip | -| style | CSSProperties | false | | any React inline style | add styles directly to the component by `style` attribute | -| position | `{ x: number; y: number }` | false | | any `number` value for both `x` and `y` | override the tooltip position on the viewport | -| isOpen | boolen | false | 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`) | -| setIsOpen | function | false | | | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | -| afterShow | function | false | | | a function to be called after the tooltip is shown | -| afterHide | function | false | | | a function to be called after the tooltip is hidden | -| middlewares | array | false | | array of valid `floating-ui` middlewares | allows for advanced customization. check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | +| name | type | required | default | values | description | +| ------------------------------ | ------- | -------- | ---------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| 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-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 | +| data-tooltip-events | string | false | `hover` | `hover click` `hover` `click` | Events to watch for when handling the tooltip state | +| data-tooltip-position-strategy | string | false | `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 | +| data-tooltip-show | number | false | | any `number` | The delay (in ms) before showing the tooltip | +| data-tooltip-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 attributes +### Props ```jsx import { Tooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css'; - - ◕‿‿◕ +import 'react-tooltip/dist/react-tooltip.css' - +◕‿‿◕ + ``` - - ◕‿‿◕ - - +◕‿‿◕ + -#### Available attributes +#### Available props -| name | type | required | default | values | description | -| ------------------------------ | ------- | -------- | ---------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| data-tooltip-content | string | false | | | content to de displayed in tooltip (`content` prop is priorized over `html`) | -| data-tooltip-html | string | false | | | html content to de displayed in tooltip | -| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | place related to 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 calc) | -| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values | -| data-tooltip-wrapper | string | false | `div` | `div` `span` | element wrapper of tooltip container, can be `div`, `span` or any valid Element | -| data-tooltip-events | string | false | `hover` | `hover click` `hover` `click` | pre-defined events to handle show or hide tooltip | -| data-tooltip-position-strategy | string | false | `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 | -| data-tooltip-show | number | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value | -| data-tooltip-hide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value | -| 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"`) | +| name | type | required | default | values | description | +| ------------------ | -------------------------- | --------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `className` | `string` | no | | | Class name to customize tooltip element | +| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element | +| `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 | +| `place` | `string` | no | `top` | `top` `right` `bottom` `left` | 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 | +| `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"`) | +| `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 | +| `style` | `CSSProperties` | no | | a React inline style | 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` | `boolen` | 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`) | +| `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 | +| `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 | diff --git a/docs/docs/upgrade-guide/_category_.json b/docs/docs/upgrade-guide/_category_.json index daae91973..73f8e0c81 100644 --- a/docs/docs/upgrade-guide/_category_.json +++ b/docs/docs/upgrade-guide/_category_.json @@ -3,6 +3,6 @@ "position": 2, "link": { "type": "generated-index", - "description": "Upgrade docs related to migration from V4 to V5" + "description": "Migration guide from V4 to V5." } } diff --git a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx index 76b492850..8af069cf1 100644 --- a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx +++ b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx @@ -4,7 +4,7 @@ sidebar_position: 4 # Basic examples V4 -> V5 -Examples of use in V4 -> V5 +Examples of use in V4 -> V5. import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css' @@ -15,6 +15,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { id={id} style={{ display: 'flex', + margin: 'auto', justifyContent: 'center', alignItems: 'center', width: '60px', @@ -33,89 +34,117 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ) } +The main changes you should be aware of is the new names for the data attributes. + +| V4 | V5 | +| ---------- | ---------------------- | +| `data-for` | `data-tooltip-id` | +| `data-tip` | `data-tooltip-content` | + ### V4 or less ```jsx import ReactTooltip from 'react-tooltip'; - ◕‿‿◕ - - + + ◕‿‿◕ + + ``` -(v4) `data-tip` = `data-tooltip-content` (v5) - -- `V4` - CSS styles are built-in and injected by tooltip into the header (not a good practice but convenient), [issues in GitHub](https://github.com/ReactTooltip/react-tooltip/issues?q=is%3Aissue+header) -- `V5` - CSS styles are optional and can be imported or not to the project - -### V5 - props option +### V5 using data attributes ```jsx import { Tooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css' - - ◕‿‿◕ +import 'react-tooltip/dist/react-tooltip.css'; - + + ◕‿‿◕ + + ``` -◕‿‿◕ - + + ◕‿‿◕ + + + +### V5 using tooltip props + +:::info + +Don't forget to check [the examples](../examples) for more details! -### V5 - data attributes +::: ```jsx import { Tooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css'; - - ◕‿‿◕ +import 'react-tooltip/dist/react-tooltip.css' - +◕‿‿◕ +◕‿‿◕ + ``` - - ◕‿‿◕ - - +
+ ◕‿‿◕ + ◕‿‿◕ +
+ --- ## Colors -### V4 or less - type +| V4 | V5 | +| ---------- | ---------------------- | +| `type` | `variant` | + +### V4 -> `type` ```jsx import ReactTooltip from 'react-tooltip'; ◕‿‿◕ - ``` -(v4) `type` = `variant` (v5) - -### V5 - variant +### V5 -> `variant` -Available values `dark` | `light` | `success` | `warning` | `error` | `info` +Available values `'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'` ```jsx import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; - ◕‿‿◕ - - + + ◕‿‿◕ + + ``` ◕‿‿◕ - + --- -Please see [all V5 Options here](../options.mdx). +See [all V5 options here](../options.mdx). diff --git a/docs/docs/upgrade-guide/changelog-v4-v5.md b/docs/docs/upgrade-guide/changelog-v4-v5.md index 1cac70c8a..ada77606e 100644 --- a/docs/docs/upgrade-guide/changelog-v4-v5.md +++ b/docs/docs/upgrade-guide/changelog-v4-v5.md @@ -4,11 +4,14 @@ sidebar_position: 1 # Changelog V4 -> V5 -If you are using V4 and want to use V5, please read this doc. +If you are using V4 and want to upgrade to V5, you can see what changed below. ## From V4 to V5 -V4 was a great react tooltip component but was built a few years ago, it was built with react class components and it's hard to maintain and to the community give contributions, so, with this in mind, we built a new version of react tooltip using [floating-ui](https://floating-ui.com/) behind the scenes. This gives a great improvement in performance and a new and easier code to let the community contribute to the project. +V4 was a great react tooltip component but was built a while ago using React class components, whick makes it hard to maintain, and for the community give contributions. + +With this in mind, we built a new version of ReactTooltip using [floating-ui](https://floating-ui.com/) behind the scenes. +This resulted in a great improvement in performance, and made it easier for the community to contribute to the project. ## Improvements @@ -24,9 +27,10 @@ V4 was a great react tooltip component but was built a few years ago, it was bui - Exported module now is `Tooltip` instead of `ReactTooltip` - If you already have a `Tooltip` component in your application and want to explicitly declare this as `ReactTooltip`, just `import { Tooltip as ReactTooltip } from "react-tooltip"` - CSS import is now optional, so you can modify and/or add any styling to your floating tooltip element +- `data-for` attribute now is `data-tooltip-id` - `data-tip` attribute now is `data-tooltip-content` - `getContent` prop was removed. Instead, you can directly pass dynamic content to the `content` tooltip prop, or to `data-tooltip-content` in the anchor element -- Default behavior of tooltip now is equivalent to V4's `solid` effect, instead of `float`. The new `float` prop can be set to achieve V4's `effect="float"`. See [Options](../options.mdx) for more details. +- Default behavior of tooltip now is equivalent to V4's `solid` effect, instead of `float`. The new `float` prop can be set to achieve V4's `effect="float"`. See [Options](../options.mdx) for more details ## New Props @@ -54,33 +58,33 @@ V4 was a great react tooltip component but was built a few years ago, it was bui - [ ] `arrowColor` - use `className` and custom CSS - [ ] `arrowRadius` - use `className` and custom CSS - [ ] `tooltipRadius` - use `className` and custom CSS -- [ ] `insecure` - CSS will be a separate file and can be imported or not +- [ ] `insecure` - [x] `className` - [x] `id` - [x] `html` - [x] `delayHide` - also available on anchor element as `data-delay-hide` -- [ ] `delayUpdate` - if requested, can be implemented later +- [ ] `delayUpdate` - can be implemented if requested - [x] `delayShow` - also available on anchor element as `data-delay-show` - [ ] `event` - [ ] `eventOff` - [ ] `isCapture` - [ ] `globalEventOff` -- [ ] `getContent` - use dynamic `content` +- [ ] `getContent` - pass dynamic values to `content` instead - [x] `afterShow` - [x] `afterHide` - [ ] `overridePosition` - use `position` -- [ ] `disable` - state can be controlled or uncontrolled -- [ ] `scrollHide` - if requested, can be implemented later -- [ ] `resizeHide` - if requested, can be implemented later +- [ ] `disable` +- [ ] `scrollHide` - can be implemented if requested +- [ ] `resizeHide` - can be implemented if requested - [x] `wrapper` - also available on anchor element as `data-tooltip-wrapper` - [ ] `bodyMode` - [x] `clickable` -- [ ] `disableInternalStyle` - CSS will be a separate file and can be imported or not +- [ ] `disableInternalStyle` ### Detailed informations -- [The Pull Request of V5](https://github.com/ReactTooltip/react-tooltip/pull/820) +- [The V5 pull request](https://github.com/ReactTooltip/react-tooltip/pull/820). --- -Please see [all V5 Options here](../options.mdx). +Check [all V5 options here](../options.mdx). diff --git a/src/App.tsx b/src/App.tsx index 820ad1931..ea9d907a5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,54 +1,11 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ import { TooltipController as Tooltip } from 'components/TooltipController' -import { TooltipProvider, TooltipWrapper } from 'components/TooltipProvider' import { IPosition } from 'components/Tooltip/TooltipTypes.d' import { useState } from 'react' import styles from './styles.module.css' import { inline, offset } from './index' -function WithProviderMinimal() { - return ( -
-

- - - - - - -

- - - -
- ) -} - -function WithProviderMultiple() { - return ( -
-

- - - - - - -

- - -
- ) -} - function App() { const [anchorId, setAnchorId] = useState('button') const [isDarkOpen, setIsDarkOpen] = useState(false) @@ -61,26 +18,22 @@ function App() { setPosition({ x, y }) } + const handleButtonClick: React.MouseEventHandler = (event) => { + const target = event.target as HTMLElement + setAnchorId(target.id) + } + return (
- + { - setAnchorId('button2') - }} + onClick={handleButtonClick} > Hover or focus me

- - - - - - +
+

+ + + +

+ Tooltip content + + Tooltip content + +
{ const tooltipRef = useRef(null) const tooltipArrowRef = useRef(null) @@ -47,11 +50,31 @@ const Tooltip = ({ const [rendered, setRendered] = useState(false) const wasShowing = useRef(false) const lastFloatPosition = useRef(null) + /** + * @todo Remove this in a future version (provider/wrapper method is deprecated) + */ const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id) - const [activeAnchor, setActiveAnchor] = useState>({ current: null }) const hoveringTooltip = useRef(false) + const [anchorsBySelect, setAnchorsBySelect] = useState([]) const mounted = useRef(false) + useEffect(() => { + let selector = anchorSelect + if (!selector && id) { + selector = `[data-tooltip-id='${id}']` + } + if (!selector) { + return + } + try { + const anchors = Array.from(document.querySelectorAll(selector)) + setAnchorsBySelect(anchors) + } catch { + // warning was already issued in the controller + setAnchorsBySelect([]) + } + }, [anchorSelect, activeAnchor]) + /** * useLayoutEffect runs before useEffect, * but should be used carefully because of caveats @@ -66,15 +89,26 @@ const Tooltip = ({ useEffect(() => { if (!show) { - setRendered(false) + /** + * this fixes weird behavior when switching between two anchor elements very quickly + * remove the timeout and switch quickly between two adjancent anchor elements to see it + * + * in practice, this means the tooltip is not immediately removed from the DOM on hide + */ + const timeout = setTimeout(() => { + setRendered(false) + }, 150) + return () => { + clearTimeout(timeout) + } } + return () => null }, [show]) const handleShow = (value: boolean) => { if (!mounted.current) { return } - setRendered(true) /** * wait for the component to render and calculate position @@ -84,7 +118,6 @@ const Tooltip = ({ if (!mounted.current) { return } - setIsOpen?.(value) if (isOpen === undefined) { setShow(value) @@ -156,9 +189,7 @@ const Tooltip = ({ handleShow(true) } const target = event.currentTarget ?? event.target - setActiveAnchor((anchor) => - anchor.current === target ? anchor : { current: target as HTMLElement }, - ) + setActiveAnchor(target as HTMLElement) setProviderActiveAnchor({ current: target as HTMLElement }) if (tooltipHideDelayTimerRef.current) { @@ -234,8 +265,12 @@ const Tooltip = ({ } } - const handleClickOutsideAnchor = (event: MouseEvent) => { - if (activeAnchor.current?.contains(event.target as HTMLElement)) { + const handleClickOutsideAnchors = (event: MouseEvent) => { + const anchorById = document.querySelector(`[id='${anchorId}']`) + if (anchorById?.contains(event.target as HTMLElement)) { + return + } + if (anchorsBySelect.some((anchor) => anchor.contains(event.target as HTMLElement))) { return } handleShow(false) @@ -256,11 +291,12 @@ const Tooltip = ({ useEffect(() => { const elementRefs = new Set(anchorRefs) - const anchorById = document.querySelector(`[id='${anchorId}']`) as HTMLElement + anchorsBySelect.forEach((anchor) => { + elementRefs.add({ current: anchor }) + }) + + const anchorById = document.querySelector(`[id='${anchorId}']`) if (anchorById) { - setActiveAnchor((anchor) => - anchor.current === anchorById ? anchor : { current: anchorById }, - ) elementRefs.add({ current: anchorById }) } @@ -275,7 +311,7 @@ const Tooltip = ({ const enabledEvents: { event: string; listener: (event?: Event) => void }[] = [] if (events.find((event: string) => event === 'click')) { - window.addEventListener('click', handleClickOutsideAnchor) + window.addEventListener('click', handleClickOutsideAnchors) enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor }) } @@ -313,10 +349,8 @@ const Tooltip = ({ }) }) - const anchorElement = anchorById ?? activeAnchor.current - const parentObserverCallback: MutationCallback = (mutationList) => { - if (!anchorElement) { + if (!activeAnchor) { return } mutationList.some((mutation) => { @@ -324,8 +358,9 @@ const Tooltip = ({ return false } return [...mutation.removedNodes].some((node) => { - if (node.contains(anchorElement)) { + if (node.contains(activeAnchor)) { handleShow(false) + setActiveAnchor(null) return true } return false @@ -340,7 +375,7 @@ const Tooltip = ({ return () => { if (events.find((event: string) => event === 'click')) { - window.removeEventListener('click', handleClickOutsideAnchor) + window.removeEventListener('click', handleClickOutsideAnchors) } if (closeOnEsc) { window.removeEventListener('keydown', handleEsc) @@ -360,7 +395,7 @@ const Tooltip = ({ * rendered is also a dependency to ensure anchor observers are re-registered * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM */ - }, [rendered, anchorRefs, activeAnchor, closeOnEsc, anchorId, events, delayHide, delayShow]) + }, [rendered, anchorRefs, activeAnchor, closeOnEsc, events, delayHide, delayShow]) useEffect(() => { if (position) { @@ -384,15 +419,10 @@ const Tooltip = ({ return } - let elementReference = activeAnchor.current - if (anchorId) { - // `anchorId` element takes precedence - elementReference = document.querySelector(`[id='${anchorId}']`) as HTMLElement - } computeTooltipPosition({ place, offset, - elementReference, + elementReference: activeAnchor, tooltipReference: tooltipRef.current, tooltipArrowReference: tooltipArrowRef.current, strategy: positionStrategy, @@ -409,7 +439,20 @@ const Tooltip = ({ setInlineArrowStyles(computedStylesData.tooltipArrowStyles) } }) - }, [show, anchorId, activeAnchor, content, html, place, offset, positionStrategy, position]) + }, [show, activeAnchor, content, html, place, offset, positionStrategy, position]) + + useEffect(() => { + const anchorById = document.querySelector(`[id='${anchorId}']`) + const anchors = [...anchorsBySelect, anchorById] + if (!activeAnchor || !anchors.includes(activeAnchor)) { + /** + * if there is no active anchor, + * or if the current active anchor is not amongst the allowed ones, + * reset it + */ + setActiveAnchor(anchorsBySelect[0] ?? anchorById) + } + }, [anchorId, anchorsBySelect, activeAnchor]) useEffect(() => { return () => { @@ -423,7 +466,7 @@ const Tooltip = ({ }, []) const hasContentOrChildren = Boolean(html || content || children) - const canShow = Boolean(hasContentOrChildren && show && Object.keys(inlineStyles).length > 0) + const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0 return rendered ? ( - {/* content priority: children > html > content */} - {children || (html && ) || content} + {/** + * content priority: html > content > children + * children should be last so that it can be used as the "default" content + */} + {(html && ) || content || children} void afterShow?: () => void afterHide?: () => void + activeAnchor: HTMLElement | null + setActiveAnchor: (anchor: HTMLElement | null) => void } diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 6b98b1880..811472c87 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -15,6 +15,7 @@ import type { ITooltipController } from './TooltipControllerTypes' const TooltipController = ({ id, anchorId, + anchorSelect, content, html, className, @@ -51,7 +52,11 @@ const TooltipController = ({ const [tooltipWrapper, setTooltipWrapper] = useState(wrapper) const [tooltipEvents, setTooltipEvents] = useState(events) const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy) - const { anchorRefs, activeAnchor } = useTooltip(id) + const [activeAnchor, setActiveAnchor] = useState(null) + /** + * @todo Remove this in a future version (provider/wrapper method is deprecated) + */ + const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id) const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => { const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => { @@ -120,10 +125,32 @@ const TooltipController = ({ setTooltipHtml(html) }, [html]) + useEffect(() => { + setTooltipPlace(place) + }, [place]) + useEffect(() => { const elementRefs = new Set(anchorRefs) - const anchorById = document.querySelector(`[id='${anchorId}']`) as HTMLElement + let selector = anchorSelect + if (!selector && id) { + selector = `[data-tooltip-id='${id}']` + } + if (selector) { + try { + const anchorsBySelect = document.querySelectorAll(selector) + anchorsBySelect.forEach((anchor) => { + elementRefs.add({ current: anchor }) + }) + } catch { + if (!process.env.NODE_ENV || process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.warn(`[react-tooltip] "${anchorSelect}" is not a valid CSS selector`) + } + } + } + + const anchorById = document.querySelector(`[id='${anchorId}']`) if (anchorById) { elementRefs.add({ current: anchorById }) } @@ -132,7 +159,7 @@ const TooltipController = ({ return () => null } - const anchorElement = activeAnchor.current ?? anchorById + const anchorElement = activeAnchor ?? anchorById ?? providerActiveAnchor.current const observerCallback: MutationCallback = (mutationList) => { mutationList.forEach((mutation) => { @@ -167,11 +194,12 @@ const TooltipController = ({ // Remove the observer when the tooltip is destroyed observer.disconnect() } - }, [anchorRefs, activeAnchor, anchorId]) + }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]) const props: ITooltip = { id, anchorId, + anchorSelect, className, classNameArrow, content: tooltipContent, @@ -195,6 +223,8 @@ const TooltipController = ({ setIsOpen, afterShow, afterHide, + activeAnchor, + setActiveAnchor: (anchor: HTMLElement | null) => setActiveAnchor(anchor), } return children ? {children} : diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 80dbcd942..145840405 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -20,7 +20,12 @@ export interface ITooltipController { offset?: number id?: string variant?: VariantType + /** + * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. + * See https://react-tooltip.com/docs/getting-started + */ anchorId?: string + anchorSelect?: string wrapper?: WrapperType children?: ChildrenType events?: EventsType[] @@ -42,6 +47,7 @@ export interface ITooltipController { declare module 'react' { interface HTMLAttributes extends AriaAttributes, DOMAttributes { + 'data-tooltip-id'?: string 'data-tooltip-place'?: PlacesType 'data-tooltip-content'?: string 'data-tooltip-html'?: string diff --git a/src/components/TooltipProvider/TooltipProvider.tsx b/src/components/TooltipProvider/TooltipProvider.tsx index f37078da9..78ce1d287 100644 --- a/src/components/TooltipProvider/TooltipProvider.tsx +++ b/src/components/TooltipProvider/TooltipProvider.tsx @@ -34,6 +34,10 @@ const DEFAULT_CONTEXT_DATA_WRAPPER: TooltipContextDataWrapper = { const TooltipContext = createContext(DEFAULT_CONTEXT_DATA_WRAPPER) +/** + * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. + * See https://react-tooltip.com/docs/getting-started + */ const TooltipProvider: React.FC = ({ children }) => { const [anchorRefMap, setAnchorRefMap] = useState>>({ [DEFAULT_TOOLTIP_ID]: new Set(), diff --git a/src/components/TooltipProvider/TooltipProviderTypes.d.ts b/src/components/TooltipProvider/TooltipProviderTypes.d.ts index 1b1153230..7bcc98504 100644 --- a/src/components/TooltipProvider/TooltipProviderTypes.d.ts +++ b/src/components/TooltipProvider/TooltipProviderTypes.d.ts @@ -1,6 +1,10 @@ import type { ReactNode, RefObject } from 'react' import type { ITooltipController } from 'components/TooltipController/TooltipControllerTypes' +/** + * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. + * See https://react-tooltip.com/docs/getting-started + */ export type AnchorRef = RefObject export interface TooltipContextData { @@ -15,6 +19,10 @@ export interface TooltipContextDataWrapper { getTooltipData: (tooltipId?: string) => TooltipContextData } +/** + * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. + * See https://react-tooltip.com/docs/getting-started + */ export interface ITooltipWrapper { tooltipId?: string children: ReactNode diff --git a/src/components/TooltipProvider/TooltipWrapper.tsx b/src/components/TooltipProvider/TooltipWrapper.tsx index 5539500b5..49b5095b9 100644 --- a/src/components/TooltipProvider/TooltipWrapper.tsx +++ b/src/components/TooltipProvider/TooltipWrapper.tsx @@ -3,6 +3,10 @@ import classNames from 'classnames' import { useTooltip } from './TooltipProvider' import type { ITooltipWrapper } from './TooltipProviderTypes' +/** + * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. + * See https://react-tooltip.com/docs/getting-started + */ const TooltipWrapper = ({ tooltipId, children, diff --git a/src/test/__snapshots__/tooltip-wrapper.spec.js.snap b/src/test/__snapshots__/tooltip-wrapper.spec.js.snap deleted file mode 100644 index b4fc90476..000000000 --- a/src/test/__snapshots__/tooltip-wrapper.spec.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tooltip props basic tooltip component 1`] = ` -
- - - - -`; diff --git a/src/test/tooltip-wrapper.spec.js b/src/test/tooltip-wrapper.spec.js deleted file mode 100644 index 59428839a..000000000 --- a/src/test/tooltip-wrapper.spec.js +++ /dev/null @@ -1,35 +0,0 @@ -import { render, screen, waitFor } from '@testing-library/react' -import userEvent from '@testing-library/user-event' -import '@testing-library/jest-dom' -import { TooltipController as Tooltip } from '../components/TooltipController' -import { TooltipProvider, TooltipWrapper } from '../components/TooltipProvider' - -// Tell Jest to mock all timeout functions -jest.useRealTimers() - -describe('tooltip props', () => { - test('basic tooltip component', async () => { - const { container } = render( - - - - - - - - , - ) - const anchorElement = screen.getByText('Minimal 1') - - await userEvent.hover(anchorElement) - - let tooltip = null - - await waitFor(() => { - tooltip = screen.getByRole('tooltip') - }) - - expect(tooltip).toBeInTheDocument() - expect(container).toMatchSnapshot() - }) -})