react-tooltip 4.5.1 → 5.0.0-beta.1

package/docs/docs/examples/styling.mdx

@@ -0,0 +1,388 @@
+---
+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

@@ -0,0 +1,100 @@
+---
+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

@@ -0,0 +1,100 @@
+---
+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

@@ -0,0 +1,105 @@
+---
+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

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