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

package/docs/docs/examples/styling.mdx

@@ -1,388 +0,0 @@
----
-sidebar_position: 1
----
-
-# Styling
-
-How to customize tooltip styles in ReactTooltip styles.
-
-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>
-  )
-}
-
-### Basic explanation
-
-You don't need `!important` anymore, you just need to know at least a bit about CSS Specificity ([MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) | [W3c Docs](https://www.w3schools.com/css/css_specificity.asp)).
-Using CSS Specificity you can add a class with more specificity than the current used in tooltip and you can override or add new rules to the component style.
-
-```jsx
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-<style>
-.example-container .example {
-  color: #222;
-  background-color: rgb(0, 247, 255);
-}
-
-.example-container .example .example-arrow {
-  background-color: rgb(0, 247, 255);
-}
-</style>
-
-<div className="example-container">
-  <a id="custom-styles" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </a>
-  <Tooltip anchorId="custom-styles" className="example" classNameArrow="example-arrow" />
-</div>
-```
-
-<div
-  className="example-container"
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
-  <TooltipAnchor id="custom-styles" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="custom-styles" className="example" classNameArrow="example-arrow" />
-</div>
-
-#### Explanation
-
-In this example, we are adding an extra level to the CSS classes, the following styles are the default one of Tooltip component when we write this docs:
-
-```css
-.tooltip {
-  visibility: hidden;
-  width: max-content;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 8px 16px;
-  border-radius: 3px;
-  font-size: 90%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.3s ease-out;
-  will-change: opacity, visibility;
-}
-
-.arrow {
-  position: absolute;
-  background: var(--rt-color-dark);
-  width: 8px;
-  height: 8px;
-  transform: rotate(45deg);
-}
-
-/** Types variant **/
-.dark,
-.dark .arrow {
-  background: var(--rt-color-dark);
-  color: var(--rt-color-white);
-}
-
-.light,
-.light .arrow {
-  background-color: var(--rt-color-white);
-  color: var(--rt-color-dark);
-}
-
-.success,
-.success .arrow {
-  background-color: var(--rt-color-success);
-  color: var(--rt-color-white);
-}
-
-.warning,
-.warning .arrow {
-  background-color: var(--rt-color-warning);
-  color: var(--rt-color-white);
-}
-
-.error,
-.error .arrow {
-  background-color: var(--rt-color-error);
-  color: var(--rt-color-white);
-}
-
-.info,
-.info .arrow {
-  background-color: var(--rt-color-info);
-  color: var(--rt-color-white);
-}
-```
-
-So, if we only add new classes like the below, this will not work because this is the same level of specificity than the default dark variant as example, you can compare:
-
-```css
-.example {
-  color: #222;
-  background-color: rgb(0, 247, 255);
-}
-
-.example .example-arrow {
-  background-color: rgb(0, 247, 255);
-}
-```
-
-```css
-.tooltip {
-  ...;
-}
-
-.dark,
-.dark .arrow {
-  background: var(--rt-color-dark);
-  color: var(--rt-color-white);
-}
-```
-
-So, to make this work as expected, we need to add a new more level like this one:
-
-```css
-.some-class-or-rule .example {
-  color: #222;
-  background-color: rgb(0, 247, 255);
-}
-
-.some-class-or-rule .example .example-arrow {
-  background-color: rgb(0, 247, 255);
-}
-```
-
-Now this will work as expected.
-
----
-
-### More examples - Colors
-
-#### Orange
-
-```jsx
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-<style>
-.example-container .example-orange {
-  color: #222;
-  background-color: rgb(255, 153, 0);
-}
-
-.example-container .example-orange .example-arrow {
-  background-color: rgb(255, 153, 0);
-}
-</style>
-
-<div className="example-container">
-  <a id="custom-styles-orange" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </a>
-  <Tooltip anchorId="custom-styles-orange" className="example-orange" classNameArrow="example-arrow" />
-</div>
-```
-
-<div
-  className="example-container"
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
-  <TooltipAnchor id="custom-styles-orange" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip
-    anchorId="custom-styles-orange"
-    className="example-orange"
-    classNameArrow="example-arrow"
-  />
-</div>
-
-#### Pink
-
-```jsx
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-<style>
-.example-container .example-pink {
-  color: #fff;
-  background-color: rgb(255, 0, 255);
-}
-
-.example-container .example-pink .example-arrow {
-  background-color: rgb(255, 0, 255);
-}
-</style>
-
-<div className="example-container">
-  <a id="custom-styles-pink" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </a>
-  <Tooltip anchorId="custom-styles-pink" className="example-pink" classNameArrow="example-arrow" />
-</div>
-```
-
-<div
-  className="example-container"
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
-  <TooltipAnchor id="custom-styles-pink" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="custom-styles-pink" className="example-pink" classNameArrow="example-arrow" />
-</div>
-
-### More examples - Radius
-
-#### Removing radius
-
-```jsx
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-<style>
-.example-container .example-no-radius {
-  border-radius: 0;
-}
-</style>
-
-<div className="example-container">
-  <a id="custom-styles-no-radius" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </a>
-  <Tooltip anchorId="custom-styles-no-radius" className="example-no-radius" />
-</div>
-```
-
-<div
-  className="example-container"
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
-  <TooltipAnchor id="custom-styles-no-radius" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="custom-styles-no-radius" className="example-no-radius" />
-</div>
-
-#### Rounded
-
-```jsx
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-<style>
-.example-container .example-rounded {
-  border-radius: 50%;
-}
-</style>
-
-<div className="example-container">
-  <a id="custom-styles-rounded" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </a>
-  <Tooltip anchorId="custom-styles-rounded" className="example-rounded" />
-</div>
-```
-
-<div
-  className="example-container"
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
-  <TooltipAnchor id="custom-styles-rounded" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="custom-styles-rounded" className="example-rounded" />
-</div>
-
-### More examples - Padding
-
-#### Removing padding
-
-```jsx
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-<style>
-.example-container .example-no-padding {
-  padding: 0;
-}
-</style>
-
-<div className="example-container">
-  <a id="custom-styles-no-padding" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </a>
-  <Tooltip anchorId="custom-styles-no-padding" className="example-no-padding" />
-</div>
-```
-
-<div
-  className="example-container"
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
-  <TooltipAnchor id="custom-styles-no-padding" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="custom-styles-no-padding" className="example-no-padding" />
-</div>
-
-#### Adding more padding
-
-```jsx
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-<style>
-.example-container .example-padding {
-  border-radius: 50%;
-}
-</style>
-
-<div className="example-container">
-  <a id="custom-styles-padding" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </a>
-  <Tooltip anchorId="custom-styles-padding" className="example-padding" />
-</div>
-```
-
-<div
-  className="example-container"
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
-  <TooltipAnchor id="custom-styles-padding" data-tooltip-content="hello world!">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="custom-styles-padding" className="example-padding" />
-</div>
-
-#### Observation
-
-This doc is only if you are importing `import 'react-tooltip/dist/react-tooltip.css'`, if not, you can write your classes by you directly.
-
-With CSS specificity everything can be overridden if you know what are you doing.
-
-The necessity of `!import` was removed because `!import` cut a lot of levels/possibilities related to CSS specificity.

package/docs/docs/examples/variant.mdx

@@ -1,100 +0,0 @@
----
-sidebar_position: 1
----
-
-# Variant
-
-Standard colors available in ReactTooltip styles.
-
-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>
-  )
-}
-
-`variant` available values `dark` | `light` | `success` | `warning` | `error` | `info`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a
-  id="attributes-variant"
-  data-tooltip-content="hello world!"
-  data-tooltip-variant="success"
-> ◕‿‿◕ </a>
-
-<Tooltip anchorId="attributes-variant" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}>
-  <TooltipAnchor
-    id="attributes-variant-success"
-    data-tooltip-content="success tooltip color"
-    data-tooltip-variant="success"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="attributes-variant-success" />
-  <TooltipAnchor
-    id="attributes-variant-error"
-    data-tooltip-content="error tooltip color"
-    data-tooltip-variant="error"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="attributes-variant-error" />
-  <TooltipAnchor
-    id="attributes-variant-warning"
-    data-tooltip-content="warning tooltip color"
-    data-tooltip-variant="warning"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="attributes-variant-warning" />
-  <Tooltip anchorId="attributes-variant-info" />
-  <TooltipAnchor
-    id="attributes-variant-info"
-    data-tooltip-content="info tooltip color"
-    data-tooltip-variant="info"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="attributes-variant-dark" />
-  <TooltipAnchor
-    id="attributes-variant-dark"
-    data-tooltip-content="dark tooltip color"
-    data-tooltip-variant="dark"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="attributes-variant-light" />
-  <TooltipAnchor
-    id="attributes-variant-light"
-    data-tooltip-content="light tooltip color"
-    data-tooltip-variant="light"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-</div>

package/docs/docs/getting-started.mdx

@@ -1,100 +0,0 @@
----
-sidebar_position: 1
----
-
-# Getting Started
-
-This docs is related to V5, [if you are using V4 please check here](https://reacttooltip.github.io/react-tooltip/)
-
-A react tooltip is a floating react element that displays information related to an anchor element when it receives keyboard focus or the mouse hovers over it.
-
-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>
-  )
-}
-
-## Installation
-
-```bash
-npm install react-tooltip@5.0.0-beta.0
-```
-
-or
-
-```bash
-yarn add react-tooltip@5.0.0-beta.0
-```
-
-## Usage
-
-There are two ways to use ReactTooltip.
-
-1. Using props into ReactTooltip Element.
-2. Using data-attributes on anchor element.
-
-### ReactTooltip props
-
-1 . Require react-tooltip after installation
-
-```js
-import ReactTooltip from 'react-tooltip'
-```
-
-2 . Add data-content = "your placeholder" to your element
-
-```jsx
-<p id="my-anchor-element">Tooltip</p>
-```
-
-3 . Include react-tooltip component
-
-```jsx
-<ReactTooltip anchorId="my-anchor-element" content="hello world" place="top" />
-```
-
-### Anchor data attributes
-
-1 . Require react-tooltip after installation
-
-```js
-import ReactTooltip from 'react-tooltip'
-```
-
-2 . Add data-content = "your placeholder" to your element
-
-```jsx
-<p id="my-anchor-element" data-content="hello world" data-place="top">
-  Tooltip
-</p>
-```
-
-3 . Include react-tooltip component
-
-```jsx
-<ReactTooltip anchorId="my-anchor-element" />
-```
-
-<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
-<Tooltip anchorId="props-basic" content="hello world!" />

package/docs/docs/options.mdx

@@ -1,105 +0,0 @@
----
-sidebar_position: 3
----
-
-# Options
-
-All available prop and data-attribute options of ReactTooltip.
-
-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!" />
-
-#### Available props
-
-| name           | type                 | required | default                   | values                                            | description                                                                                                                                                     |
-| -------------- | -------------------- | -------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| className      | string               | false    |                           |                                                   | class name to customize tooltip element                                                                                                                         |
-| classNameArrow | string               | false    |                           |                                                   | class name to customize tooltip arrow element                                                                                                                   |
-| content        | string               | false    |                           |                                                   | content to de displayed in tooltip (`content` prop is priorized over `html`)                                                                                    |
-| html           | string               | false    |                           |                                                   | html content to de displayed in tooltip                                                                                                                         |
-| place          | string               | false    | `top`                     | `top` `right` `bottom` `left`                     | place related to anchor element where the tooltip will be rendered if possible                                                                                  |
-| offset         | number               | false    | `10`                      | any `number`                                      | space between the tooltip element and anchor element (arrow not included in calc)                                                                               |
-| id             | string               | false    | React `useId`             | any `string`                                      | option to set a specific id into the tooltip element, the default value is handled by React `useId` introduced on React 18                                      |
-| anchorId       | string               | false    | `undefined`               | any `string`                                      | id reference from the element that the tooltip will be positioned around                                                                                        |
-| variant        | string               | false    | `dark`                    | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values                                                                                                            |
-| wrapper        | valid element        | false    | `div`                     | `ElementType` `div` `span`                        | element wrapper of tooltip container, can be `div`, `span` or any valid Element                                                                                 |
-| children       | valid React children | false    | `undefined`               | valid React children                              | content can be pass through props, data-attributes or as children, children will be priorized over other options                                                |
-| events         | array                | false    | `hover`                   | `hover` `click`                                   | pre-defined events to handle show or hide tooltip                                                                                                               |
-| delayShow      | number               | false    |                           | any `number`                                      | tooltip show will be delayed in miliseconds by the amount of value                                                                                              |
-| delayHide      | number               | false    |                           | any `number`                                      | tooltip hide will be delayed in miliseconds by the amount of value                                                                                              |
-| getContent     | function             | false    |                           | (value: string) => string                         | a method available to parse, format or modify the given content of tooltip before show it                                                                       |
-| isOpen         | boolen               | false    | handled by internal state | `true` `false`                                    | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
-| setIsOpen      | function             | false    |                           |                                                   | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip                                       |
-
-### Data attributes
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="attributes-basic" data-content="hello world!"> ◕‿‿◕ </a>
-
-<Tooltip anchorId="attributes-basic" />
-```
-
-<TooltipAnchor id="attributes-basic" data-content="hello world!">
-  ◕‿‿◕
-</TooltipAnchor>
-<Tooltip anchorId="attributes-basic" />
-
-#### Available attributes
-
-| name                 | type   | required | default | values                                            | description                                                                       |
-| -------------------- | ------ | -------- | ------- | ------------------------------------------------- | --------------------------------------------------------------------------------- |
-| data-tooltip-content | string | false    |         |                                                   | content to de displayed in tooltip (`content` prop is priorized over `html`)      |
-| data-tooltip-html    | string | false    |         |                                                   | html content to de displayed in tooltip                                           |
-| data-tooltip-place   | string | false    | `top`   | `top` `right` `bottom` `left`                     | place related to anchor element where the tooltip will be rendered if possible    |
-| data-tooltip-offset  | number | false    | `10`    | any `number`                                      | space between the tooltip element and anchor element (arrow not included in calc) |
-| data-tooltip-variant | string | false    | `dark`  | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values                              |
-| data-tooltip-wrapper | string | false    | `div`   | `div` `span`                                      | element wrapper of tooltip container, can be `div`, `span` or any valid Element   |
-| data-tooltip-events  | string | false    | `hover` | `hover click` `hover` `click`                     | pre-defined events to handle show or hide tooltip                                 |
-| data-tooltip-show    | number | false    |         | any `number`                                      | tooltip show will be delayed in miliseconds by the amount of value                |
-| data-tooltip-hide    | number | false    |         | any `number`                                      | tooltip hide will be delayed in miliseconds by the amount of value                |
-
-#### 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

package/docs/docs/upgrade-guide/_category_.json

@@ -1,7 +0,0 @@
-{
-  "label": "Upgrade Guide",
-  "position": 2,
-  "link": {
-    "type": "generated-index"
-  }
-}