react-tooltip
Advanced tools
Comparing version 4.2.21 to 4.5.1
@@ -33,2 +33,4 @@ import * as React from 'react'; | ||
border?: boolean; | ||
// A custom class name to use for the border | ||
borderClass?: string; | ||
// Popup text color | ||
@@ -61,6 +63,6 @@ textColor?: string; | ||
// Custom event to trigger tooltip | ||
event?: string; | ||
event?: keyof HTMLElementEventMap | string; | ||
// Custom event to hide tooltip | ||
// (this requires the event prop as well) | ||
eventOff?: string; | ||
eventOff?: keyof HTMLElementEventMap | string; | ||
// When set to true, custom event's propagation | ||
@@ -70,3 +72,3 @@ // mode will be captue | ||
// Global event to hide tooltip | ||
globalEventOff?: string; | ||
globalEventOff?: keyof HTMLElementEventMap | string; | ||
// Function to dynamically generate the tooltip content | ||
@@ -80,3 +82,3 @@ getContent?: GetContent; | ||
overridePosition?: ( | ||
position: { left: number; top: number; }, | ||
position: { left: number; top: number }, | ||
currentEvent: Event, | ||
@@ -90,4 +92,4 @@ currentTarget: EventTarget, | ||
effect: Effect, | ||
offset: Offset, | ||
) => ({ left: number; top: number; }); | ||
offset: Offset | ||
) => { left: number; top: number }; | ||
// Manually disable the tooltip behavior | ||
@@ -102,3 +104,3 @@ disable?: boolean; | ||
// The tooltip parent component; | ||
// default = 'div' | ||
// default = 'div' | ||
wrapper?: 'div' | 'span'; | ||
@@ -115,10 +117,15 @@ // Listen to body events vs. individual events | ||
role?: string; | ||
// Padding attribute | ||
padding?: string; | ||
// Set internal style as optional | ||
disableInternalStyle?: boolean; | ||
} | ||
// ReactTooltip component is the default export | ||
// You can overview demo examples here: https://bddeu.csb.app | ||
export default class ReactTooltip extends React.Component<TooltipProps> { | ||
// static methods | ||
static show: (target: Element) => {}; | ||
static hide: (target?: Element) => {}; | ||
static rebuild: () => {}; | ||
static show: (target: Element) => {}; | ||
static hide: (target?: Element) => {}; | ||
static rebuild: () => {}; | ||
} |
164
package.json
{ | ||
"name": "react-tooltip", | ||
"version": "4.2.21", | ||
"version": "4.5.1", | ||
"description": "react tooltip component", | ||
"private": false, | ||
"main": "dist/index.js", | ||
@@ -13,2 +14,3 @@ "types": "dist/react-tooltip.d.ts", | ||
"scripts": { | ||
"test": "npm-run-all test:unit", | ||
"pretest": "npm-run-all pretty:quick lint:staged", | ||
@@ -25,6 +27,7 @@ "eslint:fix": "./node_modules/.bin/eslint . --ignore-path ./.eslintignore --fix", | ||
"gh-pages": "gh-pages -d example", | ||
"github-changes": "github-changes -o wwayne -r react-tooltip -a --only-pulls --use-commit-body", | ||
"github-changes": "github-changes -o ReactTooltip -r react-tooltip -a --only-pulls --use-commit-body", | ||
"copy:types": "cpy ./react-tooltip.d.ts ./dist --parents --dot", | ||
"cm": "git cz", | ||
"semantic-release": "semantic-release" | ||
"semantic-release": "semantic-release", | ||
"prepare": "husky install" | ||
}, | ||
@@ -36,6 +39,3 @@ "config": { | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/wwayne/react-tooltip" | ||
}, | ||
"repository": "https://github.com/ReactTooltip/react-tooltip", | ||
"keywords": [ | ||
@@ -47,8 +47,8 @@ "react", | ||
], | ||
"author": "wwayne", | ||
"author": "ReactTooltip", | ||
"license": "MIT", | ||
"bugs": { | ||
"url": "https://github.com/wwayne/react-tooltip/issues" | ||
"url": "https://github.com/ReactTooltip/react-tooltip/issues" | ||
}, | ||
"homepage": "https://github.com/wwayne/react-tooltip#readme", | ||
"homepage": "https://github.com/ReactTooltip/react-tooltip#readme", | ||
"browserify-shim": { | ||
@@ -63,86 +63,90 @@ "react": "global:React", | ||
"dependencies": { | ||
"prop-types": "^15.7.2", | ||
"prop-types": "^15.8.1", | ||
"uuid": "^7.0.3" | ||
}, | ||
"devDependencies": { | ||
"@babel/cli": "^7.7.4", | ||
"@babel/core": "^7.7.4", | ||
"@babel/plugin-proposal-class-properties": "^7.8.3", | ||
"@babel/plugin-proposal-decorators": "^7.8.3", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.0.0", | ||
"@babel/plugin-syntax-import-meta": "^7.8.3", | ||
"@babel/register": "^7.8.3", | ||
"@commitlint/cli": "^8.3.5", | ||
"@commitlint/config-conventional": "^8.2.0", | ||
"@commitlint/travis-cli": "^8.3.5", | ||
"@rollup/plugin-commonjs": "^11.0.2", | ||
"@rollup/plugin-node-resolve": "^7.1.1", | ||
"@semantic-release/changelog": "^5.0.0", | ||
"@semantic-release/commit-analyzer": "^8.0.1", | ||
"@semantic-release/git": "^9.0.0", | ||
"@semantic-release/npm": "^7.0.5", | ||
"@semantic-release/release-notes-generator": "^9.0.1", | ||
"@svgr/rollup": "^4.3.3", | ||
"@testing-library/react": "^11.0.4", | ||
"babel-eslint": "^4.1.1", | ||
"babel-loader": "v8.0.0-beta.0", | ||
"babelify": "^9.0.0", | ||
"browserify": "^13.0.0", | ||
"browserify-shim": "^3.8.12", | ||
"chai": "^4.2.0", | ||
"@babel/cli": "7.19.3", | ||
"@babel/core": "7.19.3", | ||
"@babel/eslint-parser": "7.19.1", | ||
"@babel/plugin-proposal-class-properties": "^7.18.6", | ||
"@babel/plugin-proposal-decorators": "7.19.3", | ||
"@babel/plugin-proposal-json-strings": "^7.18.6", | ||
"@babel/plugin-proposal-object-rest-spread": "7.19.4", | ||
"@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
"@babel/plugin-syntax-import-meta": "^7.10.4", | ||
"@babel/preset-env": "^7.19.4", | ||
"@babel/preset-react": "^7.18.6", | ||
"@babel/register": "^7.18.9", | ||
"@commitlint/cli": "17.1.2", | ||
"@commitlint/config-conventional": "17.1.0", | ||
"@commitlint/travis-cli": "17.1.2", | ||
"@rollup/plugin-commonjs": "23.0.0", | ||
"@rollup/plugin-node-resolve": "^13.3.0", | ||
"@semantic-release/changelog": "^6.0.1", | ||
"@semantic-release/commit-analyzer": "^9.0.2", | ||
"@semantic-release/git": "^10.0.1", | ||
"@semantic-release/npm": "^9.0.1", | ||
"@semantic-release/release-notes-generator": "^10.0.3", | ||
"@svgr/rollup": "6.4.0", | ||
"@testing-library/react": "13.4.0", | ||
"babel-loader": "8.2.5", | ||
"babelify": "^10.0.0", | ||
"browserify": "^17.0.0", | ||
"browserify-shim": "^3.8.15", | ||
"chai": "^4.3.6", | ||
"chai-enzyme": "^1.0.0-beta.1", | ||
"chai-spies": "^1.0.0", | ||
"commitizen": "2.9.6", | ||
"concurrently": "^2.1.0", | ||
"core-js": "^3.12.1", | ||
"cpy-cli": "^3.1.1", | ||
"cz-conventional-changelog": "^3.1.0", | ||
"enzyme": "^2.3.0", | ||
"enzyme-adapter-react-16": "^1.15.2", | ||
"eslint": "^6.8.0", | ||
"eslint-config-jss": "5.0.1", | ||
"eslint-config-prettier": "6.10.0", | ||
"eslint-config-standard": "^14.1.0", | ||
"eslint-config-standard-react": "^9.2.0", | ||
"eslint-plugin-import": "^2.18.2", | ||
"eslint-plugin-node": "^10.0.0", | ||
"eslint-plugin-prettier": "3.1.2", | ||
"eslint-plugin-promise": "^4.2.1", | ||
"eslint-plugin-react": "^7.16.0", | ||
"eslint-plugin-standard": "^4.0.1", | ||
"gh-pages": "1.1.0", | ||
"github-changes": "^1.1.2", | ||
"http-server": "^0.11.1", | ||
"husky": "^3.1.0", | ||
"commitizen": "4.2.5", | ||
"concurrently": "7.4.0", | ||
"core-js": "3.25.5", | ||
"cpy-cli": "4.2.0", | ||
"cz-conventional-changelog": "^3.3.0", | ||
"enzyme": "^3.11.0", | ||
"enzyme-adapter-react-16": "^1.15.6", | ||
"eslint": "8.25.0", | ||
"eslint-config-jss": ">=5.0.1", | ||
"eslint-config-prettier": ">=8.5.0", | ||
"eslint-config-standard": "^17.0.0", | ||
"eslint-config-standard-react": ">=11.0.1", | ||
"eslint-plugin-import": ">=2.26.0", | ||
"eslint-plugin-node": ">=11.1.0", | ||
"eslint-plugin-prettier": "4.2.1", | ||
"eslint-plugin-promise": "6.1.0", | ||
"eslint-plugin-react": "7.31.10", | ||
"gh-pages": "4.0.0", | ||
"github-changes": "^2.0.3", | ||
"http-server": "^14.1.1", | ||
"husky": "^8.0.0", | ||
"ignore-styles": "5.0.1", | ||
"jsdom": "^16.4.0", | ||
"lint-staged": "^10.2.7", | ||
"mocha": "^8.1.3", | ||
"jsdom": "20.0.1", | ||
"lint-staged": "^13.0.3", | ||
"mocha": "^10.0.0", | ||
"mocha-each": "^2.0.1", | ||
"mocha-jsdom": "^2.0.0", | ||
"npm-run-all": "^4.1.5", | ||
"postcss-nested": "^4.2.1", | ||
"postcss-simple-vars": "^5.0.2", | ||
"prettier": "1.19.1", | ||
"pretty-quick": "^2.0.1", | ||
"react": "^16.4.1", | ||
"postcss-nested": "^5.0.6", | ||
"postcss-scss": "4.0.5", | ||
"postcss-simple-vars": "^6.0.3", | ||
"prettier": "2.7.1", | ||
"pretty-quick": "^3.1.3", | ||
"react": "^18.2.0", | ||
"react-addons-test-utils": "^15.1.0", | ||
"react-dom": "^16.4.1", | ||
"rimraf": "^3.0.0", | ||
"rollup": "^1.27.5", | ||
"rollup-plugin-babel": "^4.3.3", | ||
"react-dom": "^18.2.0", | ||
"rimraf": "^3.0.2", | ||
"rollup": "^2.77.2", | ||
"rollup-plugin-babel": "^4.4.0", | ||
"rollup-plugin-eslint": "7.0.0", | ||
"rollup-plugin-peer-deps-external": "^2.2.0", | ||
"rollup-plugin-postcss": "^2.0.3", | ||
"rollup-plugin-sass": "^1.2.2", | ||
"rollup-plugin-peer-deps-external": "^2.2.4", | ||
"rollup-plugin-postcss": "^4.0.2", | ||
"rollup-plugin-sass": "1.12.16", | ||
"rollup-plugin-stylelint": "1.0.0", | ||
"rollup-plugin-url": "^3.0.1", | ||
"sass": "^1.34.0", | ||
"semantic-release": "^17.0.4", | ||
"snazzy": "^2.0.1", | ||
"standard": "^5.2.2", | ||
"stylelint": "13.2.0", | ||
"stylelint-config-standard": "20.0.0", | ||
"sass": "1.55.0", | ||
"semantic-release": "19.0.5", | ||
"snazzy": "^9.0.0", | ||
"standard": "^17.0.0", | ||
"stylelint": "14.13.0", | ||
"stylelint-config-standard": "26.0.0", | ||
"uglifyjs": "^2.4.10", | ||
"watchify": "^3.11.1" | ||
"watchify": "^4.0.0" | ||
}, | ||
@@ -149,0 +153,0 @@ "files": [ |
114
README.md
@@ -16,14 +16,4 @@ # react-tooltip | ||
Or see it on [Github Page](https://wwayne.github.io/react-tooltip). | ||
Or see it on [Github Page](https://reacttooltip.github.io/react-tooltip/). | ||
## Maintainers | ||
[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development. | ||
[roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development. | ||
[huumanoid](https://github.com/huumanoid) (inactive) | ||
We would gladly accept a new maintainer to help out! | ||
## Installation | ||
@@ -75,33 +65,36 @@ | ||
| Global | Specific | Type | Values | Description | | ||
| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| place | data-place | String | top, right, bottom, left | placement | | ||
| type | data-type | String | dark, success, warning, error, info, light | theme | | ||
| effect | data-effect | String | float, solid | behaviour of tooltip | | ||
| event | data-event | String | e.g. click | custom event to trigger tooltip | | ||
| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) | | ||
| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) | | ||
| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture | | ||
| offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global | | ||
| multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline | | ||
| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class | | ||
| html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below. | | ||
| delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />` | | ||
| delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />` | | ||
| delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target | | ||
| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) | | ||
| border | data-border | Bool | true, false | Add one pixel white border | | ||
| textColor | data-text-color | String | e.g. red | Popup text color | | ||
| backgroundColor | data-background-color | String | e.g. yellow | Popup background color | | ||
| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value | | ||
| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value | | ||
| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically | | ||
| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show | | ||
| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide | | ||
| overridePosition | null | Func | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one | | ||
| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false | | ||
| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true | | ||
| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true | | ||
| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div | | ||
| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false | | ||
| Global | Specific | Type | Values | Description | | ||
| :------------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| place | data-place | String | "top", "right", "bottom", "left", or comma-separated e.g. "left,right" | placement - can specify a comma-separated list of preferences that will be attempted in order | | ||
| type | data-type | String | dark, success, warning, error, info, light | theme | | ||
| effect | data-effect | String | float, solid | behaviour of tooltip | | ||
| event | data-event | String | e.g. click | custom event to trigger tooltip | | ||
| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) | | ||
| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) | | ||
| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture | | ||
| offset | data-offset | Object | { top?: number, right?: number, bottom?: number, left?: number } | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global | | ||
| padding | data-padding | String | e.g. `8px 21px` | Popup padding style | | ||
| multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline | | ||
| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class | | ||
| html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.<br/>When using JSX, see [this note](#jsx-note) below. | | ||
| delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />` | | ||
| delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />` | | ||
| delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target | | ||
| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) | | ||
| border | data-border | Bool | true, false | Add one pixel white border | | ||
| borderClass | data-border-class | String | e.g. custom-border-class | A custom class name to use for the border - enabled by the `border` prop | | ||
| textColor | data-text-color | String | e.g. red | Popup text color | | ||
| backgroundColor | data-background-color | String | e.g. yellow | Popup background color | | ||
| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value | | ||
| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value | | ||
| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically | | ||
| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show | | ||
| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide | | ||
| overridePosition | null | Func | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one | | ||
| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false | | ||
| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true | | ||
| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true | | ||
| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div | | ||
| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false | | ||
| disableInternalStyle | null | Bool | true, false | Disable internal styles to let custom styling of the tooltip being added | | ||
@@ -112,2 +105,15 @@ ### Security Note | ||
#### JSX Note | ||
You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. You still need to set `data-html={true}`. | ||
**Example:** | ||
```jsx | ||
import ReactDOMServer from 'react-dom/server'; | ||
[...] | ||
<p data-html={true} data-tip={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}> | ||
Hover me | ||
</p> | ||
``` | ||
#### Note | ||
@@ -180,4 +186,4 @@ | ||
When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes | ||
on new dynamic content, the tooltip will not register its event listener. | ||
When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes | ||
on new dynamic content, the tooltip will not register its event listener. | ||
@@ -188,3 +194,3 @@ For example, you render a generic tooltip in the root of your app, then load a list of content async. | ||
One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again, | ||
One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again, | ||
to allow event wireup. | ||
@@ -197,3 +203,3 @@ | ||
<ReactTooltip id="foo" /> | ||
<list/> | ||
<list /> | ||
</app> | ||
@@ -225,2 +231,18 @@ ``` | ||
## Maintainers | ||
[danielbarion](https://github.com/danielbarion) Casual maintainer - accepting PRs and doing minor testing/development. | ||
[alexgurr](https://github.com/alexgurr) Casual maintainer - accepting PRs and doing minor testing/development. | ||
[pdeszynski](https://github.com/pdeszynski) Casual maintainer - accepting PRs and doing minor testing/development. | ||
[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development. | ||
[roggervalf](https://github.com/roggervalf) (inactive). | ||
[huumanoid](https://github.com/huumanoid) (inactive) | ||
We would gladly accept a new maintainer to help out! | ||
## Contributing | ||
@@ -227,0 +249,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
684523
5885
248
84
8
3
Updatedprop-types@^15.8.1