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

package/dist/react-tooltip-tokens.css

@@ -0,0 +1,8 @@
+:root {
+  --rt-color-white: #fff;
+  --rt-color-dark: #222;
+  --rt-color-success: #8dc572;
+  --rt-color-error: #be6464;
+  --rt-color-warning: #f0ad4e;
+  --rt-color-info: #337ab7;
+}

package/dist/react-tooltip.d.ts

@@ -0,0 +1,25 @@
+import { PlacesType, VariantType, WrapperType, ChildrenType, EventsType } from 'components/Tooltip/TooltipTypes';
+
+interface ITooltipController {
+  className?: string
+  classNameArrow?: string
+  content?: string | number
+  html?: string
+  place?: PlacesType
+  offset?: number
+  id?: string
+  variant?: VariantType
+  anchorId?: string
+  wrapper?: WrapperType
+  children?: ChildrenType
+  events?: EventsType[]
+  delayShow?: number
+  delayHide?: number
+  getContent?: function
+  isOpen?: boolean
+  setIsOpen?: (value: boolean) => void
+}
+
+declare const TooltipController: ({ id, anchorId, content, html, className, classNameArrow, variant, place, offset, wrapper, children, events, delayShow, delayHide, getContent, isOpen, setIsOpen, }: ITooltipController) => JSX.Element;
+
+export { TooltipController as Tooltip };

package/docs/docs/{getting-started.md → getting-started.mdx}

@@ -8,16 +8,43 @@ This docs is related to V5, [if you are using V4 please check here](https://reac
 
 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
+npm install react-tooltip@5.0.0-beta.0
 ```
 
 or
 
 ```bash
-yarn add react-tooltip
+yarn add react-tooltip@5.0.0-beta.0
 ```
 
 ## Usage
@@ -68,3 +95,6 @@ import ReactTooltip from 'react-tooltip'
 ```jsx
 <ReactTooltip anchorId="my-anchor-element" />
 ```
+
+<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
+<Tooltip anchorId="props-basic" content="hello world!" />

package/docs/docs/upgrade-guide/changelog-v4-v5.md

@@ -21,6 +21,7 @@ V4 was a great react tooltip component but was built a few years ago, he was bui
 
 ## Break Changes
 
+- All data attributes now has `tooltip` into his name
 - Default Padding changed from `padding: 8px 21px;` to `padding: 8px 16px;`
 - Exported module now is `Tooltip` instead of `ReactTooltip`
 - - If you already have a `Tooltip` component in your application and want to explicitly declare this is `ReactTooltip`, just `import { Tooltip as ReactTooltip } from "react-tooltip"`

package/docs/docusaurus.config.js

@@ -55,11 +55,20 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      announcementBar: {
+        id: 'support_us',
+        content:
+          '⭐️ If you like ReactTooltip, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/ReactTooltip/react-tooltip">GitHub</a> ⭐️',
+        backgroundColor: '#222',
+        textColor: '#fff',
+        isCloseable: false,
+      },
       navbar: {
         title: 'React Tooltip',
         logo: {
           alt: 'React Tooltip Logo',
-          src: 'img/logo.svg',
+          src: 'img/only-tooltip.svg',
+          width: 120,
         },
         items: [
           {

package/docs/package.json

@@ -22,7 +22,7 @@
     "prism-react-renderer": "^1.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-tooltip": "link:.."
+    "react-tooltip": "5.0.0-beta.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.2.0",

package/docs/src/components/HomepageFeatures/index.tsx

@@ -1,47 +1,47 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
+/* eslint-disable import/no-unresolved */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable global-require */
+import React from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.css'
 
 type FeatureItem = {
-  title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: JSX.Element;
-};
+  title: string
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>
+  description: JSX.Element
+}
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    Svg: require('@site/static/img/only-tooltip-top.svg').default,
     description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
+      <>ReactTooltip was designed with love from the ground up to be easily installed and used.</>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'Open Source',
+    Svg: require('@site/static/img/github.svg').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        An Open Source project built by developers to developers, we work together with the
+        community to always try to improve ReactTooltip.
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: 'Focus on What Matters',
+    Svg: require('@site/static/img/happy-face-tooltip.svg').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Don&rsquo;t waste your time building a tooltip component from scratch, just use ReactTooltip
+        and focus on new features or bug fixes.
       </>
     ),
   },
-];
+]
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, Svg, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
@@ -52,7 +52,7 @@ function Feature({title, Svg, description}: FeatureItem) {
         <p>{description}</p>
       </div>
     </div>
-  );
+  )
 }
 
 export default function HomepageFeatures(): JSX.Element {
@@ -61,10 +61,11 @@ export default function HomepageFeatures(): JSX.Element {
       <div className="container">
         <div className="row">
           {FeatureList.map((props, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
             <Feature key={idx} {...props} />
           ))}
         </div>
       </div>
     </section>
-  );
+  )
 }

package/docs/src/pages/index.tsx

@@ -14,6 +14,9 @@ function HomepageHeader() {
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__logo">
+          <img src="img/logo.svg" alt="Happy face with a tooltip saying 'Hello I'm a tooltip'" />
+        </p>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link className="button button--primary button--lg" to="/docs/category/upgrade-guide">