react-popper-tooltip - npm Package Compare versions

Comparing version 2.3.4 to 2.4.0

lib/cjs/Tooltip.js

@@ -94,3 +94,3 @@ "use strict";
         onMouseEnter: (0, _utils.callAll)(isHoverTriggered && _this.props.clearScheduled, props.onMouseEnter),
-        onMouseLeave: (0, _utils.callAll)(isHoverTriggered && _this.props.scheduleHide, props.onMouseLeave)
+        onMouseLeave: (0, _utils.callAll)(isHoverTriggered && _this.props.hideTooltip, props.onMouseLeave)
       });
@@ -172,3 +172,2 @@ });
   clearScheduled: _propTypes.default.func,
-  scheduleHide: _propTypes.default.func,
   tooltip: _propTypes.default.func,
@@ -175,0 +174,0 @@ hideTooltip: _propTypes.default.func,

lib/cjs/TooltipTrigger.js

@@ -76,4 +76,17 @@ "use strict";
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
-      tooltipShown: _this.props.defaultTooltipShown
+      tooltipShown: _this._isControlled() ? false : _this.props.defaultTooltipShown
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "_setTooltipState", function (state) {
+      var cb = function cb() {
+        return _this.props.onVisibilityChange(state);
+      };
+
+      if (_this._isControlled()) {
+        cb();
+      } else {
+        _this.setState({
+          tooltipShown: state
+        }, cb);
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "_clearScheduled", function () {
@@ -83,44 +96,29 @@ clearTimeout(_this._hideTimeout);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "showTooltip", function () {
-      _this._clearScheduled();
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "_showTooltip", function () {
+      var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.delayShow;
 
-      _this.setState({
-        tooltipShown: true
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "hideTooltip", function () {
       _this._clearScheduled();
 
-      _this.setState({
-        tooltipShown: false
-      });
+      _this._showTimeout = setTimeout(function () {
+        return _this._setTooltipState(true);
+      }, delay);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleTooltip", function () {
-      _this._clearScheduled();
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "_hideTooltip", function () {
+      var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.delayHide;
 
-      _this.setState(function (prevState) {
-        return {
-          tooltipShown: !prevState.tooltipShown
-        };
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "scheduleShow", function () {
       _this._clearScheduled();
 
-      _this._showTimeout = setTimeout(_this.showTooltip, _this.props.delayShow);
+      _this._hideTimeout = setTimeout(function () {
+        return _this._setTooltipState(false);
+      }, delay);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "scheduleHide", function () {
-      _this._clearScheduled();
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "_toggleTooltip", function (delay) {
+      var action = _this._getState() ? '_hideTooltip' : '_showTooltip';
 
-      _this._hideTimeout = setTimeout(_this.hideTooltip, _this.props.delayHide);
+      _this[action](delay);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "scheduleToggle", function () {
-      var action = _this.state.tooltipShown ? 'scheduleHide' : 'scheduleShow';
-
-      _this[action]();
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "_contextMenuToggle", function (event) {
       event.preventDefault();
 
-      _this.scheduleToggle();
+      _this._toggleTooltip();
     });
@@ -133,6 +131,6 @@ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "getTriggerProps", function () {
       return (0, _objectSpread2.default)({}, props, {
-        onClick: (0, _utils.callAll)(isClickTriggered && _this.scheduleToggle, props.onClick),
+        onClick: (0, _utils.callAll)(isClickTriggered && _this._toggleTooltip, props.onClick),
         onContextMenu: (0, _utils.callAll)(isRightClickTriggered && _this._contextMenuToggle, props.onContextMenu),
-        onMouseEnter: (0, _utils.callAll)(isHoverTriggered && _this.scheduleShow, props.onMouseEnter),
-        onMouseLeave: (0, _utils.callAll)(isHoverTriggered && _this.scheduleHide, props.onMouseLeave)
+        onMouseEnter: (0, _utils.callAll)(isHoverTriggered && _this._showTooltip, props.onMouseEnter),
+        onMouseLeave: (0, _utils.callAll)(isHoverTriggered && _this._hideTooltip, props.onMouseLeave)
       });
@@ -144,2 +142,12 @@ });
   (0, _createClass2.default)(TooltipTrigger, [{
+    key: "_isControlled",
+    value: function _isControlled() {
+      return this.props.tooltipShown !== undefined;
+    }
+  }, {
+    key: "_getState",
+    value: function _getState() {
+      return this._isControlled() ? this.props.tooltipShown : this.state.tooltipShown;
+    }
+  }, {
     key: "componentWillUnmount",
@@ -167,3 +175,3 @@ value: function componentWillUnmount() {
         });
-      }), this.state.tooltipShown && (0, _reactDom.createPortal)(_react.default.createElement(_reactPopper.Popper, {
+      }), this._getState() && (0, _reactDom.createPortal)(_react.default.createElement(_reactPopper.Popper, {
         placement: placement,
@@ -196,5 +204,4 @@ modifiers: (0, _objectSpread2.default)({}, DEFAULT_MODIFIERS, modifiers)
             innerRef: ref,
-            hideTooltip: _this2.hideTooltip,
-            clearScheduled: _this2._clearScheduled,
-            scheduleHide: _this2.scheduleHide
+            hideTooltip: _this2._hideTooltip,
+            clearScheduled: _this2._clearScheduled
           }));
@@ -204,10 +211,2 @@ });
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props) {
-      var tooltipShown = props.tooltipShown;
-      return tooltipShown != null ? {
-        tooltipShown: tooltipShown
-      } : null;
-    }
   }]);
@@ -240,2 +239,7 @@ return TooltipTrigger;
   /**
+   * сalled when the visibility of the tooltip changes
+   */
+  onVisibilityChange: _propTypes.default.func,
+
+  /**
    * delay in showing the tooltip
@@ -286,3 +290,4 @@ */
   trigger: 'hover',
-  closeOnOutOfBoundaries: true
+  closeOnOutOfBoundaries: true,
+  onVisibilityChange: _utils.noop
 });

lib/cjs/utils.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.callAll = void 0;
+exports.noop = exports.callAll = void 0;
 
@@ -31,2 +31,6 @@ require("core-js/modules/web.dom.iterable");
 
-exports.callAll = callAll;
+exports.callAll = callAll;
+
+var noop = function noop() {};
+
+exports.noop = noop;

lib/esm/Tooltip.js

@@ -73,3 +73,3 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
         onMouseEnter: callAll(isHoverTriggered && _this.props.clearScheduled, props.onMouseEnter),
-        onMouseLeave: callAll(isHoverTriggered && _this.props.scheduleHide, props.onMouseLeave)
+        onMouseLeave: callAll(isHoverTriggered && _this.props.hideTooltip, props.onMouseLeave)
       });
@@ -152,3 +152,2 @@ });
   clearScheduled: T.func,
-  scheduleHide: T.func,
   tooltip: T.func,
@@ -155,0 +154,0 @@ hideTooltip: T.func,

lib/esm/TooltipTrigger.js

@@ -19,3 +19,3 @@ import "core-js/modules/es6.object.assign";
 import Tooltip from './Tooltip';
-import { callAll } from './utils';
+import { callAll, noop } from './utils';
 var DEFAULT_MODIFIERS = {
@@ -48,5 +48,19 @@ preventOverflow: {
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
-      tooltipShown: _this.props.defaultTooltipShown
+      tooltipShown: _this._isControlled() ? false : _this.props.defaultTooltipShown
     });
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_setTooltipState", function (state) {
+      var cb = function cb() {
+        return _this.props.onVisibilityChange(state);
+      };
+
+      if (_this._isControlled()) {
+        cb();
+      } else {
+        _this.setState({
+          tooltipShown: state
+        }, cb);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_clearScheduled", function () {
@@ -57,50 +71,32 @@ clearTimeout(_this._hideTimeout);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "showTooltip", function () {
-      _this._clearScheduled();
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_showTooltip", function () {
+      var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.delayShow;
 
-      _this.setState({
-        tooltipShown: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hideTooltip", function () {
       _this._clearScheduled();
 
-      _this.setState({
-        tooltipShown: false
-      });
+      _this._showTimeout = setTimeout(function () {
+        return _this._setTooltipState(true);
+      }, delay);
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleTooltip", function () {
-      _this._clearScheduled();
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_hideTooltip", function () {
+      var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.delayHide;
 
-      _this.setState(function (prevState) {
-        return {
-          tooltipShown: !prevState.tooltipShown
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scheduleShow", function () {
       _this._clearScheduled();
 
-      _this._showTimeout = setTimeout(_this.showTooltip, _this.props.delayShow);
+      _this._hideTimeout = setTimeout(function () {
+        return _this._setTooltipState(false);
+      }, delay);
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scheduleHide", function () {
-      _this._clearScheduled();
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleTooltip", function (delay) {
+      var action = _this._getState() ? '_hideTooltip' : '_showTooltip';
 
-      _this._hideTimeout = setTimeout(_this.hideTooltip, _this.props.delayHide);
+      _this[action](delay);
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scheduleToggle", function () {
-      var action = _this.state.tooltipShown ? 'scheduleHide' : 'scheduleShow';
-
-      _this[action]();
-    });
-
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_contextMenuToggle", function (event) {
       event.preventDefault();
 
-      _this.scheduleToggle();
+      _this._toggleTooltip();
     });
@@ -114,6 +110,6 @@
       return _objectSpread({}, props, {
-        onClick: callAll(isClickTriggered && _this.scheduleToggle, props.onClick),
+        onClick: callAll(isClickTriggered && _this._toggleTooltip, props.onClick),
         onContextMenu: callAll(isRightClickTriggered && _this._contextMenuToggle, props.onContextMenu),
-        onMouseEnter: callAll(isHoverTriggered && _this.scheduleShow, props.onMouseEnter),
-        onMouseLeave: callAll(isHoverTriggered && _this.scheduleHide, props.onMouseLeave)
+        onMouseEnter: callAll(isHoverTriggered && _this._showTooltip, props.onMouseEnter),
+        onMouseLeave: callAll(isHoverTriggered && _this._hideTooltip, props.onMouseLeave)
       });
@@ -126,2 +122,12 @@ });
   _createClass(TooltipTrigger, [{
+    key: "_isControlled",
+    value: function _isControlled() {
+      return this.props.tooltipShown !== undefined;
+    }
+  }, {
+    key: "_getState",
+    value: function _getState() {
+      return this._isControlled() ? this.props.tooltipShown : this.state.tooltipShown;
+    }
+  }, {
     key: "componentWillUnmount",
@@ -149,3 +155,3 @@ value: function componentWillUnmount() {
         });
-      }), this.state.tooltipShown && createPortal(React.createElement(Popper, {
+      }), this._getState() && createPortal(React.createElement(Popper, {
         placement: placement,
@@ -178,5 +184,4 @@ modifiers: _objectSpread({}, DEFAULT_MODIFIERS, modifiers)
             innerRef: ref,
-            hideTooltip: _this2.hideTooltip,
-            clearScheduled: _this2._clearScheduled,
-            scheduleHide: _this2.scheduleHide
+            hideTooltip: _this2._hideTooltip,
+            clearScheduled: _this2._clearScheduled
           }));
@@ -186,10 +191,2 @@ });
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props) {
-      var tooltipShown = props.tooltipShown;
-      return tooltipShown != null ? {
-        tooltipShown: tooltipShown
-      } : null;
-    }
   }]);
@@ -222,2 +219,7 @@
   /**
+   * сalled when the visibility of the tooltip changes
+   */
+  onVisibilityChange: T.func,
+
+  /**
    * delay in showing the tooltip
@@ -269,5 +271,6 @@ */
   trigger: 'hover',
-  closeOnOutOfBoundaries: true
+  closeOnOutOfBoundaries: true,
+  onVisibilityChange: noop
 });
 
 export { TooltipTrigger as default };

lib/esm/utils.js

@@ -17,2 +17,3 @@ import "core-js/modules/web.dom.iterable";
   };
-};
+};
+export var noop = function noop() {};

package.json

 {
   "name": "react-popper-tooltip",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "React tooltip library built around react-popper",
-  "homepage": "https://github.com/mohsinulhaq/react-popper-tooltip",
+  "homepage": "https://mohsinulhaq.github.io/react-popper-tooltip",
   "repository": {
@@ -19,6 +19,9 @@ "type": "git",
   "scripts": {
-    "build": "npm run build:cjs && npm run build:esm && cp src/styles.css dist",
+    "build": "yarn build:cjs; yarn build:esm; mkdir -p dist && cp src/styles.css dist",
     "build:cjs": "babel --delete-dir-on-start src -d lib/cjs",
     "build:esm": "babel --delete-dir-on-start --env-name esm src -d lib/esm",
-    "prepare": "npm run build"
+    "prepare": "yarn build && yarn docs:deploy",
+    "docs": "docz dev",
+    "docs:build": "docz build",
+    "docs:deploy": "yarn docs:build && cp .docz/dist/index.html .docz/dist/404.html && gh-pages -d .docz/dist"
   },
@@ -38,2 +41,5 @@ "keywords": [
   ],
+  "prettier": {
+    "singleQuote": true
+  },
   "peerDependencies": {
@@ -54,4 +60,9 @@ "react": "^16.3.0",
     "@babel/preset-react": "^7.0.0",
-    "prop-types": "^15.6.2"
+    "docz": "^0.11.2",
+    "docz-plugin-css": "^0.11.0",
+    "gh-pages": "^2.0.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
   }
 }

README.md

@@ -10,2 +10,5 @@ # React Tooltip
 
+## Homepage
+https://mohsinulhaq.github.io/react-popper-tooltip
+
 ## Example
@@ -19,2 +22,6 @@ https://codesandbox.io/s/pykkz77z5j
 ```
+or
+```
+yarn add react-popper-tooltip
+```
 
@@ -52,3 +59,3 @@ ```jsx
         />
-        <div className="tooltip-body">Hello, World!</div>
+        Hello, World!
       </div>
@@ -137,2 +144,15 @@ )}
 
+## Examples
+To fiddle with our example recipes, run:
+```
+> npm install
+> npm run docs
+```
+or
+```
+> yarn
+> yarn docs
+```
+and  open up [localhost:3000](http://localhost:3000) in your browser.
+
 ## Props
@@ -161,2 +181,8 @@
 
+### onVisibilityChange
+
+> `function(tooltipShown: boolean)`
+
+Called with the tooltip state, when the visibility of the tooltip changes
+
 ### tooltipShown
@@ -168,4 +194,6 @@
 
-Package manages its own state internally. You can use this prop to pass the visibility state of the
-tooltip from the outside.
+`react-popper-tooltip` manages its own state internally. You can use this prop to pass the 
+visibility state of the tooltip from the outside. You will be required to keep this state up to 
+date (this is where `onVisibilityChange` becomes useful), but you can also control the state 
+from anywhere, be that state from other components, `redux`, `react-router`, or anywhere else.
 
@@ -230,11 +258,2 @@ ### delayShow
 
-You also have the ability to attach ref to the `TooltipTrigger` component which exposes following 
-methods for programmatic control of the tooltip:
-- `showTooltip` (show immediately)
-- `hideTooltip` (hide immediately)
-- `toggleTooltip` (toggle immediately)
-- `scheduleShow` (show respecting delayShow prop)
-- `scheduleHide` (hide respecting delayHide prop)
-- `scheduleToggle` (toggle respecting delayShow and delayHide props)
-
 ## Children and tooltip functions
@@ -282,4 +301,4 @@
 | getArrowProps   | `function({})` | return the props you should apply to the tooltip arrow element.        |
-| 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.                     |
+| arrowRef        | `node`         | return the react ref you should apply to the tooltip arrow element.    |
+| placement       | `string`       | return the placement of the tooltip.                                   |
 
@@ -286,0 +305,0 @@ ## Inspiration and Thanks!

typings/react-popper-tooltip.d.ts

@@ -1,2 +0,2 @@
-// Type definitions for react-popper-tooltip > v2.0.1
+// Type definitions for react-popper-tooltip > v2.4.0
 // Project: https://github.com/mohsinulhaq/react-popper-tooltip
@@ -9,36 +9,28 @@ // Definitions by Johan Brook <https://github.com/brookback>
 
-  type GetTriggerProps = (
-    props?: {
-      onClick?: (evt: React.SyntheticEvent) => void;
-      onContextMenu?: (evt: React.SyntheticEvent) => void;
-      onMouseEnter?: (evt: React.SyntheticEvent) => void;
-      onMouseLeave?: (evt: React.SyntheticEvent) => void;
-      [key: string]: any;
-    }
-  ) => {
-    onClick: (evt: React.SyntheticEvent) => void;
-    onContextMenu: (evt: React.SyntheticEvent) => void;
-    onMouseEnter: (evt: React.SyntheticEvent) => void;
-    onMouseLeave: (evt: React.SyntheticEvent) => void;
-    [key: string]: any;
-  };
+  /**
+   * 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.
+   */
+  export default class TooltipTrigger extends React.PureComponent<Props, {}> {}
 
-  export default class TooltipTrigger extends React.PureComponent<Props, {}> {
-    showTooltip(): void;
-
-    hideTooltip(): void;
-
-    toggleTooltip(): void;
-
-    scheduleShow(): void;
-
-    scheduleHide(): void;
-
-    scheduleToggle(): void;
-
-    getTriggerProps: GetTriggerProps;
-  }
-
   interface ChildProps {
-    getTriggerProps: GetTriggerProps;
+    /** Returns the props you should apply to the trigger element you render. */
+    getTriggerProps: (
+      props?: {
+        onClick?: (evt: React.SyntheticEvent) => void;
+        onContextMenu?: (evt: React.SyntheticEvent) => void;
+        onMouseEnter?: (evt: React.SyntheticEvent) => void;
+        onMouseLeave?: (evt: React.SyntheticEvent) => void;
+        [key: string]: any;
+      }
+    ) => {
+      onClick: (evt: React.SyntheticEvent) => void;
+      onContextMenu: (evt: React.SyntheticEvent) => void;
+      onMouseEnter: (evt: React.SyntheticEvent) => void;
+      onMouseLeave: (evt: React.SyntheticEvent) => void;
+      [key: string]: any;
+    };
+    /** Returns the react ref you should apply to the trigger element. */
     triggerRef: React.RefObject<any>;
@@ -48,2 +40,3 @@ }
   interface TooltipProps {
+    /** Returns the props you should apply to the tooltip element you render. */
     getTooltipProps: (
@@ -62,8 +55,16 @@ props?: {
     };
+    /** Returns the react ref you should apply to the tooltip element. */
     tooltipRef: React.RefObject<any>;
-    getArrowProps: (props: any) => {
+    /** Returns the props you should apply to the tooltip arrow element. */
+    getArrowProps: (props?: any) => {
       style: React.CSSProperties;
       [key: string]: any;
     };
+    /** Returns the react ref you should apply to the tooltip arrow element. */
     arrowRef: React.RefObject<any>;
+    /**
+     * Returns the placement of the tooltip.
+     *
+     * @see https://popper.js.org/popper-documentation.html#Popper.placements
+     */
     placement: Popper.Placement;
@@ -73,13 +74,55 @@ }
   export interface Props {
+    /** The tooltip child. */
     tooltip: (props: TooltipProps) => JSX.Element;
+    /** The trigger child. */
     children: (props: ChildProps) => JSX.Element;
+    /** The initial visibility state of the tooltip. */
     defaultTooltipShown?: boolean;
+    /**
+     * Use this prop if you want to control the visibility state of the tooltip.
+     *
+     * React-popper-tooltip manages its own state internally. You can use this prop to
+     * pass the visibility state of the tooltip from the outside. You will be required to
+     * keep this state up to date (this is where onVisibilityChange becomes useful), but
+     * you can also control the state from anywhere, be that state from other components,
+     * redux, react-router, or anywhere else. */
     tooltipShown?: boolean;
+    /** Called when the visibility of the tooltip changes.
+     * `tooltipShown` is a new state. */
+    onVisibilityChange: (tooltipShown: boolean) => void;
+    /** Delay in showing the tooltip (ms). Defaults to 0. */
     delayShow?: number;
+    /** Delay in hiding the tooltip (ms). Defaults to 0. */
     delayHide?: number;
+    /**
+     * The event that triggers the tooltip. One of click, hover, right-click, none.
+     * Defaults to hover.
+     */
     trigger?: 'click' | 'hover' | 'right-click' | 'none';
+    /** Whether to close the tooltip when it's trigger is out of the boundary.
+     * Defaults to true.
+     */
     closeOnOutOfBoundaries?: boolean;
+    /**
+     * Modifiers passed directly to the underlying popper.js instance. For more
+     * information, refer to Popper.js’ [modifier docs](https://popper.js.org/popper-documentation.html#modifiers).
+     *
+     * Default modifiers:
+     ```
+     {
+        preventOverflow: {
+          boundariesElement: 'viewport',
+          padding: 0
+        }
+      }
+    ```
+    */
     modifiers?: Popper.Modifiers;
+    /**
+     * The tooltip placement.
+     *
+     * @see https://popper.js.org/popper-documentation.html#Popper.placements
+     */
     placement?: Popper.Placement;
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52164

increased by6.42%

Lines of code

1018

increased by6.15%

Number of lines in readme file

304

increased by6.67%

Worsened metrics

Dev dependency count

12

increased by71.43%

Number of low quality alerts

1

increased byInfinity%

No dependency changes