Fix#20

src/Popup.js

@@ -31,7 +31,7 @@ export default class Popup extends React.PureComponent {
   state = {
     isOpen: this.props.open || this.props.defaultOpen,
     modal: this.props.modal ? true : !this.props.trigger
-    // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
+    // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist
   };
 
   constructor(props) {
@@ -147,7 +147,7 @@ export default class Popup extends React.PureComponent {
         e.stopPropagation();
       }
     };
-    if (!modal && on.indexOf("hover")>=0) {
+    if (!modal && on.indexOf("hover") >= 0) {
       childrenElementProps.onMouseEnter = this.onMouseEnter;
       childrenElementProps.onMouseLeave = this.onMouseLeave;
     }
@@ -199,7 +199,7 @@ export default class Popup extends React.PureComponent {
   render() {
     const { overlayStyle, closeOnDocumentClick, on } = this.props;
     const { modal } = this.state;
-    const overlay = this.state.isOpen && !(on.indexOf("hover")>=0);
+    const overlay = this.state.isOpen && !(on.indexOf("hover") >= 0);
     const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
     return [
       this.state.isOpen && (

stories/src/Controlledpopup.js → stories/src/ControlledModal.js

@@ -1,10 +1,10 @@
 import React from "react";
 import Popup from "../../src/Popup";
 
-const ControlledPopup = () => {
+const ControlledModal = () => {
   return (
     <div>
-      <ControlledPopupClass />
+      <ControlledModalClass />
       <div style={{ zIndex: "90" }}>
         {" "}
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas
@@ -15,9 +15,9 @@ const ControlledPopup = () => {
   );
 };
 
-export default ControlledPopup;
+export default ControlledModal;
 
-class ControlledPopupClass extends React.Component {
+class ControlledModalClass extends React.Component {
   constructor(props) {
     super(props);
     this.state = { open: false };

stories/src/ControlledTooltip.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Popup from "../../src/Popup";
+
+export default class ControlledPopup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Popup
+        trigger={<button className="button">Controlled Tooltip </button>}
+        position="right center"
+        //open={this.state.open}
+        closeOnDocumentClick
+        // onClose={this.closeModal}
+      >
+        {close => (
+          <div className="modal">
+            <a className="close" onClick={close}>
+              &times; remove
+            </a>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
+            magni omnis delectus nemo, maxime molestiae dolorem numquam
+            mollitia, voluptate ea, accusamus excepturi deleniti ratione
+            sapiente! Laudantium, aperiam doloribus. Odit, aut.
+          </div>
+        )}
+      </Popup>
+    );
+  }
+}

stories/src/index.js

@@ -8,7 +8,9 @@ import PopupFuncStory from "./PopupFunc";
 import PopupInputFocusStory from "./PopupInputFocus";
 import ModalStory from "./Modal";
 import Menu from "./Menu";
-import ControlledPopup from "./Controlledpopup";
+import ControlledModal from "./ControlledModal";
+import ControlledTooltip from "./ControlledTooltip";
+
 import CellTablePopupStory from "./CellTablePopup";
 
 const storyProps = { text: "Parcel Storybook" };
@@ -33,8 +35,12 @@ export default [
     component: Centred(() => <button>Test without props</button>)
   },
   {
-    name: "Controlled Popup Component", // without props
-    component: Centred(ControlledPopup)
+    name: "Controlled Modal Component", // without props
+    component: Centred(ControlledModal)
+  },
+  {
+    name: "Controlled Tooltip Component", // without props
+    component: Centred(ControlledTooltip)
   },
   {
     name: "Menu Component", // without props