react-popper-tooltip
Advanced tools
Comparing version 2.11.1 to 3.0.0-alpha.0
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
101664
5
12
1003
281
+ Added@popperjs/core@^2.4.2
+ Added@popperjs/core@2.11.8(transitive)
+ Addedreact-fast-compare@3.2.2(transitive)
+ Addedreact-popper@2.3.0(transitive)
- Removed@hypnosphi/create-react-context@0.3.1(transitive)
- Removedcall-bind@1.0.7(transitive)
- Removeddeep-equal@1.1.2(transitive)
- Removeddefine-data-property@1.1.4(transitive)
- Removeddefine-properties@1.2.1(transitive)
- Removedes-define-property@1.0.0(transitive)
- Removedes-errors@1.3.0(transitive)
- Removedfunction-bind@1.1.2(transitive)
- Removedfunctions-have-names@1.2.3(transitive)
- Removedget-intrinsic@1.2.4(transitive)
- Removedgopd@1.0.1(transitive)
- Removedgud@1.0.0(transitive)
- Removedhas-property-descriptors@1.0.2(transitive)
- Removedhas-proto@1.0.3(transitive)
- Removedhas-symbols@1.0.3(transitive)
- Removedhas-tostringtag@1.0.2(transitive)
- Removedhasown@2.0.2(transitive)
- Removedis-arguments@1.1.1(transitive)
- Removedis-date-object@1.0.5(transitive)
- Removedis-regex@1.1.4(transitive)
- Removedobject-is@1.1.6(transitive)
- Removedobject-keys@1.1.1(transitive)
- Removedpopper.js@1.16.1(transitive)
- Removedreact-popper@1.3.11(transitive)
- Removedregexp.prototype.flags@1.5.3(transitive)
- Removedset-function-length@1.2.2(transitive)
- Removedset-function-name@2.0.2(transitive)
- Removedtyped-styles@0.0.7(transitive)
Updated@babel/runtime@^7.10.2
Updatedreact-popper@^2.2.3