Merge pull request #864 from ReactTooltip/fix-docs-v5

docs: fix docs references to new `data-tooltip-*` attributes

Author: danielbarion

README.md

@@ -51,7 +51,7 @@ or if you want to still use the name ReactTooltip as V4:
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 ```
 
-2 . Add data-tooltip-content = "your placeholder" to your element
+2 . Add `data-tooltip-content="your placeholder"` to your element
 
 ```jsx
 <p id="my-element" data-tooltip-content="hello world">

docs/docs/getting-started.mdx

@@ -56,49 +56,46 @@ There are two ways to use ReactTooltip.
 
 ### ReactTooltip props
 
-1 . Require react-tooltip after installation
+1 . Import `react-tooltip` after installation
 
 ```js
-import ReactTooltip from 'react-tooltip'
+import { Tooltip } from 'react-tooltip'
 ```
 
-2 . Add data-content = "your placeholder" to your element
+2 . Create anchor element
 
 ```jsx
 <p id="my-anchor-element">Tooltip</p>
 ```
 
-3 . Include react-tooltip component
+3 . Create `<Tooltip />` element
 
 ```jsx
-<ReactTooltip anchorId="my-anchor-element" content="hello world" place="top" />
+<Tooltip anchorId="my-anchor-element" content="hello world" place="top" />
 ```
 
 ### Anchor data attributes
 
-1 . Require react-tooltip after installation
+1 . Import `react-tooltip` after installation
 
 ```js
-import ReactTooltip from 'react-tooltip'
+import { Tooltip } from 'react-tooltip'
 ```
 
-2 . Add data-content = "your placeholder" to your element
+2 . Add `data-tooltip-content="your placeholder"` to your element
 
 ```jsx
 <p id="my-anchor-element" data-tooltip-content="hello world" data-tooltip-place="top">
   Tooltip
 </p>
 ```
 
-### Styling
-
-If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css`
-
-3 . Include react-tooltip component
+3 . Create `<Tooltip />` element
 
 ```jsx
-<ReactTooltip anchorId="my-anchor-element" />
+<Tooltip anchorId="my-anchor-element" />
 ```
 
-<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
-<Tooltip anchorId="props-basic" content="hello world!" />
+### Styling
+
+If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css`

docs/docs/options.mdx

@@ -77,12 +77,12 @@ import 'react-tooltip/dist/react-tooltip.css'
 import { Tooltip } from 'react-tooltip';
 import 'react-tooltip/dist/react-tooltip.css';
 
-<a id="attributes-basic" data-content="hello world!"> ◕‿‿◕ </a>
+<a id="attributes-basic" data-tooltip-content="hello world!"> ◕‿‿◕ </a>
 
 <Tooltip anchorId="attributes-basic" />
 ```
 
-<TooltipAnchor id="attributes-basic" data-content="hello world!">
+<TooltipAnchor id="attributes-basic" data-tooltip-content="hello world!">
   ◕‿‿◕
 </TooltipAnchor>
 <Tooltip anchorId="attributes-basic" />

docs/docs/upgrade-guide/basic-examples-v4-v5.mdx

@@ -43,7 +43,7 @@ import ReactTooltip from 'react-tooltip';
 <ReactTooltip id="tooltip" place="top" type="dark" />
 ```
 
-(v4) `data-tip` = `data-content` (v5)
+(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
@@ -68,7 +68,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 import { Tooltip } from 'react-tooltip';
 import 'react-tooltip/dist/react-tooltip.css';
 
-<a id="attributes-basic" data-content="hello world!"> ◕‿‿◕ </a>
+<a id="attributes-basic" data-tooltip-content="hello world!"> ◕‿‿◕ </a>
 
 <Tooltip anchorId="attributes-basic" />
 ```

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

@@ -26,24 +26,24 @@ V4 was a great react tooltip component but was built a few years ago, he 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 is `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-tip` attribute now is `data-content`
+- `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`
 - default behavior of tooltip now is `solid` instead of `float`
 
 ## New Props
 
 - [x] classNameArrow
-- [x] events - `data-events` -`['hover', 'click']` - default: `['hover']` (always an array when using as prop, even with only one option, when using as data attribute: `data-events="hover click"`)
+- [x] events - `data-tooltip-events` -`['hover', 'click']` - default: `['hover']` (always an array when using as prop, even with only one option, when using as data attribute: `data-tooltip-events="hover click"`)
 - [x] isOpen - `boolean` (to control tooltip state) - if not used, internal state of tooltip will handle the show state
 - [x] setIsOpen - `function` (to control tooltip state) - if not used, internal state of tooltip will handle the show state
 
 ## `V4` props available in `V5`
 
 - [x] children
-- [x] place - `data-place`
-- [x] type - **Deprecated** | in V5 -> `variant` - `data-variant`
+- [x] place - `data-tooltip-place`
+- [x] type - **Deprecated** | in V5 -> `variant` - `data-tooltip-variant`
 - [ ] effect - not implemented yet, if many users need this feature, we will work on this one.
-- [x] offset - `data-offset`
+- [x] offset - `data-tooltip-offset`
 - [ ] padding - **Deprecated** | in V5 -> can be easy updated by className prop
 - [ ] multiline - **Deprecated** | in V5 -> this is already supported as default by `content` and `html` props
 - [ ] border - **Deprecated** | in V5 -> can be easy updated by `className` prop
@@ -58,9 +58,9 @@ V4 was a great react tooltip component but was built a few years ago, he was bui
 - [x] className
 - [x] id
 - [x] html
-- [x] delayHide - `data-delay-hide`
+- [x] delayHide - `data-tooltip-delay-hide`
 - [ ] delayUpdate - **Deprecated** | if requested, can be implemented later
-- [x] delayShow - `data-delay-show`
+- [x] delayShow - `data-tooltip-delay-show`
 - [ ] event - not implemented yet, if many users need this feature, we will work on this one.
 - [ ] eventOff - **Deprecated**
 - [ ] isCapture - **Deprecated**
@@ -72,7 +72,7 @@ V4 was a great react tooltip component but was built a few years ago, he was bui
 - [ ] disable - **Deprecated** | in V5 -> state can be controlled or uncontrolled
 - [ ] scrollHide - not implemented yet, if many users need this feature, we will validate if we wrok on this one.
 - [ ] resizeHide - not implemented yet, if many users need this feature, we will validate if we wrok on this one.
-- [x] wrapper - `data-wrapper`
+- [x] wrapper - `data-tooltip-wrapper`
 - [ ] bodyMode - **Deprecated**
 - [ ] clickable - **Deprecated** | Supported by default in V5
 - [ ] disableInternalStyle - **Deprecated** | in V5 -> CSS will be a separate file and can be imported or not