support old browsers, api and doc changes

Author: mohsinulhaq

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Mohsin Ul Haq
+Copyright (c) 2018-present Mohsin Ul Haq <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,7 +8,7 @@ React tooltip component based on [react-popper](https://github.com/FezVrasta/rea
 React wrapper around [popper.js](https://popper.js.org/) library.
 
 ## Example
-https://codesandbox.io/s/v04l1ky2rl
+https://codesandbox.io/s/pykkz77z5j
 
 ### Usage
 
@@ -23,24 +23,51 @@ import TooltipTrigger from 'react-popper-tooltip';
 
 render(
   <TooltipTrigger
-    tooltip={({ getTooltipProps, arrowProps, arrowPlacement }) => (
-      <div className="tooltip" {...getTooltipProps()}>
+    placement="right"
+    trigger="click"
+    tooltip={({
+      getTooltipProps,
+      getArrowProps,
+      tooltipRef,
+      arrowRef,
+      placement
+    }) => (
+      <div
+        {...getTooltipProps({
+          ref: tooltipRef,
+          className: 'tooltip-container'
+          /* your props here */
+        })}
+      >
         <div
-          data-placement={arrowPlacement}
-          className="arrow"
-          {...arrowProps}
+          {...getArrowProps({
+            ref: arrowRef,
+            'data-placement': placement,
+            className: 'tooltip-arrow'
+            /* your props here */
+          })}
         />
-        {tooltip}
+        <div className="tooltip-body">Hello, World!</div>
       </div>
     )}
   >
-    {({ getTriggerProps }) => <span {...getTriggerProps()}>{children}</span>}
+    {({ getTriggerProps, triggerRef }) => (
+      <div
+        {...getTriggerProps({
+          ref: triggerRef,
+          className: 'trigger'
+          /* your props here */
+        })}
+      >
+        Click Me!
+      </div>
+    )}
   </TooltipTrigger>,
   document.getElementById('root')
 );
 ```
 
-`TooltipTrigger` is the only component exposed by the package. It's just a positioning engine. What to render is left completely to the user, which can be provided using render props.
+`TooltipTrigger` is the only component exposed by the package. It's just a positioning engine. What to render is left completely to the user, which can be provided using render props. Your props should be passed through `getTriggerProps`, `getTooltipProps` and `getArrowProps`.
 
 Read more about [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) pattern if you're not familiar with this approach.
 
@@ -52,25 +79,46 @@ If you would like our opinionated container and arrow styles for your tooltip fo
 
 ```jsx
 import React from 'react';
-import TooltipTrigger from "react-popper-tooltip";
+import TooltipTrigger from 'react-popper-tooltip';
 import 'react-popper-tooltip/dist/styles.css';
 
 const Tooltip = ({ tooltip, children, ...props }) => (
   <TooltipTrigger
     {...props}
-    tooltip={({ getTooltipProps, tooltipRef, arrowStyle, arrowRef, arrowPlacement }) => (
-      <div className="tooltip-container" ref={tooltipRef} {...getTooltipProps()}>
+    tooltip={({
+      getTooltipProps,
+      getArrowProps,
+      tooltipRef,
+      arrowRef,
+      placement
+    }) => (
+      <div
+        {...getTooltipProps({
+          ref: tooltipRef,
+          className: 'tooltip-container'
+        })}
+      >
         <div
-          className="tooltip-arrow"
-          ref={arrowRef}
-          style={arrowStyle}
-          data-placement={arrowPlacement}
+          {...getArrowProps({
+            ref: arrowRef,
+            'data-placement': placement,
+            className: 'tooltip-arrow'
+          })}
         />
         {tooltip}
       </div>
     )}
   >
-    {({ getTriggerProps, triggerRef }) => <span ref={triggerRef} {...getTriggerProps()}>{children}</span>}
+    {({ getTriggerProps, triggerRef }) => (
+      <span
+        {...getTriggerProps({
+          ref: triggerRef,
+          className: 'trigger'
+        })}
+      >
+        {children}
+      </span>
+    )}
   </TooltipTrigger>
 );
 
@@ -80,7 +128,7 @@ export default Tooltip;
 Then you can use it as shown in the example below. 
 
 ```jsx
-<Tooltip tooltip="Hi there!" placement="top" trigger="click">Click me</Tooltip>
+<Tooltip placement="top" trigger="click" tooltip="Hi there!">Click me</Tooltip>
 ```
 
 ## Props
@@ -211,20 +259,20 @@ yourself to avoid your props being overridden (or overriding the props returned)
 ### children function
 
 | property        | type           | description                                                           |
-|-----------------|----------------|-----------------------------------------------------------------------|
+| --------------- | -------------- | --------------------------------------------------------------------- |
 | getTriggerProps | `function({})` | returns the props you should apply to the trigger element you render. |
 | triggerRef      | `node`         | returns the react ref you should apply to the trigger element.        |
 
 
 ### tooltip function
 
-| property        | type           | description                                                           |
-|-----------------|----------------|-----------------------------------------------------------------------|
-| getTooltipProps | `function({})` | returns the props you should apply to the tooltip element you render. |
-| tooltipRef      | `node`         | return the react ref you should apply to the tooltip element.         |
-| arrowStyle      | `object`       | return the styles you should apply to the tooltip arrow style attr.   |
-| arrowRef        | `node`         | return the react ref you should apply to the tooltip arrow you render.|
-| placement       | `string`       | return the placement of the tooltip arrow element.                    |
+| property        | type           | description                                                            |
+| --------------- | -------------- | ---------------------------------------------------------------------- |
+| getTooltipProps | `function({})` | returns the props you should apply to the tooltip element you render.  |
+| tooltipRef      | `node`         | return the react ref you should apply to the tooltip element.          |
+| arrowStyle      | `object`       | return the styles you should apply to the tooltip arrow style attr.    |
+| arrowRef        | `node`         | return the react ref you should apply to the tooltip arrow you render. |
+| placement       | `string`       | return the placement of the tooltip arrow element.                     |
 
 ## Inspiration and Thanks!
 

babel.config.js

@@ -2,12 +2,6 @@ const presets = [
   [
     '@babel/env',
     {
-      targets: {
-        edge: '17',
-        firefox: '60',
-        chrome: '67',
-        safari: '11.1'
-      },
       useBuiltIns: 'usage'
     }
   ],

package.json

@@ -8,9 +8,12 @@
     "url": "https://github.com/mohsinulhaq/react-popper-tooltip"
   },
   "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "clean": "rimraf dist/",
-    "prepare": "npm run clean && babel src -d dist -s && cp src/styles.css dist"
+    "clean": "rimraf dist",
+    "prepare": "npm run clean && babel src -d dist && cp src/styles.css dist"
   },
   "keywords": [
     "react",
@@ -23,14 +26,11 @@
   "author": "Mohsin Ul Haq <[email protected]>",
   "license": "MIT",
   "browserslist": [
-    "last 2 Chrome versions",
-    "last 2 Firefox versions",
-    "last 1 Edge version",
-    "last 1 Safari version"
+    "defaults"
   ],
   "peerDependencies": {
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "dependencies": {
     "react-popper": "^1.0.2"

src/Tooltip.js

@@ -83,6 +83,11 @@ export default class Tooltip extends PureComponent {
     }
   }
 
+  getArrowProps = (props = {}) => ({
+    ...props,
+    style: { ...props.style, ...this.props.arrowProps.style }
+  });
+
   getTooltipProps = (props = {}) => {
     const isHoverTriggered = this.props.trigger === 'hover';
 
@@ -113,10 +118,10 @@ export default class Tooltip extends PureComponent {
       >
         {tooltip({
           getTooltipProps: this.getTooltipProps,
+          getArrowProps: this.getArrowProps,
           tooltipRef: innerRef,
-          arrowStyle: arrowProps.style,
           arrowRef: arrowProps.ref,
-          arrowPlacement: placement
+          placement
         })}
       </TooltipContext.Provider>
     );

src/TooltipTrigger.js

@@ -5,8 +5,8 @@ import React, { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 import T from 'prop-types';
 import { Manager, Reference, Popper } from 'react-popper';
-import { callAll } from './utils';
 import Tooltip from './Tooltip';
+import { callAll } from './utils';
 
 const DEFAULT_MODIFIERS = {
   preventOverflow: {
@@ -185,9 +185,9 @@ export default class TooltipTrigger extends PureComponent {
                 ref,
                 style,
                 placement,
+                arrowProps,
                 outOfBoundaries,
-                scheduleUpdate,
-                arrowProps
+                scheduleUpdate
               }) => (
                 <TooltipContext.Consumer>
                   {({