remove stopPropagation usage and rely on preventDefault to make sure either click or touchend gets triggered at a time, whichever is triggered first

Author: mohsinulhaq

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 14634,
-    "minified": 7853,
-    "gzipped": 2322
+    "bundled": 14603,
+    "minified": 7833,
+    "gzipped": 2309
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 14595,
-    "minified": 7829,
-    "gzipped": 2316,
+    "bundled": 14564,
+    "minified": 7809,
+    "gzipped": 2303,
     "treeshaked": {
       "rollup": {
         "code": 172,
         "import_statements": 152
       },
       "webpack": {
-        "code": 8537
+        "code": 8517
       }
     }
   }

README.md

@@ -237,7 +237,7 @@ Each placement can have a variation from this list:
 
 > `string` | defaults to `hover`
 
-The event that triggers the tooltip. One of `click`, `hover`, `right-click`, `focus`, `none`.
+The event that triggers the tooltip. One of `click`, `right-click`, `hover`, `focus`, and `none`.
 
 ### getTriggerRef
 
@@ -297,14 +297,12 @@ displays the tooltip itself.
 
 You use it like so:
 
-```
+```jsx
 const tooltip = (
-  <TooltipTrigger
-    tooltip={tooltip => (<div>{/* more jsx here */}</div>)}
-  >
-    {trigger => (<div>{/* more jsx here */}</div>)}
+  <TooltipTrigger tooltip={tooltip => <div>{/* more jsx here */}</div>}>
+    {trigger => <div>{/* more jsx here */}</div>}
   </TooltipTrigger>
-)
+);
 ```
 
 ### prop getters

docs/readme.mdx

@@ -84,15 +84,15 @@ _`followCursor` prop_
         tooltip="Hello, World!"
         placement="top"
       >
-        <button>Focus me!</button>
+        <input placeholder="Focus me!" style={{width: 70}} />
       </BasicTooltipTrigger>
       <BasicTooltipTrigger trigger="focus" tooltip="Hello, World!">
-        <button>Focus me too!</button>
+        <input placeholder="Focus me too!" style={{width: 70}} />
       </BasicTooltipTrigger>
     </div>
     <div style={{flex: 3, fontSize: 12, textAlign: 'center', padding: 50}}>
       Click inside this area and focus using the Tab key on desktop. On mobile,
-      just click on the buttons.
+      just click on the inputs.
     </div>
   </div>
 </Playground>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-popper-tooltip",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "React tooltip library built around react-popper",
   "homepage": "https://react-popper-tooltip.netlify.com",
   "repository": {
@@ -46,16 +46,16 @@
     "react-dom": "^16.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
+    "@babel/runtime": "^7.6.3",
     "react-popper": "^1.3.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.2",
-    "@babel/core": "^7.6.2",
+    "@babel/cli": "^7.6.3",
+    "@babel/core": "^7.6.3",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.2",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
     "@babel/preset-typescript": "^7.6.0",
     "@testing-library/react": "^9.3.0",
     "@types/jest": "^24.0.18",
@@ -76,11 +76,11 @@
     "prettier": "^1.18.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "react-hot-loader": "^4.12.14",
+    "react-hot-loader": "^4.12.15",
     "rollup": "^1.23.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.10.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.6.4"
   }
 }

src/TooltipTrigger.tsx

@@ -191,7 +191,6 @@ class TooltipTrigger extends Component<
   };
 
   private clickToggle: React.MouseEventHandler = (event: React.MouseEvent) => {
-    event.stopPropagation();
     event.preventDefault();
     const {pageX, pageY} = event;
     const action = this.props.followCursor ? 'showTooltip' : 'toggleTooltip';