Add standalone version

Author: Cédric Delpoux

CHANGELOG.md

@@ -1,4 +1,8 @@
-# 2.0.0 - 2017-18-10
+# 2.1.0 - 2017-12-08
+
+* Added: Standalone version
+
+# 2.0.0 - 2017-10-18
 
 * Added: Nwb build
 * Update: Nwb build

README.md

@@ -26,16 +26,32 @@ https://unpkg.com/react-simple-tooltip/dist/react-simple-tooltip.min.js.
 
 ## Usage
 
+### Attached to a Component
+
 ```javascript
 import React from "react"
 import Tooltip from "react-simple-tooltip"
 
 const App = () =>
-  <Tooltip>
+  <Tooltip content="😎">
     <button>Hover me !</button>
   </Tooltip>
 ```
 
+### Standalone
+```javascript
+import React from "react"
+import Tooltip from "react-simple-tooltip"
+
+const App = () =>
+  <div style={{position: "relative"}}>
+    <Tooltip
+      style={{position: "absolute", top: "50%", right: "0"}}
+      content="😎"
+    />
+  </div>
+```
+
 ## Demo
 
 See [Demo page][github-page]

demo/src/routes.js

@@ -1,9 +1,16 @@
 import React from "react"
 import ReactSimpleTooltip from "../../src"
+import styled from "styled-components"
 
 import demoHtml from "./demo.md"
 import readmeHtml from "../../README.md"
 
+const Zone = styled.div`
+  background: #44b39d;
+  color: #fff;
+  padding: 10px;
+`
+
 const data = []
 
 for (let x = 1; x <= 30; x++) {
@@ -17,7 +24,7 @@ const routes = [
     demo: {
       component: (
         <ReactSimpleTooltip placement="top" content="😎" arrow={15}>
-          <button>Hover me !</button>
+          <Zone>Hover me !</Zone>
         </ReactSimpleTooltip>
       ),
       displayName: "ReactSimpleTooltip",
@@ -26,6 +33,31 @@ const routes = [
     },
     label: "Demo",
   },
+  {
+    path: "/standalone",
+    demo: {
+      component: (
+        <div
+          style={{
+            position: "relative",
+            height: "100px",
+            background: "#fff",
+            border: "1px solid #44B39D",
+          }}
+        >
+          <ReactSimpleTooltip
+            style={{position: "absolute", bottom: "0", left: "50%"}}
+            placement="bottom"
+            content="😎"
+          />
+        </div>
+      ),
+      displayName: "ReactSimpleTooltip",
+      hiddenProps: ["children"],
+      html: demoHtml,
+    },
+    label: "Standalone",
+  },
   {
     path: "/readme",
     html: readmeHtml,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-tooltip",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": {
     "name": "Cédric Delpoux",
     "email": "[email protected]"
@@ -29,7 +29,6 @@
     "test:watch": "yarn test -- --watch"
   },
   "dependencies": {
-    "prop-types": "^15.6.0",
     "styled-components": "^2.1.2"
   },
   "devDependencies": {
@@ -54,13 +53,14 @@
     "markdown-loader": "^2.0.1",
     "nwb": "^0.18.0",
     "prettier": "^1.5.3",
+    "prop-types": "^15.6.0",
     "react": "^15.6.1",
     "react-demo-page": "^0.2.2",
     "react-dom": "^15.6.1",
     "react-test-renderer": "^15.6.1"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   }
 }

src/components/Tooltip/index.js

@@ -11,28 +11,28 @@ const Top = Base.extend`
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  ${props => props.offset && `margin-bottom: ${props.offset}px;`};
+  margin-bottom: ${props => props.offset}px;
 `
 
 const Bottom = Base.extend`
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  ${props => props.offset && `margin-top: ${props.offset}px;`};
+  margin-top: ${props => props.offset}px;
 `
 
 const Left = Base.extend`
   right: 100%;
   top: 50%;
   transform: translateY(-50%);
-  ${props => props.offset && `margin-right: ${props.offset}px;`};
+  margin-right: ${props => props.offset}px;
 `
 
 const Right = Base.extend`
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
-  ${props => props.offset && `margin-left: ${props.offset}px;`};
+  margin-left: ${props => props.offset}px;
 `
 
 const tooltips = {
@@ -42,11 +42,11 @@ const tooltips = {
   bottom: Bottom,
 }
 
-const Tooltip = ({children, open, zIndex, placement, offset}) => {
+const Tooltip = ({children, offset, open, placement, zIndex}) => {
   const Component = tooltips[placement] || tooltips.top
   return (
     open && (
-      <Component open={open} zIndex={zIndex} offset={offset}>
+      <Component offset={offset} open={open} zIndex={zIndex}>
         {children}
       </Component>
     )
@@ -55,10 +55,10 @@ const Tooltip = ({children, open, zIndex, placement, offset}) => {
 
 Tooltip.propTypes = {
   children: PropTypes.any.isRequired,
+  offset: PropTypes.number,
   open: PropTypes.bool,
-  zIndex: PropTypes.number,
   placement: PropTypes.string,
-  offset: PropTypes.number,
+  zIndex: PropTypes.number,
 }
 
 export default Tooltip

src/index.js

@@ -37,51 +37,57 @@ class Wrapper extends React.Component {
       arrow,
       background,
       border,
-      color,
       children,
+      color,
+      content,
       fixed,
       fontFamily,
       fontSize,
-      content,
       padding,
       placement,
       radius,
       zIndex,
       ...props
     } = this.props
-    return (
+    const hasTrigger = children !== undefined && children !== null
+    const tooltipElement = (
+      <Tooltip
+        open={!hasTrigger || fixed ? true : open}
+        placement={placement}
+        offset={arrow}
+        zIndex={zIndex}
+      >
+        <Bubble
+          background={background}
+          border={border}
+          color={color}
+          radius={radius}
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          padding={padding}
+        >
+          <Arrow
+            width={arrow}
+            background={background}
+            border={border}
+            color={color}
+            placement={placement}
+          />
+          {content}
+        </Bubble>
+      </Tooltip>
+    )
+    return hasTrigger ? (
       <Container
         onMouseEnter={!fixed && this.handleMouseEnter}
         onMouseLeave={!fixed && this.handleMouseLeave}
         {...props}
       >
         {children}
-        <Tooltip
-          open={fixed ? true : open}
-          placement={placement}
-          offset={arrow}
-          zIndex={zIndex}
-        >
-          <Bubble
-            background={background}
-            border={border}
-            color={color}
-            radius={radius}
-            fontFamily={fontFamily}
-            fontSize={fontSize}
-            padding={padding}
-          >
-            <Arrow
-              width={arrow}
-              background={background}
-              border={border}
-              color={color}
-              placement={placement}
-            />
-            {content}
-          </Bubble>
-        </Tooltip>
+        {tooltipElement}
       </Container>
+    ) : (
+      <Container {...props}>{tooltipElement}</Container>
     )
   }
 }
@@ -90,7 +96,7 @@ Wrapper.propTypes = {
   arrow: PropTypes.number,
   background: PropTypes.string,
   border: PropTypes.string,
-  children: PropTypes.any.isRequired,
+  children: PropTypes.any,
   color: PropTypes.string,
   content: PropTypes.any.isRequired,
   fixed: PropTypes.bool,
@@ -106,6 +112,7 @@ Wrapper.defaultProps = {
   arrow: 8,
   background: "#000",
   border: "#000",
+  children: null,
   color: "#fff",
   fixed: false,
   fontFamily: "inherit",