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

package/docs/README.md

@@ -1,50 +0,0 @@
-# Website
-
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-You can link react packages and react-tooltip to this repository, but this should not be updated in github:
-
-In package.json:
-```
-    "react": "link:../node_modules/react",
-    "react-dom": "link:../node_modules/react-dom",
-    "react-tooltip": "link:.."
-```
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/docs/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};

package/docs/docs/examples/_category_.json

@@ -1,7 +0,0 @@
-{
-  "label": "Examples",
-  "position": 4,
-  "link": {
-    "type": "generated-index"
-  }
-}

package/docs/docs/examples/basic-examples.mdx

@@ -1,68 +0,0 @@
----
-sidebar_position: 1
----
-
-# Basic examples
-
-Basic examples of use ReactTooltip component.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Props
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
-
-<a id="props-basic"> ◕‿‿◕ </a>
-
-<Tooltip anchorId="props-basic" content="hello world!" />
-```
-
-<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
-<Tooltip anchorId="props-basic" content="hello world!" />
-
-### Data attributes
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="attributes-basic" data-tooltip-content="hello world!"> ◕‿‿◕ </a>
-
-<Tooltip anchorId="attributes-basic" />
-```
-
-<TooltipAnchor id="attributes-basic" data-tooltip-content="hello world!">
-  ◕‿‿◕
-</TooltipAnchor>
-<Tooltip anchorId="attributes-basic" />
-
----
-
-To check all available options, please check `options` docs

package/docs/docs/examples/children.mdx

@@ -1,67 +0,0 @@
----
-sidebar_position: 1
----
-
-# Children
-
-Children for content example of ReactTooltip component use case.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Using `children` as content
-
-When using `children` as content, `content` and `html` params will be ignored and only children will be shown.
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor-children"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-children">
-  <div>
-    <h1>Tooltip</h1>
-    <ul>
-      <li>Lorem</li>
-      <li>Ipsum</li>
-    </ul>
-  </div>
-</Tooltip>
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor-children">◕‿‿◕</TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-children">
-    <div>
-      <h1>Tooltip</h1>
-      <ul>
-        <li>Lorem</li>
-        <li>Ipsum</li>
-      </ul>
-    </div>
-  </Tooltip>
-</div>

package/docs/docs/examples/content.mdx

@@ -1,80 +0,0 @@
----
-sidebar_position: 1
----
-
-# Content
-
-Content in ReactTooltip component.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Using `content`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor" content="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip" place="left" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
-  <Tooltip
-    anchorId="tooltip-anchor"
-    content="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
-  />
-</div>
-
-### Using `data-tooltip-content`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a
-  id="tooltip-anchor-data-html"
-  data-tooltip-content="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
-> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-data-html" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor
-    id="tooltip-anchor-html"
-    data-tooltip-content="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-html" />
-</div>
-
-#### Observations
-
-- When using `data-tooltip-content` the HTML tags works by default like [HTML](./html.mdx) param
-- When using prop `content` the HTML doesn't work by default, use prop `html` instead of this

package/docs/docs/examples/delay.mdx

@@ -1,84 +0,0 @@
----
-sidebar_position: 1
----
-
-# Delays
-
-Delays available in ReactTooltip component.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Delay to Hide tooltip
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a
-  id="tooltip-anchor-hide"
-  data-tooltip-content="hover on me will keep the tooltip"
-  data-tooltip-delay-hide={3000}
-> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-hide" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor
-    id="tooltip-anchor-hide"
-    data-tooltip-content="hover on me will keep the tooltip"
-    data-tooltip-delay-hide={3000}
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-hide" />
-</div>
-
-### Delay to Show tooltip
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a
-  id="tooltip-anchor-show"
-  data-tooltip-content="hover on me will keep the tooltip"
-  data-tooltip-delay-show={3000}
-> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-show" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor
-    id="tooltip-anchor-show"
-    data-tooltip-content="hover on me will keep the tooltip"
-    data-tooltip-delay-show={3000}
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-show" />
-</div>

package/docs/docs/examples/events.mdx

@@ -1,85 +0,0 @@
----
-sidebar_position: 1
----
-
-# Events
-
-Events available in ReactTooltip component.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Using `hover`
-
-This is the default of ReactTooltip events options.
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor" content="Hello World!" events={['hover']} />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor" content="Hello World!" events={['hover']} />
-</div>
-
-### Using `click`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor-click"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-click" content="Hello World!" events={['click']} />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor-click">◕‿‿◕</TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-click" content="Hello World!" events={['click']} />
-</div>
-
-### Using `hover` and `click`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor-hover-click"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-hover-click" content="Hello World!" events={['hover', 'click']} />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor-hover-click">◕‿‿◕</TooltipAnchor>
-  <Tooltip
-    anchorId="tooltip-anchor-hover-click"
-    content="Hello World!"
-    events={['hover', 'click']}
-  />
-</div>

package/docs/docs/examples/get-content.mdx

@@ -1,58 +0,0 @@
----
-sidebar_position: 1
----
-
-# GetContent
-
-Get content param in ReactTooltip component.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Using `getContent` prop
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor"> ◕‿‿◕ </a>
-<Tooltip
-  anchorId="tooltip-anchor"
-  content="Hello World from"
-  place="left"
-  getContent={(value) => `${value} manipuled message`}
-/>
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
-  <Tooltip
-    anchorId="tooltip-anchor"
-    content="Hello World from"
-    getContent={(value) => `${value} manipuled message`}
-  />
-</div>

package/docs/docs/examples/html.mdx

@@ -1,75 +0,0 @@
----
-sidebar_position: 1
----
-
-# HTML
-
-HTML content in ReactTooltip component.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Using `html`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor" html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip" place="left" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
-  <Tooltip
-    anchorId="tooltip-anchor"
-    html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
-  />
-</div>
-
-### Using `data-tooltip-html`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a
-  id="tooltip-anchor-data-html"
-  data-tooltip-html="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
-> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-data-html" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor
-    id="tooltip-anchor-html"
-    data-tooltip-html="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-html" />
-</div>

package/docs/docs/examples/multiline.mdx

@@ -1,91 +0,0 @@
----
-sidebar_position: 1
----
-
-# Multiline
-
-Multiline content in ReactTooltip component.
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### Using `html`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor" html="Hello<br />multiline<br />tooltip" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor" html="Hello<br />multiline<br />tooltip" />
-</div>
-
-### Using `data-tooltip-content`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor-data-content" data-tooltip-content="Hello<br />multiline<br />tooltip"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-data-content" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor
-    id="tooltip-anchor-data-content"
-    data-tooltip-content="Hello<br />multiline<br />tooltip"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-data-content" />
-</div>
-
-### Using `data-tooltip-html`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor-data-html" data-tooltip-html="Hello<br />multiline<br />tooltip"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-data-html" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor-html" data-tooltip-html="Hello<br />multiline<br />tooltip">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-html" />
-</div>
-
-#### Observations
-
-- When using `data-tooltip-content` the `<br />` works by default
-- When using prop `content` the `<br />` doesn't work by default, use prop `html` instead of this