Skip to content

Fix docs references to new data-tooltip-* attributes #864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 16, 2022
Merged

Fix docs references to new data-tooltip-* attributes #864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
29 changes: 13 additions & 16 deletions docs/docs/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
4 changes: 2 additions & 2 deletions docs/docs/options.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/upgrade-guide/basic-examples-v4-v5.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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" />
```
Expand Down
16 changes: 8 additions & 8 deletions docs/docs/upgrade-guide/changelog-v4-v5.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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**
Expand All @@ -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
Expand Down