Socket
Socket
Sign inDemoInstall

react-tooltip

Package Overview
Dependencies
Maintainers
6
Versions
344
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tooltip - npm Package Compare versions

Comparing version 4.2.21 to 4.5.1

27

dist/react-tooltip.d.ts

@@ -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: () => {};
}
{
"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": [

@@ -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

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