V2 (WIP)

.babelrc

@@ -1,6 +1,8 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": ["@babel/env", "@babel/react"],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    ["@babel/transform-destructuring", { "loose": true }, "unique"],
+    ["@babel/proposal-class-properties", { "loose": true }, "unique"],
+    ["@babel/proposal-object-rest-spread", { "loose": true }, "unique"]
   ]
 }

.gitignore

@@ -2,3 +2,5 @@ node_modules
 coverage
 .devserver
 dist
+umd
+esm

README.md

@@ -14,16 +14,13 @@ Requires React 16.2+, `prop-types`, and `tippy.js` if using via CDN.
 
 ## Usage
 
-Import the Tippy component and Tippy's CSS.
-
-Required: tooltip content as `props.content` and a single element child
+Required props: tooltip content as `props.content` and a single element child
 (reference) as `props.children`.
 
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import Tippy from '@tippy.js/react'
-import 'tippy.js/dist/tippy.css'
 
 const RegularTooltip = () => (
   <Tippy content="Hello">
@@ -87,8 +84,6 @@ Prop to control the `tippy.show()` / `tippy.hide()` instance methods. Use this
 when you want to programmatically show or hide the tippy instead of relying on
 UI events.
 
-⚠️ **It must be accompanied by a `"manual"` trigger prop.**
-
 ```jsx
 class App extends Component {
   state = {
@@ -97,7 +92,7 @@ class App extends Component {
 
   render() {
     return (
-      <Tippy content="test" trigger="manual" isVisible={this.state.isVisible}>
+      <Tippy content="test" isVisible={this.state.isVisible}>
         <button />
       </Tippy>
     )

demo/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Tippy from '../src/Tippy'
-import 'tippy.js/dist/tippy.css'
+import Tippy, { TippyGroup } from '../src/Tippy'
 import './index.css'
 
 Tippy.defaultProps = {
@@ -147,6 +146,25 @@ class App extends React.Component {
         <Tippy>
           <ComponentChild />
         </Tippy>
+
+        <h1>Group</h1>
+        <TippyGroup delay={1000}>
+          <Tippy>
+            <button>Text</button>
+          </Tippy>
+          <Tippy>
+            <button>Text</button>
+          </Tippy>
+        </TippyGroup>
+
+        <h1>Multiple</h1>
+        <Tippy placement="bottom" multiple>
+          <Tippy placement="left" multiple>
+            <Tippy>
+              <button>Text</button>
+            </Tippy>
+          </Tippy>
+        </Tippy>
       </main>
     )
   }