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

package/docs/docs/examples/offset.mdx

@@ -1,69 +0,0 @@
----
-sidebar_position: 1
----
-
-# Offset
-
-Offset param of 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>
-  )
-}
-
-`offset` accepts any `number` as param
-
-```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" />
-
-<a id="tooltip-anchor-20"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-20" content="Hello World" offset={20} />
-
-<a id="tooltip-anchor-30"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-30" content="Hello World" offset={30} />
-
-<a id="tooltip-anchor-40"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-40" content="Hello World" offset={40} />
-
-<a id="tooltip-anchor-50"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-50" content="Hello World" offset={50} />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor id="tooltip-anchor-20">◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor id="tooltip-anchor-30">◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor id="tooltip-anchor-40">◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor id="tooltip-anchor-50">◕‿‿◕</TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor" content="Hello World" />
-  <Tooltip anchorId="tooltip-anchor-20" content="Hello World" offset={20} />
-  <Tooltip anchorId="tooltip-anchor-30" content="Hello World" offset={30} />
-  <Tooltip anchorId="tooltip-anchor-40" content="Hello World" offset={40} />
-  <Tooltip anchorId="tooltip-anchor-50" content="Hello World" offset={50} />
-</div>

package/docs/docs/examples/place.mdx

@@ -1,55 +0,0 @@
----
-sidebar_position: 1
----
-
-# Place
-
-Available places of 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>
-  )
-}
-
-`place` available values `top` | `right` | `bottom` | `left`
-
-```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 - top" place="top" />
-<Tooltip anchorId="tooltip-anchor" content="Hello World - right" place="right" />
-<Tooltip anchorId="tooltip-anchor" content="Hello World - bottom" place="bottom" />
-<Tooltip anchorId="tooltip-anchor" content="Hello World - left" place="left" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor" content="Hello World - top" place="top" />
-  <Tooltip anchorId="tooltip-anchor" content="Hello World - right" place="right" />
-  <Tooltip anchorId="tooltip-anchor" content="Hello World - bottom" place="bottom" />
-  <Tooltip anchorId="tooltip-anchor" content="Hello World - left" place="left" />
-</div>

package/docs/docs/examples/state.mdx

@@ -1,331 +0,0 @@
----
-sidebar_position: 1
----
-
-# State
-
-Controlled and uncontrolled state examples of ReactTooltip component.
-
-import { useState } from 'react'
-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>
-  )
-}
-
-export const ControlledExample = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [anchorId, setAnchorId] = useState('tooltip-anchor')
-  return (
-    <>
-      <TooltipAnchor
-        id="tooltip-anchor"
-        data-tooltip-content="1"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor')
-          if (!isOpen) {
-            setIsOpen(true)
-          }
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-2"
-        data-tooltip-content="2"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-2')
-          if (!isOpen) {
-            setIsOpen(true)
-          }
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-3"
-        data-tooltip-content="3"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-3')
-          if (!isOpen) {
-            setIsOpen(true)
-          }
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-4"
-        data-tooltip-content="4"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-4')
-          if (!isOpen) {
-            setIsOpen(true)
-          }
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-5"
-        data-tooltip-content="5"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-5')
-          if (!isOpen) {
-            setIsOpen(true)
-          }
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-6"
-        data-tooltip-content="6"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-6')
-          if (!isOpen) {
-            setIsOpen(true)
-          }
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <Tooltip
-        anchorId={anchorId}
-        getContent={(dataTip) =>
-          `Same Tooltip, different anchor element. This little buddy is ${dataTip}`
-        }
-        isOpen={isOpen}
-      />
-    </>
-  )
-}
-
-### 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.
-
-```jsx
-import { useState } from 'react';
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-const [isOpen, setIsOpen] = useState(false)
-const [anchorId, setAnchorId] = useState('tooltip-anchor')
-
-<a id="tooltip-anchor"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor')
-    // in this example we only want to trigger the isOpen as true by one time
-    if (!isOpen) {
-      setIsOpen(true)
-    }
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-2"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-2')
-    // in this example we only want to trigger the isOpen as true by one time
-    if (!isOpen) {
-      setIsOpen(true)
-    }
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-3"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-3')
-    // in this example we only want to trigger the isOpen as true by one time
-    if (!isOpen) {
-      setIsOpen(true)
-    }
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-4"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-4')
-    // in this example we only want to trigger the isOpen as true by one time
-    if (!isOpen) {
-      setIsOpen(true)
-    }
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-5"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-5')
-    // in this example we only want to trigger the isOpen as true by one time
-    if (!isOpen) {
-      setIsOpen(true)
-    }
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-6"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-6')
-    // in this example we only want to trigger the isOpen as true by one time
-    if (!isOpen) {
-      setIsOpen(true)
-    }
-  }}
-> ◕‿‿◕ </a>
-<Tooltip
-  anchorId={anchorId}
-  getContent={(dataTip) => `Same Tooltip, different anchor element. This little buddy is ${dataTip}`}
-  isOpen={isOpen}
-/>
-```
-
-<div style={{ display: 'flex', columnGap: '8px', justifyContent: 'center', paddingTop: '36px' }}>
-  <ControlledExample />
-</div>
-
-export const UncontrolledExample = () => {
-  const [anchorId, setAnchorId] = useState('tooltip-anchor-uncontrolled')
-  return (
-    <>
-      <TooltipAnchor
-        id="tooltip-anchor-uncontrolled"
-        data-tooltip-content="1"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-uncontrolled')
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-uncontrolled-2"
-        data-tooltip-content="2"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-uncontrolled-2')
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-uncontrolled-3"
-        data-tooltip-content="3"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-uncontrolled-3')
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-uncontrolled-4"
-        data-tooltip-content="4"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-uncontrolled-4')
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-uncontrolled-5"
-        data-tooltip-content="5"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-uncontrolled-5')
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <TooltipAnchor
-        id="tooltip-anchor-uncontrolled-6"
-        data-tooltip-content="6"
-        onMouseEnter={() => {
-          setAnchorId('tooltip-anchor-uncontrolled-6')
-        }}
-      >
-        ◕‿‿◕
-      </TooltipAnchor>
-      <Tooltip
-        anchorId={anchorId}
-        getContent={(dataTip) =>
-          `Same Tooltip, different anchor element. This little buddy is ${dataTip}`
-        }
-      />
-    </>
-  )
-}
-
-#### 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')
-
-<a id="tooltip-anchor"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor')
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-2"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-2')
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-3"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-3')
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-4"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-4')
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-5"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-5')
-  }}
-> ◕‿‿◕ </a>
-<a id="tooltip-anchor-6"
-  onMouseEnter={() => {
-    setAnchorId('tooltip-anchor-6')
-  }}
-> ◕‿‿◕ </a>
-<Tooltip
-  anchorId={anchorId}
-  getContent={(dataTip) => `Same Tooltip, different anchor element. This little buddy is ${dataTip}`}
-/>
-```
-
-<div style={{ display: 'flex', columnGap: '8px', justifyContent: 'center', paddingTop: '36px' }}>
-  <UncontrolledExample />
-</div>
-
-#### 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.