Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-popper-tooltip

Package Overview
Dependencies
Maintainers
2
Versions
74
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-popper-tooltip - npm Package Compare versions

Comparing version 2.11.1 to 3.0.0-alpha.0

66

dist/cjs/react-popper-tooltip.js

@@ -5,4 +5,2 @@ 'use strict';

var _extends = require('@babel/runtime/helpers/extends');
require('@babel/runtime/helpers/possibleConstructorReturn');
require('@babel/runtime/helpers/getPrototypeOf');
var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');

@@ -117,3 +115,3 @@ var React = require('react');

return _extends({}, props, {
style: _extends({}, props.style, {}, _this.props.arrowProps.style)
style: _extends({}, props.style, _this.props.arrowProps.style)
});

@@ -127,7 +125,7 @@ };

return _extends({}, props, {}, _this.isTriggeredBy('hover') && {
return _extends({}, props, _this.isTriggeredBy('hover') && {
onMouseEnter: callAll(_this.props.clearScheduled, props.onMouseEnter),
onMouseLeave: callAll(_this.props.hideTooltip, props.onMouseLeave)
}, {
style: _extends({}, props.style, {}, _this.props.style)
style: _extends({}, props.style, _this.props.style)
});

@@ -154,3 +152,3 @@ };

var observer = this.observer = new MutationObserver(function () {
_this2.props.scheduleUpdate();
_this2.props.update();
});

@@ -177,3 +175,3 @@ observer.observe(this.tooltipRef, this.props.mutationObserverOptions);

_proto.componentDidUpdate = function componentDidUpdate() {
if (this.props.closeOnOutOfBoundaries && this.props.outOfBoundaries) {
if (this.props.closeOnReferenceHidden && this.props.isReferenceHidden) {
this.props.hideTooltip();

@@ -234,7 +232,2 @@ }

var DEFAULT_MODIFIERS = {
preventOverflow: {
boundariesElement: 'viewport'
}
};
var DEFAULT_MUTATION_OBSERVER_CONFIG = {

@@ -348,8 +341,8 @@ childList: true,

return _extends({}, props, {}, _this.isTriggeredBy('click') && {
return _extends({}, props, _this.isTriggeredBy('click') && {
onClick: callAll(_this.clickToggle, props.onClick),
onTouchEnd: callAll(_this.clickToggle, props.onTouchEnd)
}, {}, _this.isTriggeredBy('right-click') && {
}, _this.isTriggeredBy('right-click') && {
onContextMenu: callAll(_this.contextMenuToggle, props.onContextMenu)
}, {}, _this.isTriggeredBy('hover') && _extends({
}, _this.isTriggeredBy('hover') && _extends({
onMouseEnter: callAll(_this.showTooltip, props.onMouseEnter),

@@ -359,3 +352,3 @@ onMouseLeave: callAll(_this.hideTooltip, props.onMouseLeave)

onMouseMove: callAll(_this.showTooltip, props.onMouseMove)
}), {}, _this.isTriggeredBy('focus') && {
}), _this.isTriggeredBy('focus') && {
onFocus: callAll(_this.showTooltip, props.onFocus),

@@ -385,3 +378,3 @@ onBlur: callAll(_this.hideTooltip, props.onBlur)

modifiers = _this$props.modifiers,
closeOnOutOfBoundaries = _this$props.closeOnOutOfBoundaries,
closeOnReferenceHidden = _this$props.closeOnReferenceHidden,
usePortal = _this$props.usePortal,

@@ -392,3 +385,3 @@ portalContainer = _this$props.portalContainer,

mutationObserverOptions = _this$props.mutationObserverOptions,
restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "tooltip", "placement", "trigger", "getTriggerRef", "modifiers", "closeOnOutOfBoundaries", "usePortal", "portalContainer", "followCursor", "getTooltipRef", "mutationObserverOptions"]);
restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "tooltip", "placement", "trigger", "getTriggerRef", "modifiers", "closeOnReferenceHidden", "usePortal", "portalContainer", "followCursor", "getTooltipRef", "mutationObserverOptions"]);

@@ -398,12 +391,10 @@ var popper = /*#__PURE__*/React.createElement(reactPopper.Popper, _extends({

placement: placement,
modifiers: _extends({}, DEFAULT_MODIFIERS, {}, followCursor && {
followCursorModifier: {
enabled: true,
fn: function fn(data) {
_this2.popperOffset = data.offsets.popper;
return data;
},
order: 1000
modifiers: [{
name: 'followCursor',
enabled: followCursor,
phase: 'main',
fn: function fn(data) {
_this2.popperOffset = data.state.rects.popper;
}
}, {}, modifiers)
}].concat(modifiers)
}, restProps), function (_ref3) {

@@ -414,4 +405,4 @@ var ref = _ref3.ref,

arrowProps = _ref3.arrowProps,
outOfBoundaries = _ref3.outOfBoundaries,
scheduleUpdate = _ref3.scheduleUpdate;
isReferenceHidden = _ref3.isReferenceHidden,
update = _ref3.update;

@@ -425,4 +416,4 @@ if (followCursor && _this2.popperOffset) {

height = _this2$popperOffset.height;
var x = pageX + width > window.scrollX + document.body.offsetWidth ? pageX - width : pageX;
var y = pageY + height > window.scrollY + document.body.offsetHeight ? pageY - height : pageY;
var x = pageX + width > window.pageXOffset + document.body.offsetWidth ? pageX - width : pageX;
var y = pageY + height > window.pageYOffset + document.body.offsetHeight ? pageY - height : pageY;
style.transform = "translate3d(" + x + "px, " + y + "px, 0";

@@ -433,6 +424,6 @@ }

arrowProps: arrowProps,
closeOnOutOfBoundaries: closeOnOutOfBoundaries,
outOfBoundaries: outOfBoundaries,
closeOnReferenceHidden: closeOnReferenceHidden,
isReferenceHidden: isReferenceHidden,
placement: placement,
scheduleUpdate: scheduleUpdate,
update: update,
style: style,

@@ -456,3 +447,3 @@ tooltip: tooltip,

});
}), this.getState() && (usePortal ? reactDom.createPortal(popper, portalContainer) : popper));
}), this.getState() && (usePortal ? /*#__PURE__*/reactDom.createPortal(popper, portalContainer) : popper));
};

@@ -477,3 +468,3 @@

TooltipTrigger.defaultProps = {
closeOnOutOfBoundaries: true,
closeOnReferenceHidden: true,
defaultTooltipShown: false,

@@ -488,3 +479,4 @@ delayHide: 0,

usePortal: canUseDOM(),
mutationObserverOptions: DEFAULT_MUTATION_OBSERVER_CONFIG
mutationObserverOptions: DEFAULT_MUTATION_OBSERVER_CONFIG,
modifiers: []
};

@@ -491,0 +483,0 @@

import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
import _extends from '@babel/runtime/helpers/esm/extends';
import '@babel/runtime/helpers/esm/possibleConstructorReturn';
import '@babel/runtime/helpers/esm/getPrototypeOf';
import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';

@@ -114,3 +112,3 @@ import React, { Component } from 'react';

return _extends({}, props, {
style: _extends({}, props.style, {}, _this.props.arrowProps.style)
style: _extends({}, props.style, _this.props.arrowProps.style)
});

@@ -124,7 +122,7 @@ };

return _extends({}, props, {}, _this.isTriggeredBy('hover') && {
return _extends({}, props, _this.isTriggeredBy('hover') && {
onMouseEnter: callAll(_this.props.clearScheduled, props.onMouseEnter),
onMouseLeave: callAll(_this.props.hideTooltip, props.onMouseLeave)
}, {
style: _extends({}, props.style, {}, _this.props.style)
style: _extends({}, props.style, _this.props.style)
});

@@ -151,3 +149,3 @@ };

var observer = this.observer = new MutationObserver(function () {
_this2.props.scheduleUpdate();
_this2.props.update();
});

@@ -174,3 +172,3 @@ observer.observe(this.tooltipRef, this.props.mutationObserverOptions);

_proto.componentDidUpdate = function componentDidUpdate() {
if (this.props.closeOnOutOfBoundaries && this.props.outOfBoundaries) {
if (this.props.closeOnReferenceHidden && this.props.isReferenceHidden) {
this.props.hideTooltip();

@@ -231,7 +229,2 @@ }

var DEFAULT_MODIFIERS = {
preventOverflow: {
boundariesElement: 'viewport'
}
};
var DEFAULT_MUTATION_OBSERVER_CONFIG = {

@@ -345,8 +338,8 @@ childList: true,

return _extends({}, props, {}, _this.isTriggeredBy('click') && {
return _extends({}, props, _this.isTriggeredBy('click') && {
onClick: callAll(_this.clickToggle, props.onClick),
onTouchEnd: callAll(_this.clickToggle, props.onTouchEnd)
}, {}, _this.isTriggeredBy('right-click') && {
}, _this.isTriggeredBy('right-click') && {
onContextMenu: callAll(_this.contextMenuToggle, props.onContextMenu)
}, {}, _this.isTriggeredBy('hover') && _extends({
}, _this.isTriggeredBy('hover') && _extends({
onMouseEnter: callAll(_this.showTooltip, props.onMouseEnter),

@@ -356,3 +349,3 @@ onMouseLeave: callAll(_this.hideTooltip, props.onMouseLeave)

onMouseMove: callAll(_this.showTooltip, props.onMouseMove)
}), {}, _this.isTriggeredBy('focus') && {
}), _this.isTriggeredBy('focus') && {
onFocus: callAll(_this.showTooltip, props.onFocus),

@@ -382,3 +375,3 @@ onBlur: callAll(_this.hideTooltip, props.onBlur)

modifiers = _this$props.modifiers,
closeOnOutOfBoundaries = _this$props.closeOnOutOfBoundaries,
closeOnReferenceHidden = _this$props.closeOnReferenceHidden,
usePortal = _this$props.usePortal,

@@ -389,3 +382,3 @@ portalContainer = _this$props.portalContainer,

mutationObserverOptions = _this$props.mutationObserverOptions,
restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "tooltip", "placement", "trigger", "getTriggerRef", "modifiers", "closeOnOutOfBoundaries", "usePortal", "portalContainer", "followCursor", "getTooltipRef", "mutationObserverOptions"]);
restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "tooltip", "placement", "trigger", "getTriggerRef", "modifiers", "closeOnReferenceHidden", "usePortal", "portalContainer", "followCursor", "getTooltipRef", "mutationObserverOptions"]);

@@ -395,12 +388,10 @@ var popper = /*#__PURE__*/React.createElement(Popper, _extends({

placement: placement,
modifiers: _extends({}, DEFAULT_MODIFIERS, {}, followCursor && {
followCursorModifier: {
enabled: true,
fn: function fn(data) {
_this2.popperOffset = data.offsets.popper;
return data;
},
order: 1000
modifiers: [{
name: 'followCursor',
enabled: followCursor,
phase: 'main',
fn: function fn(data) {
_this2.popperOffset = data.state.rects.popper;
}
}, {}, modifiers)
}].concat(modifiers)
}, restProps), function (_ref3) {

@@ -411,4 +402,4 @@ var ref = _ref3.ref,

arrowProps = _ref3.arrowProps,
outOfBoundaries = _ref3.outOfBoundaries,
scheduleUpdate = _ref3.scheduleUpdate;
isReferenceHidden = _ref3.isReferenceHidden,
update = _ref3.update;

@@ -422,4 +413,4 @@ if (followCursor && _this2.popperOffset) {

height = _this2$popperOffset.height;
var x = pageX + width > window.scrollX + document.body.offsetWidth ? pageX - width : pageX;
var y = pageY + height > window.scrollY + document.body.offsetHeight ? pageY - height : pageY;
var x = pageX + width > window.pageXOffset + document.body.offsetWidth ? pageX - width : pageX;
var y = pageY + height > window.pageYOffset + document.body.offsetHeight ? pageY - height : pageY;
style.transform = "translate3d(" + x + "px, " + y + "px, 0";

@@ -430,6 +421,6 @@ }

arrowProps: arrowProps,
closeOnOutOfBoundaries: closeOnOutOfBoundaries,
outOfBoundaries: outOfBoundaries,
closeOnReferenceHidden: closeOnReferenceHidden,
isReferenceHidden: isReferenceHidden,
placement: placement,
scheduleUpdate: scheduleUpdate,
update: update,
style: style,

@@ -453,3 +444,3 @@ tooltip: tooltip,

});
}), this.getState() && (usePortal ? createPortal(popper, portalContainer) : popper));
}), this.getState() && (usePortal ? /*#__PURE__*/createPortal(popper, portalContainer) : popper));
};

@@ -474,3 +465,3 @@

TooltipTrigger.defaultProps = {
closeOnOutOfBoundaries: true,
closeOnReferenceHidden: true,
defaultTooltipShown: false,

@@ -485,3 +476,4 @@ delayHide: 0,

usePortal: canUseDOM(),
mutationObserverOptions: DEFAULT_MUTATION_OBSERVER_CONFIG
mutationObserverOptions: DEFAULT_MUTATION_OBSERVER_CONFIG,
modifiers: []
};

@@ -488,0 +480,0 @@

@@ -0,1 +1,4 @@

/**
* @author Mohsin Ul Haq <mohsinulhaq01@gmail.com>
*/
import { Component } from 'react';

@@ -5,3 +8,3 @@ import { TooltipTriggerProps, TooltipTriggerState } from './types';

static defaultProps: {
closeOnOutOfBoundaries: boolean;
closeOnReferenceHidden: boolean;
defaultTooltipShown: boolean;

@@ -17,2 +20,3 @@ delayHide: number;

mutationObserverOptions: MutationObserverInit;
modifiers: never[];
};

@@ -19,0 +23,0 @@ state: TooltipTriggerState;

@@ -1,4 +0,4 @@

import PopperJS from 'popper.js';
import React from 'react';
import ReactPopper from 'react-popper';
import { Placement } from '@popperjs/core';
import { Modifier, PopperArrowProps } from 'react-popper';
export declare type TriggerTypes = 'none' | 'click' | 'right-click' | 'hover' | 'focus';

@@ -37,3 +37,3 @@ export declare type Trigger = TriggerTypes | TriggerTypes[];

tooltipRef: Ref;
placement: PopperJS.Placement;
placement: Placement;
getArrowProps(arg?: GetArrowPropsArg): GetArrowPropsArg;

@@ -44,6 +44,6 @@ getTooltipProps(arg?: GetTooltipPropsArg): GetTooltipPropsArg;

/**
* Whether to close the tooltip when it's trigger is out of the boundary
* Whether to close the tooltip when its trigger is out of boundary
* @default true
*/
closeOnOutOfBoundaries: boolean;
closeOnReferenceHidden: boolean;
/**

@@ -80,5 +80,6 @@ * Whether tooltip is shown by default

* For more information, refer to Popper.js’ modifier docs:
* @link https://popper.js.org/popper-documentation.html#modifiers
* @link https://popper.js.org/docs/v2/modifiers
* @default []
*/
modifiers?: PopperJS.Modifiers;
modifiers: Modifier<any>[];
/**

@@ -88,3 +89,3 @@ * Tooltip placement w.r.t. trigger

*/
placement: PopperJS.Placement;
placement: Placement;
/**

@@ -135,7 +136,7 @@ * Element to be used as portal container

export interface TooltipProps {
arrowProps: ReactPopper.PopperArrowProps;
closeOnOutOfBoundaries: boolean;
arrowProps: PopperArrowProps;
closeOnReferenceHidden: boolean;
innerRef: Ref;
outOfBoundaries: boolean | null;
placement: PopperJS.Placement;
isReferenceHidden?: boolean;
placement: Placement;
style: React.CSSProperties;

@@ -147,3 +148,3 @@ trigger: Trigger;

tooltip(arg: TooltipArg): React.ReactNode;
scheduleUpdate(): void;
update(): void;
}
{
"name": "react-popper-tooltip",
"version": "2.11.1",
"version": "3.0.0-alpha.0",
"description": "React tooltip library built around react-popper",
"homepage": "https://react-popper-tooltip.netlify.com",
"homepage": "https://react-popper-tooltip.netlify.app",
"repository": {

@@ -12,3 +12,2 @@ "type": "git",

"module": "dist/esm/react-popper-tooltip.js",
"style": "dist/styles.css",
"typings": "dist/index.d.ts",

@@ -18,7 +17,5 @@ "files": [

],
"sideEffects": [
"*.css"
],
"sideEffects": false,
"scripts": {
"build": "rm -rf dist && rollup -c && cp src/styles.css dist && yarn tsc && rm -rf compiled",
"build": "rm -rf dist && rollup -c && yarn tsc && rm -rf compiled",
"prepublishOnly": "yarn typecheck && yarn lint && yarn build && yarn test",

@@ -58,36 +55,37 @@ "prettier": "prettier --write src/**/*.{ts,tsx}",

"dependencies": {
"@babel/runtime": "^7.9.2",
"react-popper": "^1.3.7"
"@babel/runtime": "^7.10.2",
"@popperjs/core": "^2.4.2",
"react-popper": "^2.2.3"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@testing-library/react": "^10.0.2",
"@types/jest": "^25.1.4",
"@types/react": "^16.9.31",
"@types/react-dom": "^16.9.6",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"docz": "^2.2.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"husky": "^4.2.3",
"jest": "^25.2.4",
"lint-staged": "^10.1.1",
"prettier": "^2.0.2",
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-transform-runtime": "^7.10.1",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/preset-typescript": "^7.10.1",
"@testing-library/react": "^10.2.1",
"@types/jest": "^26.0.0",
"@types/react": "^16.9.36",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^3.2.0",
"@typescript-eslint/parser": "^3.2.0",
"docz": "^2.3.1",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"husky": "^4.2.5",
"jest": "^26.0.1",
"lint-staged": "^10.2.10",
"prettier": "^2.0.5",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"rollup": "^2.3.2",
"rollup": "^2.16.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-size-snapshot": "^0.11.0",
"typescript": "^3.8.3"
"rollup-plugin-size-snapshot": "^0.12.0",
"typescript": "^3.9.5"
}
}

@@ -8,7 +8,7 @@ # React Tooltip

React tooltip component based on [react-popper](https://github.com/FezVrasta/react-popper), the React wrapper around [popper.js](https://popper.js.org/) library.
React tooltip component based on [react-popper](https://github.com/FezVrasta/react-popper), the React wrapper around [popper.js](https://popper.js.org) library.
## Homepage
https://react-popper-tooltip.netlify.com
https://react-popper-tooltip.netlify.app

@@ -86,66 +86,2 @@ ## Example

## Quick start
If you would like our opinionated container and arrow styles for your tooltip for quick start, you may import `react-popper-tooltip/dist/styles.css`, and use the classes `tooltip-container` and `tooltip-arrow` as follows:
### Tooltip.js
```jsx
import React from 'react';
import TooltipTrigger from 'react-popper-tooltip';
import 'react-popper-tooltip/dist/styles.css';
const Tooltip = ({children, tooltip, hideArrow, ...props}) => (
<TooltipTrigger
{...props}
tooltip={({
arrowRef,
tooltipRef,
getArrowProps,
getTooltipProps,
placement
}) => (
<div
{...getTooltipProps({
ref: tooltipRef,
className: 'tooltip-container'
})}
>
{!hideArrow && (
<div
{...getArrowProps({
ref: arrowRef,
className: 'tooltip-arrow',
'data-placement': placement
})}
/>
)}
{tooltip}
</div>
)}
>
{({getTriggerProps, triggerRef}) => (
<span
{...getTriggerProps({
ref: triggerRef,
className: 'trigger'
})}
>
{children}
</span>
)}
</TooltipTrigger>
);
export default Tooltip;
```
Then you can use it as shown in the example below.
```jsx
<Tooltip placement="top" trigger="click" tooltip="Hi there!">
Click me
</Tooltip>
```
## Examples

@@ -280,15 +216,4 @@

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)
For more information, refer to Popper.js’ [modifier docs](https://popper.js.org/docs/v2/modifiers)
Default modifiers:
```
{
preventOverflow: {
boundariesElement: 'viewport'
}
}
```
### mutationObserverOptions

@@ -295,0 +220,0 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc