{"_id":"@codefork/react-tooltip","_rev":"9-733feb2dd9a5a142f4d26f4ab5bab213","time":{"created":"2022-04-03T06:03:02.947Z","4.3.0":"2022-04-02T11:45:04.225Z","modified":"2022-10-04T22:51:38.022Z","4.3.0-alpha.2":"2022-04-03T06:03:03.174Z","4.3.0-alpha.3":"2022-04-03T10:28:27.770Z","4.3.0-alpha.4":"2022-04-11T03:05:56.700Z","4.3.0-alpha.5":"2022-04-11T03:14:24.810Z","4.3.0-alpha.6":"2022-05-05T02:59:09.838Z","4.3.0-alpha.7":"2022-09-30T07:33:46.782Z","4.3.0-alpha.8":"2022-10-04T22:51:37.933Z"},"name":"@codefork/react-tooltip","dist-tags":{"alpha":"4.3.0-alpha.8","latest":"4.3.0-alpha.2"},"versions":{"4.3.0-alpha.2":{"name":"@codefork/react-tooltip","version":"4.3.0-alpha.2","description":"react tooltip component","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"npm":">=8"},"scripts":{"pretest":"npm-run-all pretty:quick lint:staged","eslint:fix":"npx eslint ./src/** --ignore-path ./.eslintignore --fix","pretty:quick":"pretty-quick --staged","lint:staged":"lint-staged","test":"jest","clean":"rimraf dist","copyfiles":"copyfiles ./src/**/*.scss out-tsc/","build:rollup":"tsc && yarn copyfiles && yarn rollup -c","build":"npm-run-all clean build:rollup copy:types","build:watch":"rollup -c -w","start":"npm-run-all clean build:watch","gh-pages":"gh-pages -d example","github-changes":"github-changes -o CodeForked -r react-tooltip -a --only-pulls --use-commit-body","copy:types":"copyfiles ./out-tsc/src/**/*.d.ts dist/ --up 2","cm":"git cz","semantic-release":"semantic-release","prepare":"husky install","postinstall":"husky install","prepack":"pinst --disable","postpack":"pinst --enable"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"publishConfig":{"access":"public"},"keywords":["react","react-component","tooltip","react-tooltip"],"author":{"name":"wwayne"},"contributors":[{"name":"jafin"}],"license":"MIT","bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"homepage":"https://github.com/CodeForked/react-tooltip#readme","browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"dependencies":{"@rollup/plugin-babel":"^5.3.1","@rollup/plugin-url":"^6.1.0","prop-types":"^15.8.1","uglify-js":"^3.15.3","uuid":"^8.3.2"},"devDependencies":{"@babel/cli":"^7.17.6","@babel/core":"^7.17.8","@babel/eslint-parser":"^7.17.0","@babel/plugin-proposal-class-properties":"^7.16.7","@babel/plugin-proposal-decorators":"^7.17.8","@babel/plugin-proposal-json-strings":"^7.16.7","@babel/plugin-proposal-object-rest-spread":"^7.17.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/register":"^7.17.7","@commitlint/cli":"16.2.3","@commitlint/config-conventional":"16.2.1","@commitlint/travis-cli":"16.2.3","@open-wc/building-rollup":"^2.0.1","@rbnlffl/rollup-plugin-eslint":"^3.0.0","@rollup/plugin-commonjs":"^21.0.3","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^13.1.3","@rollup/plugin-typescript":"^8.3.1","@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.2.1","@testing-library/jest-dom":"^5.16.3","@testing-library/react":"12.1.4","@types/jest":"^27.4.1","@types/node":"^17.0.23","@types/prop-types":"^15.7.4","@types/react":"^17.0.43","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","babel-loader":"8.2.4","babelify":"10.0.0","browserify":"17.0.0","browserify-shim":"^3.8.14","chai":"^4.3.6","chai-spies":"^1.0.0","commitizen":"4.2.4","concurrently":"7.1.0","copyfiles":"^2.4.1","core-js":"^3.21.1","cpy-cli":"4.1.0","cz-conventional-changelog":"^3.3.0","deepmerge":"^4.2.2","eslint":"^8.12.0","eslint-config-prettier":"8.5.0","eslint-config-standard":"14.1.1","eslint-config-standard-react":"11.0.1","eslint-plugin-import":"^2.25.4","eslint-plugin-node":"11.1.0","eslint-plugin-prettier":"4.0.0","eslint-plugin-promise":"6.0.0","eslint-plugin-react":"^7.29.4","eslint-plugin-react-hooks":"^4.4.0","gh-pages":"3.2.3","github-changes":"2.0.3","http-server":"14.1.0","husky":"^7.0.4","identity-obj-proxy":"^3.0.0","ignore-styles":"5.0.1","jest":"^27.5.1","jest-scss-transform":"^1.0.1","jsdom":"19.0.0","lint-staged":"12.3.7","mocha-each":"^2.0.1","npm-run-all":"^4.1.5","pinst":"^3.0.0","postcss":"^8.4.12","postcss-nested":"^5.0.6","postcss-simple-vars":"6.0.3","prettier":"^2.6.2","pretty-quick":"3.1.3","react":"17.0.2","react-addons-test-utils":"^15.6.2","react-dom":"17.0.2","react-test-renderer":"17.0.2","rimraf":"^3.0.2","rollup":"2.66.1","rollup-plugin-css":"^1.0.10","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-sass":"^1.2.12","rollup-plugin-stylelint":"1.0.0","rollup-plugin-terser":"^7.0.2","sass":"^1.49.11","semantic-release":"^19.0.2","snazzy":"9.0.0","standard":"16.0.4","stylelint":"^14.6.1","stylelint-config-standard":"25.0.0","stylelint-config-standard-scss":"^3.0.0","ts-jest":"^27.1.4","ts-node":"^10.7.0","typescript":"^4.6.3","watchify":"4.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,ts}":"yarn eslint:fix"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"packageManager":"yarn@3.2.0","gitHead":"e53137df32742a7453b56f48a453df19a7aea531","_id":"@codefork/react-tooltip@4.3.0-alpha.2","_nodeVersion":"16.13.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-Zq6BrXKDXPjkz50IrYU7crIVdy2tjTD1FlnOr7w66i16oUMmRiZuxxNbvy7PeRzYLYcf5OO7GNOjfrJWimzJzQ==","shasum":"4f2bd11ed886445bb8d29d9bf879faacbda49c7f","tarball":"https://registry.npmjs.org/@codefork/react-tooltip/-/react-tooltip-4.3.0-alpha.2.tgz","fileCount":3,"unpackedSize":26890,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfaGjh/r/7cEFGzUEViGuoH+MQV3VYfJf7RXGCk64c9AiEAy3ub8leaIA69TR1vczm6NleXVPjfh9FdYycKd+V1ueA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSTiXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonIRAAhlRhzOoavAfg0OAGvH01E/t/lGw1tkCgeaecXmvueYrs4red\r\nN2oELBk4SznKjN8hc8dkbu7OSeyIAFcP6HHsaUy+3iAtRfcqno4NsApsV50v\r\nAgHOwq/8vtPiPEhkutc4kmkDgsYmum357fOHFkICHkRSkrjmn05GvchSoXwx\r\n7i3VrhZgqKeUAgeeZiHSoIHTKFmuuB95i2mtAYtXbxjAX2m5FFVA93uj/nne\r\noWotW0O4IzfwlDC1yo0DRqPppyZiZO35e8So4r/FUfwJEENFg7zHlOMCX/S6\r\n4y6dSEOzyxDbJmgPpL9X/ESoTgzB47YRxCaGQafBymVn8TQSj1g8vXftwZQa\r\nP9Tqz+8NR7Kq/cascavGkIB2P39XbATPBXO7qUXv9j/dqACRnrLoAoo0OH7M\r\nnfbRF7Cmoq2nKu2wWuYMcaWq7oM11h920eWvo1pIID67Fi8sOa2FhID2D1CJ\r\njVXk0l7eeWrfpgJvuqc+OXNGGdfkz/EOLUCYV6b9RCZd3zT9H8izedY3HCXW\r\nd87h+bKgSenL8Z+KiNBtpt31fVLZyR9mqL1Gzfxi7UElafr3qWFecGZMn4oo\r\n8aPKevakGj/hl5gTAqm/mJFAhNenIFMAPgX/MouqglBweNg4cy5ZwH+RC7CG\r\nVYutROi2NVBOYEiUF86pzvkA5vdq2tAAGes=\r\n=6BWK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"finchy","email":"jason.finch@gmail.com"},"directories":{},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tooltip_4.3.0-alpha.2_1648965783011_0.7105796876630914"},"_hasShrinkwrap":false},"4.3.0-alpha.3":{"name":"@codefork/react-tooltip","version":"4.3.0-alpha.3","description":"react tooltip component","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"npm":">=8"},"scripts":{"pretest":"npm-run-all pretty:quick lint:staged","eslint:fix":"npx eslint ./src/** --ignore-path ./.eslintignore --fix","pretty:quick":"pretty-quick --staged","lint:staged":"lint-staged","test":"jest","clean":"rimraf dist","copyfiles":"copyfiles ./src/**/*.scss out-tsc/","build:rollup":"tsc && yarn copyfiles && yarn rollup -c","build":"npm-run-all clean build:rollup copy:types","build:watch":"rollup -c -w","start":"npm-run-all clean build:watch","publish:gh-pages":"cd example && yarn publish","github-changes":"github-changes -o CodeForked -r react-tooltip -a --only-pulls --use-commit-body","copy:types":"copyfiles ./out-tsc/src/**/*.d.ts dist/ --up 2","cm":"git cz","semantic-release":"semantic-release","prepare":"husky install","postinstall":"husky install","prepack":"pinst --disable","postpack":"pinst --enable"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"publishConfig":{"access":"public"},"keywords":["react","react-component","tooltip","react-tooltip"],"author":{"name":"wwayne"},"contributors":[{"name":"jafin"}],"license":"MIT","bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"homepage":"https://github.com/CodeForked/react-tooltip#readme","browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"dependencies":{"@rollup/plugin-babel":"^5.3.1","@rollup/plugin-url":"^6.1.0","prop-types":"^15.8.1","uglify-js":"^3.15.3","uuid":"^8.3.2"},"devDependencies":{"@babel/cli":"^7.17.6","@babel/core":"^7.17.8","@babel/eslint-parser":"^7.17.0","@babel/plugin-proposal-class-properties":"^7.16.7","@babel/plugin-proposal-decorators":"^7.17.8","@babel/plugin-proposal-json-strings":"^7.16.7","@babel/plugin-proposal-object-rest-spread":"^7.17.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/register":"^7.17.7","@commitlint/cli":"16.2.3","@commitlint/config-conventional":"16.2.1","@commitlint/travis-cli":"16.2.3","@open-wc/building-rollup":"^2.0.1","@rbnlffl/rollup-plugin-eslint":"^3.0.0","@rollup/plugin-commonjs":"^21.0.3","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^13.1.3","@rollup/plugin-typescript":"^8.3.1","@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.2.1","@testing-library/jest-dom":"^5.16.3","@testing-library/react":"12.1.4","@types/jest":"^27.4.1","@types/node":"^17.0.23","@types/prop-types":"^15.7.4","@types/react":"^17.0.43","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","babel-loader":"8.2.4","babelify":"10.0.0","browserify":"17.0.0","browserify-shim":"^3.8.14","chai":"^4.3.6","chai-spies":"^1.0.0","commitizen":"4.2.4","concurrently":"7.1.0","copyfiles":"^2.4.1","core-js":"^3.21.1","cpy-cli":"4.1.0","cross-env":"^7.0.3","cz-conventional-changelog":"^3.3.0","deepmerge":"^4.2.2","eslint":"^8.12.0","eslint-config-prettier":"8.5.0","eslint-config-standard":"14.1.1","eslint-config-standard-react":"11.0.1","eslint-plugin-import":"^2.25.4","eslint-plugin-node":"11.1.0","eslint-plugin-prettier":"4.0.0","eslint-plugin-promise":"6.0.0","eslint-plugin-react":"^7.29.4","eslint-plugin-react-hooks":"^4.4.0","gh-pages":"3.2.3","github-changes":"2.0.3","http-server":"14.1.0","husky":"^7.0.4","identity-obj-proxy":"^3.0.0","ignore-styles":"5.0.1","jest":"^27.5.1","jest-scss-transform":"^1.0.1","jsdom":"19.0.0","lint-staged":"12.3.7","mocha-each":"^2.0.1","npm-run-all":"^4.1.5","pinst":"^3.0.0","postcss":"^8.4.12","postcss-nested":"^5.0.6","postcss-simple-vars":"6.0.3","prettier":"^2.6.2","pretty-quick":"3.1.3","react":"17.0.2","react-addons-test-utils":"^15.6.2","react-dom":"17.0.2","react-test-renderer":"17.0.2","rimraf":"^3.0.2","rollup":"2.66.1","rollup-plugin-css":"^1.0.10","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-sass":"^1.2.12","rollup-plugin-stylelint":"1.0.0","rollup-plugin-terser":"^7.0.2","sass":"^1.49.11","semantic-release":"^19.0.2","snazzy":"9.0.0","standard":"16.0.4","stylelint":"^14.6.1","stylelint-config-standard":"25.0.0","stylelint-config-standard-scss":"^3.0.0","ts-jest":"^27.1.4","ts-node":"^10.7.0","typescript":"^4.6.3","watchify":"4.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,ts}":"yarn eslint:fix"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"packageManager":"yarn@3.2.0","readme":"# @codefork/react-tooltip\n\n[![Version](https://img.shields.io/npm/v/@codefork/react-tooltip.svg)](https://www.npmjs.com/package/@codefork/react-tooltip)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![npm download][download-image]][download-url]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\n\n[download-image]: https://img.shields.io/npm/dm/@codefork/react-tooltip.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@codefork/react-tooltip\n\n## Overview\n\nThis is a fork of the [react-tooltip](https://github.com/wwayne/react-tooltip) from Wang Zixiao (wwayne).\n\nUnless there is something specific you desire I would urge you to prefer the original package over this one.\n\nNotable changes from the original package:-\n\n- Source coverted to typescript\n- Fix issue with React 18 strictMode\n\n## Demo\n\n\n\nExamples on the [Github Page](https://codeforked.github.io/react-tooltip/).\n\n## Maintainers\n\n### Forked Repo\n\n[jafin](https://github.com/jafin)\n\n### Original Repo\n\n[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.\n\n[roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.\n\n[huumanoid](https://github.com/huumanoid) (inactive)\n\nWe would gladly accept a new maintainer to help out!\n\n## Installation\n\n```sh\nnpm install @codeforked/react-tooltip\n```\n\nor\n\n```sh\nyarn add @codeforked/react-tooltip\n```\n\n## Usage\n\n### Using NPM\n\n1 . Require react-tooltip after installation\n\n```js\nimport ReactTooltip from 'react-tooltip';\n```\n\n2 . Add data-tip = \"your placeholder\" to your element\n\n```jsx\n

Tooltip

\n```\n\n3 . Include react-tooltip component\n\n```jsx\n\n```\n\n### Standalone\n\nYou can import `node_modules/@codefork/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.\n\n## Options\n\nNotes:\n\n- The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults\n- The option you set on `` component will be implemented on every tooltip in a same page: ``\n- The option you set on a specific element, for example: `` will only affect this specific tooltip\n\n| Global | Specific | Type | Values | Description |\n| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| place | data-place | String | top, right, bottom, left | placement |\n| type | data-type | String | dark, success, warning, error, info, light | theme |\n| effect | data-effect | String | float, solid | behaviour of tooltip |\n| event | data-event | String | e.g. click | custom event to trigger tooltip |\n| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |\n| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |\n| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |\n| offset | data-offset | Object | top, right, bottom, left | `data-offset=\"{'top': 10, 'left': 10}\"` for specific and `offset={{top: 10, left: 10}}` for global |\n| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |\n| multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline |\n| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |\n| html | data-html | Bool | true, false | `

HTML tooltip

\" data-html={true}>

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. |\n| delayHide | data-delay-hide | Number | | `

` or `` |\n| delayShow | data-delay-show | Number | | `

` or `` |\n| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |\n| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |\n| border | data-border | Bool | true, false | Add one pixel white border |\n| textColor | data-text-color | String | e.g. red | Popup text color |\n| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |\n| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |\n| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value |\n| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically |\n| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show |\n| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide |\n| 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 |\n| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false |\n| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true |\n| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true |\n| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div |\n| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false |\n\n### Security Note\n\nThe `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.\n\n#### JSX Note\n\nYou 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}`.\n**Example:**\n\n```jsx\nimport ReactDOMServer from 'react-dom/server';\n[...]\n

I am JSX content)}>\n Hover me\n

\n```\n\n#### Note\n\n1. **data-tip** is necessary, because `` finds the tooltip via this attribute\n2. **data-for** corresponds to the **id** of ``\n3. When using react component as tooltip, you can have many `` in a page but they should have different **id**s\n\n## Static Methods\n\n### ReactTooltip.hide(target)\n\n> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n### ReactTooltip.rebuild()\n\n> Rebinding all tooltips\n\n### ReactTooltip.show(target)\n\n> Show specific tooltip manually, for example:\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n## Troubleshooting\n\n### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))\n\nThe component was designed to set `` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:\n\n1. Place `` outside of the ``\n2. Use `ReactTooltip.rebuild()` when opening the modal\n3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index\n\n> I suggest always putting `` in the Highest level or smart component of Redux, so you might need these static\n> method to control tooltip's behaviour in some situations\n\n### 2. Hide tooltip when getContent returns undefined\n\nWhen you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-\\* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.\n\n```jsx\n

\n { return null }}/>\n```\n\nSame for empty children, if you don't want show the tooltip when the children is empty\n\n```jsx\n

\n{}\n```\n\n### 3. Tooltip not binding to dynamic content\n\nWhen you render `` ahead of dynamic content, and are using `data-for={id}` attributes\non new dynamic content, the tooltip will not register its event listener.\n\nFor example, you render a generic tooltip in the root of your app, then load a list of content async.\nElements in the list use the `data-for={id}` attribute to bind the tooltip on hover.\nSince the tooltip has already scanned for data-tip these new elements will not trigger.\n\nOne workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,\nto allow event wireup.\n\n#### Example\n\n```tsx\n\n \n \n\n```\n\n```tsx\nconst dynamicList = (props) => {\n\nuseEffect(() => {\n ReactTooltip.rebuild();\n });\n\nreturn(\n \n {data.map((item)=> {\n My late bound tooltip triggered data\n });}\n \n);\n};\n\n```\n\n## Article\n\n[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)\n\n## Contributing\n\nWe welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.\n\n## License\n\nMIT\n","readmeFilename":"README.md","gitHead":"686bcae965dea050954b7b084d163f4c06d6d2cd","_id":"@codefork/react-tooltip@4.3.0-alpha.3","_nodeVersion":"16.13.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-bHt2ZBKtYXXu6kUo0vdmzFKEokC+kOrrXT3fEm4KDUzSmIGo+UoPwsVbJ+B11fZ0FYcasTPMviI5gYD/vHuGpA==","shasum":"cceb9583eb8a56948f8732de4d1423b8545b6bc7","tarball":"https://registry.npmjs.org/@codefork/react-tooltip/-/react-tooltip-4.3.0-alpha.3.tgz","fileCount":3,"unpackedSize":27454,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgvwNmxyNX6mIQFDjraBEaHrAJev/wHPDBbqKDjfFMNAiBqs2YKXaq867z3ZEIx2C9FmezbK5dISWsTwJteLU4KRg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSXbLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPRw//dX7BbQ88uQJHRolt2YU5lybFtCAhOEWithcd9JUUz9gr8Iz8\r\nsug2XRayIPu/m1mxGCnrfJkzAMBFnPxFkCtNqIHagIZ39YTx+8Sx3+saQzQl\r\nyJOwZKSspm+FCYmlXcKkpJ/U0RIwwPX1P+u0ds6VLmqtiSOZuk3UsX8KoU/t\r\nfaKOJqP/ZmByGvMBtIRgosbG+sDsjHWpfLllPoL0ZRWyKwXIeMiIf8lRP/Cm\r\nYOEHip51RPPQ4Np+W2MOThEptWLyhQiBzw/sbEU0j3lmWXyKn4rOFivBIwja\r\nl9WWtL1Aj81sJ2k1R/6jWDJimWOXgYr9LDlROOiRJvrlUohPgsW5muLIMlX8\r\nrc4Tj3Ki2PyUmugf1dwzSXmPzGFA15ApyCfEQLQdtSp75WxDs7XtGHFyEUEx\r\n1Ul7DxI5y1rkjw5P8NcjQ0ZFq/BYe1OEp/zkcgUTiDb5l0ywBZT0QFwR6kL3\r\ntdGwj/ghe6sWH7HIkGnGzfGoJyQrZZe5MMdy8BMp7iPSsO5J2vWaDmPk8BXJ\r\neO6j8l9t47vZ8Z7oHVq76VUfxbXKCwgbt4Ok/l+CEMKo6RyDsyCWYvOVvHSy\r\nhi7geTiSgz2sNMrECwJ8NLCykRqFlnq9jaJm6MUhwGw55iPBHbvQnN8N21tG\r\nMv6Dn4TvK6JOW0/jmQ8K4QF4+gw5PfysEDY=\r\n=gos/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"finchy","email":"jason.finch@gmail.com"},"directories":{},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tooltip_4.3.0-alpha.3_1648981707409_0.7809379280366764"},"_hasShrinkwrap":false},"4.3.0-alpha.4":{"name":"@codefork/react-tooltip","version":"4.3.0-alpha.4","description":"react tooltip component","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"npm":">=8"},"scripts":{"pretest":"npm-run-all pretty:quick lint:staged","eslint:fix":"npx eslint ./src/** --ignore-path ./.eslintignore --fix","pretty:quick":"pretty-quick --staged","lint:staged":"lint-staged","test":"jest","clean":"rimraf dist","copyfiles":"cpy ./src/**/*.scss ./out-tsc/","copy:types":"cpy './out-tsc/**/*.d.ts' '!./out-tsc/**/__tests__/*' dist/ ","build:rollup":"tsc && yarn copyfiles && yarn rollup -c","build":"npm-run-all clean build:rollup copy:types","build:watch":"rollup -c -w","start":"npm-run-all clean build:watch","publish:gh-pages":"cd example && yarn publish","github-changes":"github-changes -o CodeForked -r react-tooltip -a --only-pulls --use-commit-body","cm":"git cz","semantic-release":"semantic-release","prepare":"husky install","postinstall":"husky install","prepack":"pinst --disable","postpack":"pinst --enable"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"publishConfig":{"access":"public"},"keywords":["react","react-component","tooltip","react-tooltip"],"author":{"name":"wwayne"},"contributors":[{"name":"jafin"}],"license":"MIT","bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"homepage":"https://github.com/CodeForked/react-tooltip#readme","browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"dependencies":{"prop-types":"^15.8.1","uuid":"^8.3.2"},"devDependencies":{"@babel/cli":"^7.17.6","@babel/core":"^7.17.8","@babel/eslint-parser":"^7.17.0","@babel/plugin-proposal-class-properties":"^7.16.7","@babel/plugin-proposal-decorators":"^7.17.8","@babel/plugin-proposal-json-strings":"^7.16.7","@babel/plugin-proposal-object-rest-spread":"^7.17.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/register":"^7.17.7","@commitlint/cli":"16.2.3","@commitlint/config-conventional":"16.2.1","@commitlint/travis-cli":"16.2.3","@open-wc/building-rollup":"^2.0.1","@rbnlffl/rollup-plugin-eslint":"^3.0.0","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^21.0.3","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^13.1.3","@rollup/plugin-typescript":"^8.3.1","@rollup/plugin-url":"^6.1.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.2.1","@testing-library/jest-dom":"^5.16.3","@testing-library/react":"12.1.4","@types/jest":"^27.4.1","@types/node":"^17.0.23","@types/prop-types":"^15.7.4","@types/react":"^17.0.43","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","babel-loader":"8.2.4","babelify":"10.0.0","browserify":"17.0.0","browserify-shim":"^3.8.14","chai":"^4.3.6","chai-spies":"^1.0.0","commitizen":"4.2.4","concurrently":"7.1.0","core-js":"^3.21.1","cpy":"^9.0.1","cpy-cli":"4.1.0","cross-env":"^7.0.3","cz-conventional-changelog":"^3.3.0","deepmerge":"^4.2.2","eslint":"^8.12.0","eslint-config-prettier":"8.5.0","eslint-config-standard":"14.1.1","eslint-config-standard-react":"11.0.1","eslint-plugin-import":"^2.25.4","eslint-plugin-node":"11.1.0","eslint-plugin-prettier":"4.0.0","eslint-plugin-promise":"6.0.0","eslint-plugin-react":"^7.29.4","eslint-plugin-react-hooks":"^4.4.0","gh-pages":"3.2.3","github-changes":"2.0.3","http-server":"14.1.0","husky":"^7.0.4","identity-obj-proxy":"^3.0.0","ignore-styles":"5.0.1","jest":"^27.5.1","jest-scss-transform":"^1.0.1","jsdom":"19.0.0","lint-staged":"12.3.7","mocha-each":"^2.0.1","npm-run-all":"^4.1.5","pinst":"^3.0.0","postcss":"^8.4.12","postcss-nested":"^5.0.6","postcss-simple-vars":"6.0.3","prettier":"^2.6.2","pretty-quick":"3.1.3","react":"17.0.2","react-addons-test-utils":"^15.6.2","react-dom":"17.0.2","react-test-renderer":"17.0.2","rimraf":"^3.0.2","rollup":"2.66.1","rollup-plugin-css":"^1.0.10","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-sass":"^1.2.12","rollup-plugin-stylelint":"1.0.0","rollup-plugin-terser":"^7.0.2","sass":"^1.49.11","semantic-release":"^19.0.2","snazzy":"9.0.0","standard":"16.0.4","stylelint":"^14.6.1","stylelint-config-standard":"25.0.0","stylelint-config-standard-scss":"^3.0.0","ts-jest":"^27.1.4","ts-node":"^10.7.0","typescript":"^4.6.3","uglify-js":"^3.15.3","watchify":"4.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,ts}":"yarn eslint:fix"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"packageManager":"yarn@3.2.0","readme":"# @codefork/react-tooltip\n\n[![Version](https://img.shields.io/npm/v/@codefork/react-tooltip.svg)](https://www.npmjs.com/package/@codefork/react-tooltip)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![npm download][download-image]][download-url]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\n\n[download-image]: https://img.shields.io/npm/dm/@codefork/react-tooltip.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@codefork/react-tooltip\n\n## Overview\n\nThis is a fork of the [react-tooltip](https://github.com/wwayne/react-tooltip) from Wang Zixiao (wwayne).\n\nUnless there is something specific you desire I would urge you to prefer the original package over this one.\n\nNotable changes from the original package:-\n\n- Source coverted to typescript\n- Fix issue with React 18 strictMode\n\n## Demo\n\n\n\nExamples on the [Github Page](https://codeforked.github.io/react-tooltip/).\n\n## Maintainers\n\n### Forked Repo\n\n[jafin](https://github.com/jafin)\n\n### Original Repo\n\n[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.\n\n[roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.\n\n[huumanoid](https://github.com/huumanoid) (inactive)\n\nWe would gladly accept a new maintainer to help out!\n\n## Installation\n\n```sh\nnpm install @codeforked/react-tooltip\n```\n\nor\n\n```sh\nyarn add @codeforked/react-tooltip\n```\n\n## Usage\n\n### Using NPM\n\n1 . Require react-tooltip after installation\n\n```js\nimport ReactTooltip from 'react-tooltip';\n```\n\n2 . Add data-tip = \"your placeholder\" to your element\n\n```jsx\n

Tooltip

\n```\n\n3 . Include react-tooltip component\n\n```jsx\n\n```\n\n### Standalone\n\nYou can import `node_modules/@codefork/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.\n\n## Options\n\nNotes:\n\n- The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults\n- The option you set on `` component will be implemented on every tooltip in a same page: ``\n- The option you set on a specific element, for example: `` will only affect this specific tooltip\n\n| Global | Specific | Type | Values | Description |\n| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| place | data-place | String | top, right, bottom, left | placement |\n| type | data-type | String | dark, success, warning, error, info, light | theme |\n| effect | data-effect | String | float, solid | behaviour of tooltip |\n| event | data-event | String | e.g. click | custom event to trigger tooltip |\n| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |\n| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |\n| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |\n| offset | data-offset | Object | top, right, bottom, left | `data-offset=\"{'top': 10, 'left': 10}\"` for specific and `offset={{top: 10, left: 10}}` for global |\n| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |\n| multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline |\n| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |\n| html | data-html | Bool | true, false | `

HTML tooltip

\" data-html={true}>

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. |\n| delayHide | data-delay-hide | Number | | `

` or `` |\n| delayShow | data-delay-show | Number | | `

` or `` |\n| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |\n| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |\n| border | data-border | Bool | true, false | Add one pixel white border |\n| textColor | data-text-color | String | e.g. red | Popup text color |\n| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |\n| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |\n| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value |\n| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically |\n| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show |\n| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide |\n| 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 |\n| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false |\n| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true |\n| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true |\n| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div |\n| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false |\n\n### Security Note\n\nThe `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.\n\n#### JSX Note\n\nYou 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}`.\n**Example:**\n\n```jsx\nimport ReactDOMServer from 'react-dom/server';\n[...]\n

I am JSX content)}>\n Hover me\n

\n```\n\n#### Note\n\n1. **data-tip** is necessary, because `` finds the tooltip via this attribute\n2. **data-for** corresponds to the **id** of ``\n3. When using react component as tooltip, you can have many `` in a page but they should have different **id**s\n\n## Static Methods\n\n### ReactTooltip.hide(target)\n\n> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n### ReactTooltip.rebuild()\n\n> Rebinding all tooltips\n\n### ReactTooltip.show(target)\n\n> Show specific tooltip manually, for example:\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n## Troubleshooting\n\n### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))\n\nThe component was designed to set `` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:\n\n1. Place `` outside of the ``\n2. Use `ReactTooltip.rebuild()` when opening the modal\n3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index\n\n> I suggest always putting `` in the Highest level or smart component of Redux, so you might need these static\n> method to control tooltip's behaviour in some situations\n\n### 2. Hide tooltip when getContent returns undefined\n\nWhen you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-\\* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.\n\n```jsx\n

\n { return null }}/>\n```\n\nSame for empty children, if you don't want show the tooltip when the children is empty\n\n```jsx\n

\n{}\n```\n\n### 3. Tooltip not binding to dynamic content\n\nWhen you render `` ahead of dynamic content, and are using `data-for={id}` attributes\non new dynamic content, the tooltip will not register its event listener.\n\nFor example, you render a generic tooltip in the root of your app, then load a list of content async.\nElements in the list use the `data-for={id}` attribute to bind the tooltip on hover.\nSince the tooltip has already scanned for data-tip these new elements will not trigger.\n\nOne workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,\nto allow event wireup.\n\n#### Example\n\n```tsx\n\n \n \n\n```\n\n```tsx\nconst dynamicList = (props) => {\n\nuseEffect(() => {\n ReactTooltip.rebuild();\n });\n\nreturn(\n \n {data.map((item)=> {\n My late bound tooltip triggered data\n });}\n \n);\n};\n\n```\n\n## Article\n\n[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)\n\n## Contributing\n\nWe welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.\n\n## License\n\nMIT\n","readmeFilename":"README.md","gitHead":"c81756f9083a58dbbc57bb5d515071724cf806cb","_id":"@codefork/react-tooltip@4.3.0-alpha.4","_nodeVersion":"16.13.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-VHHV8WeGR0cVsJb6F4urCzkEKrgHZehE3byyisSgRc/RpSSaxFfVvxOBaWzE9bo5assrHGgu4VhDxcwQUyotiw==","shasum":"68515fb8a24449c3548ff72ed262e2091220f57f","tarball":"https://registry.npmjs.org/@codefork/react-tooltip/-/react-tooltip-4.3.0-alpha.4.tgz","fileCount":3,"unpackedSize":27458,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwBT2Jr4FHiUWjI/+Xp8e84DlRRw7DUHvF4d6ujuyncQIgVb7KnhXACF3Qq8R4nuWShcMusztlxch+dcdluVQazkE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiU5sUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4wQ//SWnZwDE+f5k4L7I5xeIOe438VOx5EC0mdTGuhnvbVIV0S87U\r\n0nYyFNolT9FX8DmIPnKJAN0gl+4VUfDXiNUXjyMtjNK3JzrLhlb0x8k6DH+B\r\nTuF09KlbMJPlYjZ7mLnfzfxccYruMMYygqofqU7YhUYTrG1IG+ah8vT016qg\r\ntjfZFg1yGCFuvHXUOImmOXKUsE4Fb7Y/HiSziqIbX82vyDp5/06wcaiHVtm+\r\np4lpVh9tcya36QnAZMc5qZtRb1iuZo8MyGS33sd0feO4saUAQk4u4YQvsc6Y\r\n0yqJOlcFYOAd4hYKhLrkgMs86u/EVghceQK5UtP3MWK45ecr7QfOTXVi/522\r\nW98Bxd3SXxqf45ZrUkbP0KrUXUFt2IMZ11ITaAbmzFaacFOy+MnrVpjF95WC\r\nevLqCThAvUnK4PsoeFi5uNjV40D87mKaSAZ8l+Amoi5AmH9WTJw29dMTXrqI\r\nPINivnAUm0/xvAD3YyNn7p3gKf6BwuSXi5focAoTZ3b0WFmLVJzBqfLjt5oR\r\nNgcbvxlaxAyqRK2o5HPKATxplWaB2MjN256/DdZGLKByUMg/bYE/ypmMJRHD\r\ncSH+YDAzOETW15ELp0jUHtPUP28bUOFNh2tlb4n+FDSEjq4/4z/vEQkSfdYu\r\nxrhTz9wNupc53qKY7OvIcZjI2VvBPn2iqGs=\r\n=s4PF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"finchy","email":"jason.finch@gmail.com"},"directories":{},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tooltip_4.3.0-alpha.4_1649646356523_0.8548470812573543"},"_hasShrinkwrap":false},"4.3.0-alpha.5":{"name":"@codefork/react-tooltip","version":"4.3.0-alpha.5","description":"react tooltip component","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"npm":">=8"},"scripts":{"pretest":"npm-run-all pretty:quick lint:staged","eslint:fix":"npx eslint ./src/** --ignore-path ./.eslintignore --fix","pretty:quick":"pretty-quick --staged","lint:staged":"lint-staged","test":"jest","clean":"rimraf dist","copyfiles":"cpy ./src/**/*.scss ./out-tsc/","copy:types":"cpy './out-tsc/**/*.d.ts' '!./out-tsc/**/__tests__/*' dist/ ","build:rollup":"tsc && yarn copyfiles && yarn rollup -c","build":"npm-run-all clean build:rollup copy:types","build:watch":"rollup -c -w","start":"npm-run-all clean build:watch","publish:gh-pages":"cd example && yarn publish","github-changes":"github-changes -o CodeForked -r react-tooltip -a --only-pulls --use-commit-body","cm":"git cz","semantic-release":"semantic-release","prepare":"husky install","postinstall":"husky install","prepack":"pinst --disable","postpack":"pinst --enable"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"publishConfig":{"access":"public"},"keywords":["react","react-component","tooltip","react-tooltip"],"author":{"name":"wwayne"},"contributors":[{"name":"jafin"}],"license":"MIT","bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"homepage":"https://github.com/CodeForked/react-tooltip#readme","browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"dependencies":{"prop-types":"^15.8.1","uuid":"^8.3.2"},"devDependencies":{"@babel/cli":"^7.17.6","@babel/core":"^7.17.8","@babel/eslint-parser":"^7.17.0","@babel/plugin-proposal-class-properties":"^7.16.7","@babel/plugin-proposal-decorators":"^7.17.8","@babel/plugin-proposal-json-strings":"^7.16.7","@babel/plugin-proposal-object-rest-spread":"^7.17.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/register":"^7.17.7","@commitlint/cli":"16.2.3","@commitlint/config-conventional":"16.2.1","@commitlint/travis-cli":"16.2.3","@open-wc/building-rollup":"^2.0.1","@rbnlffl/rollup-plugin-eslint":"^3.0.0","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^21.0.3","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^13.1.3","@rollup/plugin-typescript":"^8.3.1","@rollup/plugin-url":"^6.1.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.2.1","@testing-library/jest-dom":"^5.16.3","@testing-library/react":"12.1.4","@types/jest":"^27.4.1","@types/node":"^17.0.23","@types/prop-types":"^15.7.4","@types/react":"^17.0.43","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","babel-loader":"8.2.4","babelify":"10.0.0","browserify":"17.0.0","browserify-shim":"^3.8.14","chai":"^4.3.6","chai-spies":"^1.0.0","commitizen":"4.2.4","concurrently":"7.1.0","core-js":"^3.21.1","cpy":"^9.0.1","cpy-cli":"4.1.0","cross-env":"^7.0.3","cz-conventional-changelog":"^3.3.0","deepmerge":"^4.2.2","eslint":"^8.12.0","eslint-config-prettier":"8.5.0","eslint-config-standard":"14.1.1","eslint-config-standard-react":"11.0.1","eslint-plugin-import":"^2.25.4","eslint-plugin-node":"11.1.0","eslint-plugin-prettier":"4.0.0","eslint-plugin-promise":"6.0.0","eslint-plugin-react":"^7.29.4","eslint-plugin-react-hooks":"^4.4.0","gh-pages":"3.2.3","github-changes":"2.0.3","http-server":"14.1.0","husky":"^7.0.4","identity-obj-proxy":"^3.0.0","ignore-styles":"5.0.1","jest":"^27.5.1","jest-scss-transform":"^1.0.1","jsdom":"19.0.0","lint-staged":"12.3.7","mocha-each":"^2.0.1","npm-run-all":"^4.1.5","pinst":"^3.0.0","postcss":"^8.4.12","postcss-nested":"^5.0.6","postcss-simple-vars":"6.0.3","prettier":"^2.6.2","pretty-quick":"3.1.3","react":"17.0.2","react-addons-test-utils":"^15.6.2","react-dom":"17.0.2","react-test-renderer":"17.0.2","rimraf":"^3.0.2","rollup":"2.66.1","rollup-plugin-css":"^1.0.10","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-sass":"^1.2.12","rollup-plugin-stylelint":"1.0.0","rollup-plugin-terser":"^7.0.2","sass":"^1.49.11","semantic-release":"^19.0.2","snazzy":"9.0.0","standard":"16.0.4","stylelint":"^14.6.1","stylelint-config-standard":"25.0.0","stylelint-config-standard-scss":"^3.0.0","ts-jest":"^27.1.4","ts-node":"^10.7.0","typescript":"^4.6.3","uglify-js":"^3.15.3","watchify":"4.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,ts}":"yarn eslint:fix"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"packageManager":"yarn@3.2.0","readme":"# @codefork/react-tooltip\n\n[![Version](https://img.shields.io/npm/v/@codefork/react-tooltip.svg)](https://www.npmjs.com/package/@codefork/react-tooltip)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![npm download][download-image]][download-url]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\n\n[download-image]: https://img.shields.io/npm/dm/@codefork/react-tooltip.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@codefork/react-tooltip\n\n## Overview\n\nThis is a fork of the [react-tooltip](https://github.com/wwayne/react-tooltip) from Wang Zixiao (wwayne).\n\nUnless there is something specific you desire I would urge you to prefer the original package over this one.\n\nNotable changes from the original package:-\n\n- Source coverted to typescript\n- Fix issue with React 18 strictMode\n\n## Demo\n\n\n\nExamples on the [Github Page](https://codeforked.github.io/react-tooltip/).\n\n## Maintainers\n\n### Forked Repo\n\n[jafin](https://github.com/jafin)\n\n### Original Repo\n\n[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.\n\n[roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.\n\n[huumanoid](https://github.com/huumanoid) (inactive)\n\nWe would gladly accept a new maintainer to help out!\n\n## Installation\n\n```sh\nnpm install @codeforked/react-tooltip\n```\n\nor\n\n```sh\nyarn add @codeforked/react-tooltip\n```\n\n## Usage\n\n### Using NPM\n\n1 . Require react-tooltip after installation\n\n```js\nimport ReactTooltip from 'react-tooltip';\n```\n\n2 . Add data-tip = \"your placeholder\" to your element\n\n```jsx\n

Tooltip

\n```\n\n3 . Include react-tooltip component\n\n```jsx\n\n```\n\n### Standalone\n\nYou can import `node_modules/@codefork/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.\n\n## Options\n\nNotes:\n\n- The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults\n- The option you set on `` component will be implemented on every tooltip in a same page: ``\n- The option you set on a specific element, for example: `` will only affect this specific tooltip\n\n| Global | Specific | Type | Values | Description |\n| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| place | data-place | String | top, right, bottom, left | placement |\n| type | data-type | String | dark, success, warning, error, info, light | theme |\n| effect | data-effect | String | float, solid | behaviour of tooltip |\n| event | data-event | String | e.g. click | custom event to trigger tooltip |\n| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |\n| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |\n| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |\n| offset | data-offset | Object | top, right, bottom, left | `data-offset=\"{'top': 10, 'left': 10}\"` for specific and `offset={{top: 10, left: 10}}` for global |\n| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |\n| multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline |\n| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |\n| html | data-html | Bool | true, false | `

HTML tooltip

\" data-html={true}>

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. |\n| delayHide | data-delay-hide | Number | | `

` or `` |\n| delayShow | data-delay-show | Number | | `

` or `` |\n| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |\n| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |\n| border | data-border | Bool | true, false | Add one pixel white border |\n| textColor | data-text-color | String | e.g. red | Popup text color |\n| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |\n| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |\n| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value |\n| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically |\n| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show |\n| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide |\n| 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 |\n| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false |\n| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true |\n| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true |\n| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div |\n| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false |\n\n### Security Note\n\nThe `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.\n\n#### JSX Note\n\nYou 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}`.\n**Example:**\n\n```jsx\nimport ReactDOMServer from 'react-dom/server';\n[...]\n

I am JSX content)}>\n Hover me\n

\n```\n\n#### Note\n\n1. **data-tip** is necessary, because `` finds the tooltip via this attribute\n2. **data-for** corresponds to the **id** of ``\n3. When using react component as tooltip, you can have many `` in a page but they should have different **id**s\n\n## Static Methods\n\n### ReactTooltip.hide(target)\n\n> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n### ReactTooltip.rebuild()\n\n> Rebinding all tooltips\n\n### ReactTooltip.show(target)\n\n> Show specific tooltip manually, for example:\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n## Troubleshooting\n\n### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))\n\nThe component was designed to set `` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:\n\n1. Place `` outside of the ``\n2. Use `ReactTooltip.rebuild()` when opening the modal\n3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index\n\n> I suggest always putting `` in the Highest level or smart component of Redux, so you might need these static\n> method to control tooltip's behaviour in some situations\n\n### 2. Hide tooltip when getContent returns undefined\n\nWhen you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-\\* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.\n\n```jsx\n

\n { return null }}/>\n```\n\nSame for empty children, if you don't want show the tooltip when the children is empty\n\n```jsx\n

\n{}\n```\n\n### 3. Tooltip not binding to dynamic content\n\nWhen you render `` ahead of dynamic content, and are using `data-for={id}` attributes\non new dynamic content, the tooltip will not register its event listener.\n\nFor example, you render a generic tooltip in the root of your app, then load a list of content async.\nElements in the list use the `data-for={id}` attribute to bind the tooltip on hover.\nSince the tooltip has already scanned for data-tip these new elements will not trigger.\n\nOne workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,\nto allow event wireup.\n\n#### Example\n\n```tsx\n\n \n \n\n```\n\n```tsx\nconst dynamicList = (props) => {\n\nuseEffect(() => {\n ReactTooltip.rebuild();\n });\n\nreturn(\n \n {data.map((item)=> {\n My late bound tooltip triggered data\n });}\n \n);\n};\n\n```\n\n## Article\n\n[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)\n\n## Contributing\n\nWe welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.\n\n## License\n\nMIT\n","readmeFilename":"README.md","gitHead":"cae19cad49adbca8b1efab0c4694133d1616a442","_id":"@codefork/react-tooltip@4.3.0-alpha.5","_nodeVersion":"16.13.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-uC2MpwMIIrvmempFgha0SQTRDsyUEut5xuoNYKXe/zqCzSv8qL5IkDT529eRiLrc1+y9s+hqJTGOETt5tBlaEQ==","shasum":"71c5d7b0193379ba45cfb59f7b46fd3dd436799e","tarball":"https://registry.npmjs.org/@codefork/react-tooltip/-/react-tooltip-4.3.0-alpha.5.tgz","fileCount":22,"unpackedSize":256911,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMbOQJrNJyy7fWYCpc7CQUylokQBJ51/q4cncLmazvkAiEAtgRxZxtbUs7HMiZKAZUbCgfDjR9JoZHtaJ9Ot40SJ+g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiU50QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpe9A//VKwH2NIzEM31qypVlS7YvGxEJ415WYSHoOivGyUnDLFXUAJR\r\nmpCFzifyaOta9LaoOD3Mj5qgcQI1ryt6AUpY/te5OJlEaaFHZjZ8SOHPR3Ay\r\ng+TJX5lHHrq9Taul15IV3IDuWgasgssj2phBP63jzVYZqkbUXJdXhavk+GbM\r\n5fGRwZ66V2O2v7Li95MUlN3EFxrJQ8rg5hHUY4AGPzaj3Xjqek5/iT1n4KnD\r\nO/9UB12mVS97ZbI2uxzDVXvbR5ixuZFNLES4Gsk3Gjo9zi0ucg4JsPEpoIdD\r\nk46mA7mQDb1jQvzd+qlJAwQy7Z3e60IPIg9QnPEqGKZnsRmMQfR5isBtGJHw\r\nTC1P+LW7JxT0GiW+UQ58GMGoUEH9hgnSAXoFg/UlGz3P5kyBFh6kUDPK2IlD\r\nnCHenoZq/fDA+rKodUz6v0mavoyZYIeU/DEMzGApEGY/94QrGIydNhECI8dQ\r\nvj5E/PhttLSA3l9XVLk7q3cBZytGhUy7X4YNjKyep9zEFMobctq+DCV6Bn8D\r\ntRlaqSFjTP6OI7ujLfKdfSUTqcNxzZVF37f7vIN0/2x/61TnJcmxjnHgVU+H\r\nXsENt5ajmXWdi4jK5zSKIOqjVP3P09B94Eusn9OLr9dsCUgGzpzi28wA2I62\r\ntYKon8cBpIX6S/l8DvlmsXU7hpnzcCa19os=\r\n=Ubak\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"finchy","email":"jason.finch@gmail.com"},"directories":{},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tooltip_4.3.0-alpha.5_1649646864642_0.7099388089488647"},"_hasShrinkwrap":false},"4.3.0-alpha.6":{"name":"@codefork/react-tooltip","version":"4.3.0-alpha.6","description":"react tooltip component","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"npm":">=8"},"scripts":{"pretest":"npm-run-all pretty:quick lint:staged","eslint:fix":"npx eslint ./src/** --ignore-path ./.eslintignore --fix","pretty:quick":"pretty-quick --staged","lint:staged":"lint-staged","test":"jest","clean":"rimraf dist","copyfiles":"cpy ./src/**/*.scss ./out-tsc/","copy:types":"cpy './out-tsc/**/*.d.ts' '!./out-tsc/**/__tests__/*' dist/ ","build:rollup":"tsc && yarn copyfiles && yarn rollup -c","build":"npm-run-all clean build:rollup copy:types","build:watch":"rollup -c -w","start":"npm-run-all clean build:watch","publish:gh-pages":"cd example && yarn publish","github-changes":"github-changes -o CodeForked -r react-tooltip -a --only-pulls --use-commit-body","cm":"git cz","semantic-release":"semantic-release","prepare":"husky install","postinstall":"husky install","prepack":"pinst --disable","postpack":"pinst --enable"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"publishConfig":{"access":"public"},"keywords":["react","react-component","tooltip","react-tooltip"],"author":{"name":"wwayne"},"contributors":[{"name":"jafin"}],"license":"MIT","bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"homepage":"https://github.com/CodeForked/react-tooltip#readme","browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"dependencies":{"prop-types":"^15.8.1","uuid":"^8.3.2"},"devDependencies":{"@babel/cli":"^7.17.6","@babel/core":"^7.17.8","@babel/eslint-parser":"^7.17.0","@babel/plugin-proposal-class-properties":"^7.16.7","@babel/plugin-proposal-decorators":"^7.17.8","@babel/plugin-proposal-json-strings":"^7.16.7","@babel/plugin-proposal-object-rest-spread":"^7.17.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/register":"^7.17.7","@commitlint/cli":"16.2.3","@commitlint/config-conventional":"16.2.1","@commitlint/travis-cli":"16.2.3","@open-wc/building-rollup":"^2.0.1","@rbnlffl/rollup-plugin-eslint":"^3.0.0","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^21.0.3","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^13.1.3","@rollup/plugin-typescript":"^8.3.1","@rollup/plugin-url":"^6.1.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.2.1","@testing-library/jest-dom":"^5.16.3","@testing-library/react":"12.1.4","@types/jest":"^27.4.1","@types/node":"^17.0.23","@types/prop-types":"^15.7.4","@types/react":"^17.0.43","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","babel-loader":"8.2.4","babelify":"10.0.0","browserify":"17.0.0","browserify-shim":"^3.8.14","chai":"^4.3.6","chai-spies":"^1.0.0","commitizen":"4.2.4","concurrently":"7.1.0","core-js":"^3.21.1","cpy":"^9.0.1","cpy-cli":"4.1.0","cross-env":"^7.0.3","cz-conventional-changelog":"^3.3.0","deepmerge":"^4.2.2","eslint":"^8.12.0","eslint-config-prettier":"8.5.0","eslint-config-standard":"14.1.1","eslint-config-standard-react":"11.0.1","eslint-plugin-import":"^2.25.4","eslint-plugin-node":"11.1.0","eslint-plugin-prettier":"4.0.0","eslint-plugin-promise":"6.0.0","eslint-plugin-react":"^7.29.4","eslint-plugin-react-hooks":"^4.4.0","gh-pages":"3.2.3","github-changes":"2.0.3","http-server":"14.1.0","husky":"^7.0.4","identity-obj-proxy":"^3.0.0","ignore-styles":"5.0.1","jest":"^27.5.1","jest-scss-transform":"^1.0.1","jsdom":"19.0.0","lint-staged":"12.3.7","mocha-each":"^2.0.1","npm-run-all":"^4.1.5","pinst":"^3.0.0","postcss":"^8.4.12","postcss-nested":"^5.0.6","postcss-simple-vars":"6.0.3","prettier":"^2.6.2","pretty-quick":"3.1.3","react":"17.0.2","react-addons-test-utils":"^15.6.2","react-dom":"17.0.2","react-test-renderer":"17.0.2","rimraf":"^3.0.2","rollup":"2.66.1","rollup-plugin-css":"^1.0.10","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"4.0.2","rollup-plugin-sass":"^1.2.12","rollup-plugin-stylelint":"1.0.0","rollup-plugin-terser":"^7.0.2","sass":"^1.49.11","semantic-release":"^19.0.2","snazzy":"9.0.0","standard":"16.0.4","stylelint":"^14.6.1","stylelint-config-standard":"25.0.0","stylelint-config-standard-scss":"^3.0.0","ts-jest":"^27.1.4","ts-node":"^10.7.0","typescript":"^4.6.3","uglify-js":"^3.15.3","watchify":"4.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,ts}":"yarn eslint:fix"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"packageManager":"yarn@3.2.0","readme":"# @codefork/react-tooltip\n\n[![Version](https://img.shields.io/npm/v/@codefork/react-tooltip.svg)](https://www.npmjs.com/package/@codefork/react-tooltip)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![npm download][download-image]][download-url]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\n\n[download-image]: https://img.shields.io/npm/dm/@codefork/react-tooltip.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@codefork/react-tooltip\n\n## Overview\n\nThis is a fork of the [react-tooltip](https://github.com/wwayne/react-tooltip) from Wang Zixiao (wwayne).\n\nUnless there is something specific you desire I would urge you to prefer the original package over this one.\n\nNotable changes from the original package:-\n\n- Source coverted to typescript\n- Fix issue with React 18 strictMode\n\n## Demo\n\n\n\nExamples on the [Github Page](https://codeforked.github.io/react-tooltip/).\n\n## Maintainers\n\n### Forked Repo\n\n[jafin](https://github.com/jafin)\n\n### Original Repo\n\n[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.\n\n[roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.\n\n[huumanoid](https://github.com/huumanoid) (inactive)\n\nWe would gladly accept a new maintainer to help out!\n\n## Installation\n\n```sh\nnpm install @codeforked/react-tooltip\n```\n\nor\n\n```sh\nyarn add @codeforked/react-tooltip\n```\n\n## Usage\n\n### Using NPM\n\n1 . Require react-tooltip after installation\n\n```js\nimport ReactTooltip from 'react-tooltip';\n```\n\n2 . Add data-tip = \"your placeholder\" to your element\n\n```jsx\n

Tooltip

\n```\n\n3 . Include react-tooltip component\n\n```jsx\n\n```\n\n### Standalone\n\nYou can import `node_modules/@codefork/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.\n\n## Options\n\nNotes:\n\n- The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults\n- The option you set on `` component will be implemented on every tooltip in a same page: ``\n- The option you set on a specific element, for example: `` will only affect this specific tooltip\n\n| Global | Specific | Type | Values | Description |\n| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| place | data-place | String | top, right, bottom, left | placement |\n| type | data-type | String | dark, success, warning, error, info, light | theme |\n| effect | data-effect | String | float, solid | behaviour of tooltip |\n| event | data-event | String | e.g. click | custom event to trigger tooltip |\n| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |\n| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |\n| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |\n| offset | data-offset | Object | top, right, bottom, left | `data-offset=\"{'top': 10, 'left': 10}\"` for specific and `offset={{top: 10, left: 10}}` for global |\n| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |\n| multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline |\n| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |\n| html | data-html | Bool | true, false | `

HTML tooltip

\" data-html={true}>

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. |\n| delayHide | data-delay-hide | Number | | `

` or `` |\n| delayShow | data-delay-show | Number | | `

` or `` |\n| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |\n| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |\n| border | data-border | Bool | true, false | Add one pixel white border |\n| textColor | data-text-color | String | e.g. red | Popup text color |\n| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |\n| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |\n| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value |\n| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically |\n| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show |\n| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide |\n| 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 |\n| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false |\n| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true |\n| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true |\n| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div |\n| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false |\n\n### Security Note\n\nThe `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.\n\n#### JSX Note\n\nYou 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}`.\n**Example:**\n\n```jsx\nimport ReactDOMServer from 'react-dom/server';\n[...]\n

I am JSX content)}>\n Hover me\n

\n```\n\n#### Note\n\n1. **data-tip** is necessary, because `` finds the tooltip via this attribute\n2. **data-for** corresponds to the **id** of ``\n3. When using react component as tooltip, you can have many `` in a page but they should have different **id**s\n\n## Static Methods\n\n### ReactTooltip.hide(target)\n\n> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n### ReactTooltip.rebuild()\n\n> Rebinding all tooltips\n\n### ReactTooltip.show(target)\n\n> Show specific tooltip manually, for example:\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n## Troubleshooting\n\n### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))\n\nThe component was designed to set `` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:\n\n1. Place `` outside of the ``\n2. Use `ReactTooltip.rebuild()` when opening the modal\n3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index\n\n> I suggest always putting `` in the Highest level or smart component of Redux, so you might need these static\n> method to control tooltip's behaviour in some situations\n\n### 2. Hide tooltip when getContent returns undefined\n\nWhen you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-\\* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.\n\n```jsx\n

\n { return null }}/>\n```\n\nSame for empty children, if you don't want show the tooltip when the children is empty\n\n```jsx\n

\n{}\n```\n\n### 3. Tooltip not binding to dynamic content\n\nWhen you render `` ahead of dynamic content, and are using `data-for={id}` attributes\non new dynamic content, the tooltip will not register its event listener.\n\nFor example, you render a generic tooltip in the root of your app, then load a list of content async.\nElements in the list use the `data-for={id}` attribute to bind the tooltip on hover.\nSince the tooltip has already scanned for data-tip these new elements will not trigger.\n\nOne workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,\nto allow event wireup.\n\n#### Example\n\n```tsx\n\n \n \n\n```\n\n```tsx\nconst dynamicList = (props) => {\n\nuseEffect(() => {\n ReactTooltip.rebuild();\n });\n\nreturn(\n \n {data.map((item)=> {\n My late bound tooltip triggered data\n });}\n \n);\n};\n\n```\n\n## Article\n\n[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)\n\n## Contributing\n\nWe welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.\n\n## License\n\nMIT\n","readmeFilename":"README.md","gitHead":"e200cd0abd4513152b9f009111abb47b4b3b692e","_id":"@codefork/react-tooltip@4.3.0-alpha.6","_nodeVersion":"16.13.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-t/tpBgtujiNZumGj2/aj8ee/lzUY+p5Gy8p87Z777JPxhFyidlQJnOPtJrevpOPu682Z6fsrTZsELBjR1k03lw==","shasum":"2ac22702d73c200503d2139146adb68dbd025646","tarball":"https://registry.npmjs.org/@codefork/react-tooltip/-/react-tooltip-4.3.0-alpha.6.tgz","fileCount":23,"unpackedSize":261059,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIED+0QBKBVFjkod5AmA34m70SFD/EsSnI4BXOnmDHqkfAiAg7iyhGEKVfA+7zb2V3BZHdPOno8iArA+yOqIuu7+Syg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicz19ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYQA/+Oj78YDfjCivzXH0Kw9Lu9KA7ZK77QJ6IHwkTZ7T/p77OxgWx\r\nQnnnWmoVYMX3REdlB9J5tOp6qU3TLSYh8Vn9h2FUdz+ByJOl2eUROnBiKtWN\r\nWZbFwm9Lp2V0akTPUPLqFjlqINITYQp6gH/caMSiZyCxLr5Nm5K26m+qEF39\r\n1XIg57hRSEKmHLeEz82EpkZ/SAIXPfEheXZt9pJf7yIHNl0bluurRwh3W4Sp\r\nJz4DtDUmfDApDADxVF4x/694nv/0/1ezf7cu3C7LI7ZcDOmgwWgY7aNab/3s\r\nwa4hfFdhqadY1jHSkxP9vQXGHxwzGmQ9M2+SuEMqzPJwuhOtyShBuDTjg3fM\r\nm+TiNDzDkSPUfJHOZc8APA7NEjvDJfFa3bqfl+Z4BuX8VrcgDWYJyfu2BQig\r\nVnPwy2crv4m7ntDrofp0t6K45Ju0jvELB/9Qu5n6uGolqFQ1uPvY0AGiQRN6\r\nPC794YVV/A7oROlspV8F5Hv9xU1O+Wq29/HtwEiu32W3ocW4EN7+tZGH+f5L\r\nkbsJTL0m5y6PzGRM/00dnzUkXQ0T4SB+Z5NJbaR8Yknh/YtWmSGuJvbp8Hki\r\nMnJ48u9loFQLkApETa4vVhkRGqI4IV4LLayj0Gk+20dH1NwNhQYM62wswbVX\r\nAd+WJbhp/DKGLwAhk5i3JB525I/OWYoJDb4=\r\n=ZaE5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"finchy","email":"jason.finch@gmail.com"},"directories":{},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tooltip_4.3.0-alpha.6_1651719549627_0.3857835595829098"},"_hasShrinkwrap":false},"4.3.0-alpha.7":{"name":"@codefork/react-tooltip","version":"4.3.0-alpha.7","description":"react tooltip component","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"npm":">=8"},"scripts":{"pretest":"npm-run-all pretty:quick lint:staged","eslint:fix":"","eslint:fixOrig":"npx eslint ./src/** --ignore-path ./.eslintignore --fix","pretty:quick":"pretty-quick --staged","lint:staged":"lint-staged","test":"jest","test:esm":"node --experimental-vm-modules node_modules/jest/bin/jest.js","clean":"rimraf dist","copyfiles":"cpy ./src/**/*.scss ./out-tsc/","copy:types":"cpy './out-tsc/**/*.d.ts' '!./out-tsc/**/__tests__/*' dist/ ","build:rollup":"tsc && yarn copyfiles && yarn rollup -c","build":"npm-run-all clean build:rollup copy:types","build:watch":"rollup -c -w","start":"npm-run-all clean build:watch","publish:gh-pages":"cd example && yarn publish","github-changes":"github-changes -o CodeForked -r react-tooltip -a --only-pulls --use-commit-body","cm":"git cz","semantic-release":"semantic-release","prepare":"husky install","postinstall":"husky install","prepack":"pinst --disable","postpack":"pinst --enable"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"publishConfig":{"access":"public"},"keywords":["react","react-component","tooltip","react-tooltip"],"author":{"name":"wwayne"},"contributors":[{"name":"jafin"}],"license":"MIT","bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"homepage":"https://github.com/CodeForked/react-tooltip#readme","browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@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.18.9","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.19.3","@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","@open-wc/building-rollup":"^2.0.2","@rbnlffl/rollup-plugin-eslint":"^4.0.0","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^22.0.2","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^14.1.0","@rollup/plugin-typescript":"^8.5.0","@rollup/plugin-url":"^7.0.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.3.1","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"13.4.0","@types/jest":"^29.1.1","@types/node":"^18.7.23","@types/prop-types":"^15.7.5","@types/react":"^18.0.21","@types/uuid":"^8.3.4","@typescript-eslint/eslint-plugin":"^5.38.1","@typescript-eslint/parser":"^5.38.1","babel-loader":"8.2.5","babelify":"10.0.0","browserify":"17.0.0","browserify-shim":"^3.8.15","chai":"^4.3.6","chai-spies":"^1.0.0","commitizen":"^4.2.5","concurrently":"7.4.0","core-js":"^3.25.3","cpy":"^9.0.1","cpy-cli":"4.2.0","cross-env":"^7.0.3","cz-conventional-changelog":"^3.3.0","deepmerge":"^4.2.2","eslint":"^8.24.0","eslint-config-prettier":"8.5.0","eslint-config-standard":"17.0.0","eslint-plugin-import":"^2.26.0","eslint-plugin-node":"11.1.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-promise":"6.0.1","eslint-plugin-react":"^7.31.8","eslint-plugin-react-hooks":"^4.6.0","gh-pages":"4.0.0","github-changes":"2.0.3","http-server":"14.1.1","husky":"^8.0.1","identity-obj-proxy":"^3.0.0","ignore-styles":"5.0.1","jest":"29.1.2","jest-environment-jsdom":"29.1.2","jest-scss-transform":"^1.0.3","jsdom":"20.0.0","lint-staged":"13.0.3","mocha-each":"^2.0.1","npm-run-all":"^4.1.5","pinst":"^3.0.0","postcss":"^8.4.16","postcss-nested":"^5.0.6","postcss-simple-vars":"7.0.0","prettier":"^2.7.1","pretty-quick":"3.1.3","prop-types":"^15.8.1","react":"18.2.0","react-addons-test-utils":"^15.6.2","react-dom":"18.2.0","react-test-renderer":"18.2.0","rimraf":"^3.0.2","rollup":"^2.79.1","rollup-plugin-css":"^1.0.10","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-terser":"^7.0.2","sass":"^1.55.0","semantic-release":"^19.0.5","snazzy":"9.0.0","standard":"17.0.0","stylelint":"^14.13.0","stylelint-config-standard":"28.0.0","stylelint-config-standard-scss":"^5.0.0","ts-jest":"29.0.3","ts-node":"^10.9.1","typescript":"4.7.4","uglify-js":"^3.17.2","uuid":"^9.0.0","watchify":"4.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,ts}":"yarn eslint:fix"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"packageManager":"yarn@3.2.0","readme":"# @codefork/react-tooltip\n\n[![Version](https://img.shields.io/npm/v/@codefork/react-tooltip.svg)](https://www.npmjs.com/package/@codefork/react-tooltip)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![npm download][download-image]][download-url]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\n\n[download-image]: https://img.shields.io/npm/dm/@codefork/react-tooltip.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@codefork/react-tooltip\n\n## Overview\n\nThis is a fork of the [react-tooltip](https://github.com/wwayne/react-tooltip) from Wang Zixiao (wwayne).\n\nUnless there is something specific you desire I would urge you to prefer the original package over this one.\n\nNotable changes from the original package:-\n\n- Source coverted to typescript\n- Fix issue with React 18 strictMode\n\n## Demo\n\n\n\nExamples on the [Github Page](https://codeforked.github.io/react-tooltip/).\n\n## Maintainers\n\n### Forked Repo\n\n[jafin](https://github.com/jafin)\n\n### Original Repo\n\n[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.\n\n[roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.\n\n[huumanoid](https://github.com/huumanoid) (inactive)\n\nWe would gladly accept a new maintainer to help out!\n\n## Installation\n\n```sh\nnpm install @codeforked/react-tooltip\n```\n\nor\n\n```sh\nyarn add @codeforked/react-tooltip\n```\n\n## Usage\n\n### Using NPM\n\n1 . Require react-tooltip after installation\n\n```js\nimport ReactTooltip from 'react-tooltip';\n```\n\n2 . Add data-tip = \"your placeholder\" to your element\n\n```jsx\n

Tooltip

\n```\n\n3 . Include react-tooltip component\n\n```jsx\n\n```\n\n### Standalone\n\nYou can import `node_modules/@codefork/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.\n\n## Options\n\nNotes:\n\n- The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults\n- The option you set on `` component will be implemented on every tooltip in a same page: ``\n- The option you set on a specific element, for example: `` will only affect this specific tooltip\n\n| Global | Specific | Type | Values | Description |\n| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| place | data-place | String | top, right, bottom, left | placement |\n| type | data-type | String | dark, success, warning, error, info, light | theme |\n| effect | data-effect | String | float, solid | behaviour of tooltip |\n| event | data-event | String | e.g. click | custom event to trigger tooltip |\n| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |\n| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |\n| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |\n| offset | data-offset | Object | top, right, bottom, left | `data-offset=\"{'top': 10, 'left': 10}\"` for specific and `offset={{top: 10, left: 10}}` for global |\n| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |\n| multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline |\n| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |\n| html | data-html | Bool | true, false | `

HTML tooltip

\" data-html={true}>

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. |\n| delayHide | data-delay-hide | Number | | `

` or `` |\n| delayShow | data-delay-show | Number | | `

` or `` |\n| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |\n| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |\n| border | data-border | Bool | true, false | Add one pixel white border |\n| textColor | data-text-color | String | e.g. red | Popup text color |\n| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |\n| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |\n| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value |\n| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically |\n| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show |\n| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide |\n| 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 |\n| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false |\n| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true |\n| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true |\n| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div |\n| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false |\n\n### Security Note\n\nThe `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.\n\n#### JSX Note\n\nYou 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}`.\n**Example:**\n\n```jsx\nimport ReactDOMServer from 'react-dom/server';\n[...]\n

I am JSX content)}>\n Hover me\n

\n```\n\n#### Note\n\n1. **data-tip** is necessary, because `` finds the tooltip via this attribute\n2. **data-for** corresponds to the **id** of ``\n3. When using react component as tooltip, you can have many `` in a page but they should have different **id**s\n\n## Static Methods\n\n### ReactTooltip.hide(target)\n\n> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n### ReactTooltip.rebuild()\n\n> Rebinding all tooltips\n\n### ReactTooltip.show(target)\n\n> Show specific tooltip manually, for example:\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n## Troubleshooting\n\n### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))\n\nThe component was designed to set `` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:\n\n1. Place `` outside of the ``\n2. Use `ReactTooltip.rebuild()` when opening the modal\n3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index\n\n> I suggest always putting `` in the Highest level or smart component of Redux, so you might need these static\n> method to control tooltip's behaviour in some situations\n\n### 2. Hide tooltip when getContent returns undefined\n\nWhen you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-\\* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.\n\n```jsx\n

\n { return null }}/>\n```\n\nSame for empty children, if you don't want show the tooltip when the children is empty\n\n```jsx\n

\n{}\n```\n\n### 3. Tooltip not binding to dynamic content\n\nWhen you render `` ahead of dynamic content, and are using `data-for={id}` attributes\non new dynamic content, the tooltip will not register its event listener.\n\nFor example, you render a generic tooltip in the root of your app, then load a list of content async.\nElements in the list use the `data-for={id}` attribute to bind the tooltip on hover.\nSince the tooltip has already scanned for data-tip these new elements will not trigger.\n\nOne workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,\nto allow event wireup.\n\n#### Example\n\n```tsx\n\n \n \n\n```\n\n```tsx\nconst dynamicList = (props) => {\n\nuseEffect(() => {\n ReactTooltip.rebuild();\n });\n\nreturn(\n \n {data.map((item)=> {\n My late bound tooltip triggered data\n });}\n \n);\n};\n\n```\n\n## Building\n\n### Troubleshooting\n\nRunning yarn run build on windows 11 may produce an error\n\n```\nSyntaxError: Cannot use import statement outside a module.\n```\n\nRunning under wsl2 shell or linux appears fine.\nFollow this issue (as it may be related) https://github.com/rollup/rollup/issues/4446\n\n@rollup/plugin-commonjs@22 triggers an error on build\n\n```\n[!] (plugin eslint) Error: Could not load /src/index.ts?commonjs-entry: No files matching '/src/index.ts?commonjs-entry' were found.\n```\n\nReverting to 21.1 resolves error.\n\n## Article\n\n[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)\n\n## Contributing\n\nWe welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.\n\n## License\n\nMIT\n","readmeFilename":"README.md","gitHead":"d9461c9d19766985287b7d498aa7b2ad26bdd6fd","_id":"@codefork/react-tooltip@4.3.0-alpha.7","_nodeVersion":"16.13.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-To/rvTZWE/WSw2twDLn8YcLI0mNJGVT/SNEcHNxIce02vWq1bcySEeooxB9dka5PrhZmD12xcayr47b7n8c15g==","shasum":"da2ebf01191f52a7a455ceb60ca98667aa5407c8","tarball":"https://registry.npmjs.org/@codefork/react-tooltip/-/react-tooltip-4.3.0-alpha.7.tgz","fileCount":43,"unpackedSize":272136,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhmvaVPTFl10by9+ZETb6Iw16OjdZn8M957a92b5B8YAiA6MkmicM8ASSA8IDCaTaSniBMBcNeEGuJPYDyItPIlHg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNpvaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEig/+IJIDMYfSVaAfLNGBJ1YfXwfHKQqXX/FyKE1GB1gDOj0rqUJk\r\nbhtOHmTA6bb/Phf958nWUQjcWkWLZX800VYI9JCeSA77kkQdAYQZK8evjKDs\r\n9p8nG2Doe/EtAv3jPRmdpcbFuABPLxuhCHliTI5H714Q4IYSsaW+E00F5VgE\r\nJUkTm3HOkaTqpd6Sg9yDaJIeWAkRZ1O5Eo/FsMohvkrMpr5iqF2X1pZ8MQ81\r\nwPsEw2+WCrRgtgW5NeX4Hpy1jM9doHDPMyXCuzvZVbo+RCfQhbmTM2IAB9CL\r\nYFuyC2O6B6JppTE5Jz3KJPb+K/R6jMsA2UeIGYrxBwbjHnqqKdR5KC42io8/\r\nSdZURxzkb7hjJT+0Z+HeiZZ6uisSKEEoy+d7tiIpr6wNVvVpKoQ1wYSFb9FN\r\n7n0ln9NPt9QM+0JkTsD7HnAGBJr5U54FLk4gCzo/HAvAIXu36DBniz16A6Ye\r\nE2QjuoD1agtviPDSsPOtObyW8cV6ceTNPiX44yPajo1/J08qKdR78dJc1odU\r\nzZO4OKd3x1Vb2OXlUhoTLkGKRl59bjeUuqOmz9iNnKVCa82DdUAD+Xc+nvjP\r\nIR7yBJ1hYHFGUN7VSLgqoQQ4OsdHigRfMFg2/YMvxu+xefiCN+ph2cVi0zOt\r\nvDElDrgpNk6/gH4zT6Cv6cEuINdrrOKjaWs=\r\n=k760\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"finchy","email":"jason.finch@gmail.com"},"directories":{},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tooltip_4.3.0-alpha.7_1664523226453_0.3090845652558041"},"_hasShrinkwrap":false},"4.3.0-alpha.8":{"name":"@codefork/react-tooltip","version":"4.3.0-alpha.8","description":"react tooltip component","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"npm":">=8"},"scripts":{"pretest":"npm-run-all pretty:quick lint:staged","eslint:fix":"","eslint:fixOrig":"npx eslint ./src/** --ignore-path ./.eslintignore --fix","pretty:quick":"pretty-quick --staged","lint:staged":"lint-staged","test":"jest","test:esm":"node --experimental-vm-modules node_modules/jest/bin/jest.js","clean":"rimraf dist","copyfiles":"cpy ./src/**/*.scss ./out-tsc/","copy:types":"cpy './out-tsc/**/*.d.ts' '!./out-tsc/**/__tests__/*' dist/ ","build:rollup":"tsc && yarn copyfiles && yarn rollup -c","build":"npm-run-all clean build:rollup copy:types","build:watch":"rollup -c -w","start":"npm-run-all clean build:watch","publish:gh-pages":"cd example && yarn publish","github-changes":"github-changes -o CodeForked -r react-tooltip -a --only-pulls --use-commit-body","cm":"git cz","semantic-release":"semantic-release","prepare":"husky install","postinstall":"husky install","prepack":"pinst --disable","postpack":"pinst --enable"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"publishConfig":{"access":"public"},"keywords":["react","react-component","tooltip","react-tooltip"],"author":{"name":"wwayne"},"contributors":[{"name":"jafin"}],"license":"MIT","bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"homepage":"https://github.com/CodeForked/react-tooltip#readme","browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@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.18.9","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.19.3","@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","@open-wc/building-rollup":"^2.0.2","@rbnlffl/rollup-plugin-eslint":"^4.0.0","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^22.0.2","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^14.1.0","@rollup/plugin-typescript":"^8.5.0","@rollup/plugin-url":"^7.0.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/jest-dom":"^5.16.5","@testing-library/react":"13.4.0","@types/jest":"^29.1.1","@types/node":"^18.8.2","@types/prop-types":"^15.7.5","@types/react":"^18.0.21","@types/uuid":"^8.3.4","@typescript-eslint/eslint-plugin":"^5.39.0","@typescript-eslint/parser":"^5.39.0","babel-loader":"8.2.5","babelify":"10.0.0","browserify":"17.0.0","browserify-shim":"^3.8.15","chai":"^4.3.6","chai-spies":"^1.0.0","commitizen":"^4.2.5","concurrently":"7.4.0","core-js":"^3.25.5","cpy":"^9.0.1","cpy-cli":"4.2.0","cross-env":"^7.0.3","cz-conventional-changelog":"^3.3.0","deepmerge":"^4.2.2","eslint":"^8.24.0","eslint-config-prettier":"8.5.0","eslint-config-standard":"17.0.0","eslint-plugin-import":"^2.26.0","eslint-plugin-node":"11.1.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-promise":"6.0.1","eslint-plugin-react":"^7.31.8","eslint-plugin-react-hooks":"^4.6.0","gh-pages":"4.0.0","github-changes":"2.0.3","http-server":"14.1.1","husky":"^8.0.1","identity-obj-proxy":"^3.0.0","ignore-styles":"5.0.1","jest":"29.1.2","jest-environment-jsdom":"29.1.2","jest-scss-transform":"^1.0.3","jsdom":"^20.0.1","lint-staged":"13.0.3","mocha-each":"^2.0.1","npm-run-all":"^4.1.5","pinst":"^3.0.0","postcss":"^8.4.17","postcss-nested":"^5.0.6","postcss-simple-vars":"7.0.0","prettier":"^2.7.1","pretty-quick":"3.1.3","prop-types":"^15.8.1","react":"18.2.0","react-addons-test-utils":"^15.6.2","react-dom":"18.2.0","react-test-renderer":"18.2.0","rimraf":"^3.0.2","rollup":"^2.79.1","rollup-plugin-css":"^1.0.10","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-terser":"^7.0.2","sass":"^1.55.0","semantic-release":"^19.0.5","snazzy":"9.0.0","standard":"17.0.0","stylelint":"^14.13.0","stylelint-config-standard":"28.0.0","stylelint-config-standard-scss":"^5.0.0","ts-jest":"29.0.3","ts-node":"^10.9.1","typescript":"4.7.4","uglify-js":"^3.17.2","uuid":"^9.0.0","watchify":"4.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,ts}":"yarn eslint:fix"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"packageManager":"yarn@3.2.0","readme":"# @codefork/react-tooltip\n\n[![Version](https://img.shields.io/npm/v/@codefork/react-tooltip.svg)](https://www.npmjs.com/package/@codefork/react-tooltip)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![npm download][download-image]][download-url]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\n\n[download-image]: https://img.shields.io/npm/dm/@codefork/react-tooltip.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@codefork/react-tooltip\n\n## Overview\n\nThis is a fork of the [react-tooltip](https://github.com/wwayne/react-tooltip) from Wang Zixiao (wwayne).\n\nUnless there is something specific you desire I would urge you to prefer the original package over this one.\n\nNotable changes from the original package:-\n\n- Source coverted to typescript\n- Fix issue with React 18 strictMode\n\n## Demo\n\n\n\nExamples on the [Github Page](https://codeforked.github.io/react-tooltip/).\n\n## Maintainers\n\n### Forked Repo\n\n[jafin](https://github.com/jafin)\n\n### Original Repo\n\n[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.\n\n[roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.\n\n[huumanoid](https://github.com/huumanoid) (inactive)\n\nWe would gladly accept a new maintainer to help out!\n\n## Installation\n\n```sh\nnpm install @codeforked/react-tooltip\n```\n\nor\n\n```sh\nyarn add @codeforked/react-tooltip\n```\n\n## Usage\n\n### Using NPM\n\n1 . Require react-tooltip after installation\n\n```js\nimport ReactTooltip from 'react-tooltip';\n```\n\n2 . Add data-tip = \"your placeholder\" to your element\n\n```jsx\n

Tooltip

\n```\n\n3 . Include react-tooltip component\n\n```jsx\n\n```\n\n### Standalone\n\nYou can import `node_modules/@codefork/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.\n\n## Options\n\nNotes:\n\n- The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults\n- The option you set on `` component will be implemented on every tooltip in a same page: ``\n- The option you set on a specific element, for example: `` will only affect this specific tooltip\n\n| Global | Specific | Type | Values | Description |\n| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| place | data-place | String | top, right, bottom, left | placement |\n| type | data-type | String | dark, success, warning, error, info, light | theme |\n| effect | data-effect | String | float, solid | behaviour of tooltip |\n| event | data-event | String | e.g. click | custom event to trigger tooltip |\n| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |\n| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |\n| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |\n| offset | data-offset | Object | top, right, bottom, left | `data-offset=\"{'top': 10, 'left': 10}\"` for specific and `offset={{top: 10, left: 10}}` for global |\n| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |\n| multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline |\n| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |\n| html | data-html | Bool | true, false | `

HTML tooltip

\" data-html={true}>

` or ``, but see [Security Note](#security-note) below.
When using JSX, see [this note](#jsx-note) below. |\n| delayHide | data-delay-hide | Number | | `

` or `` |\n| delayShow | data-delay-show | Number | | `

` or `` |\n| delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |\n| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |\n| border | data-border | Bool | true, false | Add one pixel white border |\n| textColor | data-text-color | String | e.g. red | Popup text color |\n| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |\n| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |\n| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value |\n| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically |\n| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show |\n| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide |\n| 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 |\n| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false |\n| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true |\n| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true |\n| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div |\n| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false |\n\n### Security Note\n\nThe `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.\n\n#### JSX Note\n\nYou 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}`.\n**Example:**\n\n```jsx\nimport ReactDOMServer from 'react-dom/server';\n[...]\n

I am JSX content)}>\n Hover me\n

\n```\n\n#### Note\n\n1. **data-tip** is necessary, because `` finds the tooltip via this attribute\n2. **data-for** corresponds to the **id** of ``\n3. When using react component as tooltip, you can have many `` in a page but they should have different **id**s\n\n## Static Methods\n\n### ReactTooltip.hide(target)\n\n> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n### ReactTooltip.rebuild()\n\n> Rebinding all tooltips\n\n### ReactTooltip.show(target)\n\n> Show specific tooltip manually, for example:\n\n```jsx\nimport ReactTooltip from 'react-tooltip'\n\n

this.fooRef = ref} data-tip='tooltip'>

\n\n\n```\n\n## Troubleshooting\n\n### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))\n\nThe component was designed to set `` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:\n\n1. Place `` outside of the ``\n2. Use `ReactTooltip.rebuild()` when opening the modal\n3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index\n\n> I suggest always putting `` in the Highest level or smart component of Redux, so you might need these static\n> method to control tooltip's behaviour in some situations\n\n### 2. Hide tooltip when getContent returns undefined\n\nWhen you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-\\* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.\n\n```jsx\n

\n { return null }}/>\n```\n\nSame for empty children, if you don't want show the tooltip when the children is empty\n\n```jsx\n

\n{}\n```\n\n### 3. Tooltip not binding to dynamic content\n\nWhen you render `` ahead of dynamic content, and are using `data-for={id}` attributes\non new dynamic content, the tooltip will not register its event listener.\n\nFor example, you render a generic tooltip in the root of your app, then load a list of content async.\nElements in the list use the `data-for={id}` attribute to bind the tooltip on hover.\nSince the tooltip has already scanned for data-tip these new elements will not trigger.\n\nOne workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,\nto allow event wireup.\n\n#### Example\n\n```tsx\n\n \n \n\n```\n\n```tsx\nconst dynamicList = (props) => {\n\nuseEffect(() => {\n ReactTooltip.rebuild();\n });\n\nreturn(\n \n {data.map((item)=> {\n My late bound tooltip triggered data\n });}\n \n);\n};\n\n```\n\n## Building\n\n### Troubleshooting\n\nRunning yarn run build on windows 11 may produce an error\n\n```\nSyntaxError: Cannot use import statement outside a module.\n```\n\nRunning under wsl2 shell or linux appears fine.\nFollow this issue (as it may be related) https://github.com/rollup/rollup/issues/4446\n\n@rollup/plugin-commonjs@22 triggers an error on build\n\n```\n[!] (plugin eslint) Error: Could not load /src/index.ts?commonjs-entry: No files matching '/src/index.ts?commonjs-entry' were found.\n```\n\nReverting to 21.1 resolves error.\n\n## Article\n\n[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)\n\n## Contributing\n\nWe welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.\n\n## License\n\nMIT\n","readmeFilename":"README.md","gitHead":"c613258c53f4179e95f7b4a961f4f429d0a0d1ea","_id":"@codefork/react-tooltip@4.3.0-alpha.8","_nodeVersion":"16.13.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-E5p0PYniQ5bSPRMtlnCNh2pNgUstuTXsN3jrV6P0cz45yRpNvMVqvA8qz1NMyVfvANRgHc25sJuLH+UJrw+nIA==","shasum":"c31ec28bec78ee22dda1844044c3f81eeeb649c5","tarball":"https://registry.npmjs.org/@codefork/react-tooltip/-/react-tooltip-4.3.0-alpha.8.tgz","fileCount":43,"unpackedSize":271206,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGV7tcAzXb8Zj3o08sTboz4cAZEf0BvWCMuCSmxJWGX9AiAVJCirWrd3dqolQs4PzAeCgYe/m4tgUVpaTRQiek1nJg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPLj5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdoRAAl1mpvyW76UHJKaMlYu1QYx5yBB9B7zfFXBmlFH30SCzJQMK5\r\nibTT7yIQHbwkBbDYRk50K3wA7MsVi70Gwzszbw/wZWYsn+N/30vxO813aTaT\r\n9QguHz2DJ9GaN6/IgR/hOe9/V03f5OhS4cqVjOFNO9F6Hq3RXeOfbB9dqBNf\r\nD9teGGjgvvXs8QWd9HjhDWCX1ErC7rCn1crZOq/ObaQW7LxRfS11PCUVXF8Z\r\nzD3sSFmL4XxNgVvnzf559rpCGv7vM4QMzWJH9kbwuHDWtzGrI/kbpTT3NZSF\r\nm+WdVjJIbZC425ilhHkZLaBWs31ZLHwj2IGK1is3Ql1UAdnTbBMZvGSzk+2R\r\nz+9w8x8xcFXghWY5oEEoL8kk8sHgyfQEtxIfkO6wyVBqfQQcmXVvrf+VmnwV\r\nqBN+harZYu3ZILKoXecUMPMyGCRPF27pnc1DIdO0uocOClx3HOlkAa1jZbLQ\r\nGzkKhIWIHiO3m5g+IXY6kwojf4ZE3NYRvn2BbHiiK2Zo7brqQNHZNDs75qvk\r\nRbP76W905cKcDPZJ2ERDCrrZgAQ486Vfo0V71qL2mEodbjkeIXjanSW9KYr5\r\natP3qMh+t/FwErfOiKFIX/BpC5ltXBbrpr9gUop00ldGoUfa2XHdb/D1rceJ\r\ntfN6pRuO5P7/RzpZXKmJtletLl4Sohire0I=\r\n=b5ud\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"finchy","email":"jason.finch@gmail.com"},"directories":{},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tooltip_4.3.0-alpha.8_1664923897621_0.011205717198239373"},"_hasShrinkwrap":false}},"maintainers":[{"name":"finchy","email":"jason.finch@gmail.com"}],"description":"react tooltip component","homepage":"https://github.com/CodeForked/react-tooltip#readme","keywords":["react","react-component","tooltip","react-tooltip"],"repository":{"type":"git","url":"git+https://github.com/CodeForked/react-tooltip.git"},"contributors":[{"name":"jafin"}],"author":{"name":"wwayne"},"bugs":{"url":"https://github.com/CodeForked/react-tooltip/issues"},"license":"MIT","readme":"","readmeFilename":""}