react-tooltip 5.0.0-beta.1 → 5.0.0-beta.2

package/.eslintrc.json

@@ -7,7 +7,8 @@
     "plugin:prettier/recommended"
   ],
   "env": {
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "parser": "@typescript-eslint/parser",
   "plugins": ["react", "react-hooks", "prettier", "@typescript-eslint"],

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,53 @@
+## Code of Conduct
+
+### Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+### Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others’ private information, such as a physical or email address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+### Enforcement Responsibilities
+
+Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+### Scope
+
+This Code of Conduct applies within all community spaces and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the project team responsible for enforcement. All complaints will be reviewed and investigated promptly and fairly.
+
+All project maintainers are obligated to respect the privacy and security of the reporter of any incident.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1,
+available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: https://www.contributor-covenant.org/version/2/1

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Wang Zixiao
+Copyright (c) 2022 ReactTooltip Team Github
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

package/README.md

@@ -11,9 +11,11 @@
 
 ## Demo
 
-[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/heuristic-curran-bddeu?fontsize=14&hidenavigation=1&theme=dark)
+[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
 
-Or see it on [Github Page](https://reacttooltip.github.io/react-tooltip/).
+Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/).
+
+Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-started).
 
 ## Installation
 
@@ -34,67 +36,44 @@ yarn add react-tooltip
 1 . Require react-tooltip after installation
 
 ```js
-import ReactTooltip from 'react-tooltip';
+import { Tooltip } from 'react-tooltip'
 ```
 
-2 . Add data-tip = "your placeholder" to your element
+or if you want to still use the name ReactTooltip as V4:
+
+```js
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+```
+
+2 . Add data-tooltip-content = "your placeholder" to your element
 
 ```jsx
-<p data-tip="hello world">Tooltip</p>
+<p id="my-element" data-tooltip-content="hello world">
+  Tooltip
+</p>
 ```
 
 3 . Include react-tooltip component
 
 ```jsx
-<ReactTooltip />
+<ReactTooltip anchorId="my-element" />
 ```
 
 ### Standalone
 
-You can import `node_modules/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
+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.
+
+mode: `esm` `cjs` `umd`
+
+If you want to use default ReactTooltip styles, don't forget to import the styles: `node_modules/react-tooltip/dist/react-tooltip.css`
+
+PS: all the files has a minified version and a not minified version.
+
+![image](https://user-images.githubusercontent.com/9615850/205637814-c0ef01ae-bd77-4e7f-b4bf-df502c71e5c3.png)
 
 ## Options
 
-Notes:
-
-- The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults
-- The option you set on `<ReactTooltip />` component will be implemented on every tooltip in a same page: `<ReactTooltip effect="solid" />`
-- The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
-
-| Global               | Specific              | Type          | Values                                                                                                                                | Description                                                                                                                                                                                         |
-| :------------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| place                | data-place            | String        | "top", "right", "bottom", "left", or comma-separated e.g. "left,right"                                                                | placement - can specify a comma-separated list of preferences that will be attempted in order                                                                                                       |
-| type                 | data-type             | String        | dark, success, warning, error, info, light                                                                                            | theme                                                                                                                                                                                               |
-| effect               | data-effect           | String        | float, solid                                                                                                                          | behaviour of tooltip                                                                                                                                                                                |
-| event                | data-event            | String        | e.g. click                                                                                                                            | custom event to trigger tooltip                                                                                                                                                                     |
-| eventOff             | data-event-off        | String        | e.g. click                                                                                                                            | custom event to hide tooltip (only makes effect after setting event attribute)                                                                                                                      |
-| globalEventOff       |                       | String        | e.g. click                                                                                                                            | global event to hide tooltip (global only)                                                                                                                                                          |
-| isCapture            | data-iscapture        | Bool          | true, false                                                                                                                           | when set to true, custom event's propagation mode will be capture                                                                                                                                   |
-| offset               | data-offset           | Object        | { top?: number, right?: number, bottom?: number, left?: number }                                                                      | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global                                                                                                  |
-| padding              | data-padding          | String        | e.g. `8px 21px`                                                                                                                       | Popup padding style                                                                                                                                                                                 |
-| multiline            | data-multiline        | Bool          | true, false                                                                                                                           | support `<br>`, `<br />` to make multiline                                                                                                                                                          |
-| className            | data-class            | String        |                                                                                                                                       | extra custom class, can use !important to overwrite react-tooltip's default class                                                                                                                   |
-| html                 | data-html             | Bool          | true, false                                                                                                                           | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.<br/>When using JSX, see [this note](#jsx-note) below.   |
-| delayHide            | data-delay-hide       | Number        |                                                                                                                                       | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`                                                                                                          |
-| delayShow            | data-delay-show       | Number        |                                                                                                                                       | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`                                                                                                          |
-| delayUpdate          | data-delay-update     | Number        |                                                                                                                                       | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |
-| insecure             | null                  | Bool          | true, false                                                                                                                           | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)                                                                                   |
-| border               | data-border           | Bool          | true, false                                                                                                                           | Add one pixel white border                                                                                                                                                                          |
-| borderClass          | data-border-class     | String        | e.g. custom-border-class                                                                                                              | A custom class name to use for the border - enabled by the `border` prop                                                                                                                            |
-| textColor            | data-text-color       | String        | e.g. red                                                                                                                              | Popup text color                                                                                                                                                                                    |
-| backgroundColor      | data-background-color | String        | e.g. yellow                                                                                                                           | Popup background color                                                                                                                                                                              |
-| borderColor          | data-border-color     | String        | e.g. green                                                                                                                            | Popup border color - enabled by the `border` value                                                                                                                                                  |
-| arrowColor           | data-arrow-color      | String        | e.g. #fff                                                                                                                             | Popup arrow color - if not specified, will use the `backgroundColor` value                                                                                                                          |
-| getContent           | null                  | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval]                                                                                          | Generate the tip content dynamically                                                                                                                                                                |
-| afterShow            | null                  | Func          | (evt) => {}                                                                                                                           | Function that will be called after tooltip show, with event that triggered show                                                                                                                     |
-| afterHide            | null                  | Func          | (evt) => {}                                                                                                                           | Function that will be called after tooltip hide, with event that triggered hide                                                                                                                     |
-| overridePosition     | null                  | Func          | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one                                                                                                                                         |
-| disable              | data-tip-disable      | Bool          | true, false                                                                                                                           | Disable the tooltip behaviour, default is false                                                                                                                                                     |
-| scrollHide           | data-scroll-hide      | Bool          | true, false                                                                                                                           | Hide the tooltip when scrolling, default is true                                                                                                                                                    |
-| resizeHide           | null                  | Bool          | true, false                                                                                                                           | Hide the tooltip when resizing the window, default is true                                                                                                                                          |
-| wrapper              | null                  | String        | div, span                                                                                                                             | Selecting the wrapper element of the react tooltip, default is div                                                                                                                                  |
-| clickable            | null                  | Bool          | true, false                                                                                                                           | Enables tooltip to respond to mouse (or touch) events, default is false                                                                                                                             |
-| disableInternalStyle | null                  | Bool          | true, false                                                                                                                           | Disable internal styles to let custom styling of the tooltip being added                                                                                                                            |
+For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options)
 
 ### Security Note
 
@@ -102,121 +81,20 @@ The `html` option allows a tooltip to directly display raw HTML. This is a secur
 
 #### 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 still need to set `data-html={true}`.
+You can use React's [`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';
 [...]
-<p data-html={true} data-tip={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
+<p id="my-element" data-tooltip-html={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
   Hover me
 </p>
 ```
 
 #### Note
 
-1. **data-tip** is necessary, because `<ReactTooltip />` finds the tooltip via this attribute
-2. **data-for** corresponds to the **id** of `<ReactTooltip />`
-3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**s
-
-## Static Methods
-
-### ReactTooltip.hide(target)
-
-> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
-
-```jsx
-import ReactTooltip from 'react-tooltip'
-
-<p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
-<button onClick={() => { ReactTooltip.hide(this.fooRef) }}></button>
-<ReactTooltip />
-```
-
-### ReactTooltip.rebuild()
-
-> Rebinding all tooltips
-
-### ReactTooltip.show(target)
-
-> Show specific tooltip manually, for example:
-
-```jsx
-import ReactTooltip from 'react-tooltip'
-
-<p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
-<button onClick={() => { ReactTooltip.show(this.fooRef) }}></button>
-<ReactTooltip />
-```
-
-## Troubleshooting
-
-### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
-
-The component was designed to set `<ReactTooltip />` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:
-
-1. Place `<ReactTooltip />` outside of the `<Modal>`
-2. Use `ReactTooltip.rebuild()` when opening the modal
-3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index
-
-> I suggest always putting `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
-> method to control tooltip's behaviour in some situations
-
-### 2. Hide tooltip when getContent returns undefined
-
-When you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-\* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.
-
-```jsx
-<p data-tip='' data-for='test'></p>
-<ReactTooltip id='test' getContent={() => { return null }}/>
-```
-
-Same for empty children, if you don't want show the tooltip when the children is empty
-
-```jsx
-<p data-tip='' data-for='test'></p>
-<ReactTooltip id='test'>{}</ReactTooltip>
-```
-
-### 3. Tooltip not binding to dynamic content
-
-When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
-on new dynamic content, the tooltip will not register its event listener.
-
-For example, you render a generic tooltip in the root of your app, then load a list of content async.
-Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
-Since the tooltip has already scanned for data-tip these new elements will not trigger.
-
-One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
-to allow event wireup.
-
-#### Example
-
-```jsx
-<app>
-  <ReactTooltip id="foo" />
-  <list />
-</app>
-```
-
-```jsx
-
-const dynamicList = (props) => {
-
- useEffect(() => {
-        ReactTooltip.rebuild();
-    });
-
-return(
-  <list>
-    {data.map((item)=> {
-      <span data-for="foo">My late bound tooltip triggered data</span>
-    });}
-  </list>
-);
-};
-
-```
+- **id** is necessary, because `<ReactTooltip anchorId="my-element" />` finds the tooltip via this attribute
 
 ## Article
 
@@ -224,7 +102,7 @@ return(
 
 ## Maintainers
 
-[danielbarion](https://github.com/danielbarion) Casual maintainer - accepting PRs and doing minor testing/development.
+[danielbarion](https://github.com/danielbarion) maintainer - accepting PRs and doing minor testing/development.
 
 [alexgurr](https://github.com/alexgurr) Casual maintainer - accepting PRs and doing minor testing/development.