{"_id":"@a.kosheverov_temp_org/react-popper-tooltip","_rev":"2-cbabca4b6ead04ec12eb2da2eae35a25","name":"@a.kosheverov_temp_org/react-popper-tooltip","dist-tags":{"latest":"2.10.2"},"versions":{"2.10.1":{"name":"@a.kosheverov_temp_org/react-popper-tooltip","version":"2.10.1","description":"React tooltip library built around react-popper","homepage":"https://react-popper-tooltip.netlify.com","repository":{"type":"git","url":"git+https://github.com/a.kosheverov/react-popper-tooltip.git"},"main":"dist/cjs/react-popper-tooltip.js","module":"dist/esm/react-popper-tooltip.js","style":"dist/styles.css","typings":"dist/index.d.ts","sideEffects":["*.css"],"scripts":{"build":"rm -rf dist && rollup -c && cp src/styles.css dist && yarn tsc && rm -rf compiled","prepublishOnly":"yarn typecheck && yarn lint && yarn build && yarn test","prettier":"prettier --write src/**/*.{ts,tsx}","docs":"docz dev","docs:build":"docz build","typecheck":"tsc --noEmit","lint":"eslint src/**/*.{ts,tsx}","test":"jest"},"husky":{"hooks":{"pre-commit":"yarn typecheck && yarn build && yarn test && lint-staged"}},"lint-staged":{"src/**/*.(ts|tsx)":["prettier --write","yarn lint --fix"],"*":["git add"]},"keywords":["react","tooltip","popover","overlay","react-tooltip","react-popper"],"author":{"name":"Mohsin Ul Haq","email":"mohsinulhaq01@gmail.com"},"license":"MIT","peerDependencies":{"react":"^16.6.0","react-dom":"^16.6.0"},"dependencies":{"@babel/runtime":"^7.8.7","react-popper":"^1.3.7"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.8.7","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-runtime":"^7.8.3","@babel/preset-env":"^7.8.7","@babel/preset-react":"^7.8.3","@babel/preset-typescript":"^7.8.3","@testing-library/react":"^10.0.1","@types/jest":"^25.1.4","@types/react":"^16.9.23","@types/react-dom":"^16.9.5","@typescript-eslint/eslint-plugin":"^2.24.0","@typescript-eslint/parser":"^2.24.0","docz":"^2.2.0","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.19.0","husky":"^4.2.3","jest":"^25.1.0","lint-staged":"^10.0.8","prettier":"^1.19.1","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^2.0.6","rollup-plugin-babel":"^4.4.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-size-snapshot":"^0.11.0","typescript":"^3.8.3"},"gitHead":"28f5a2b1440ae980e4ef7bd853ce5fa60b7f8718","bugs":{"url":"https://github.com/a.kosheverov/react-popper-tooltip/issues"},"_id":"@a.kosheverov_temp_org/react-popper-tooltip@2.10.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"a.kosheverov","email":"feadakin@gmail.com"},"dist":{"integrity":"sha512-NRpa2QIMuHZXhe5OVZPD4C1+MqTrCWm0QANBuklhVmyr+gj7DhrsKrh5VZy5yj9PftSGtZsGDOaQs4tUPE+Zhw==","shasum":"f91a90b577afb56bd3fd1fab0c92a287361ab9af","tarball":"https://registry.npmjs.org/@a.kosheverov_temp_org/react-popper-tooltip/-/react-popper-tooltip-2.10.1.tgz","fileCount":13,"unpackedSize":99554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefgMLCRA9TVsSAnZWagAAdOQQAIYJy3WEP1Iv/YHpDBhG\nRVaG8lKpSztDm6/mv6mtZMfvHzCKor4LpZ9QHerwqmVyiP9YZDx8QsGKV9NJ\nBY5sTsyqyhN9roK05Hm/znG/C5uw4E0Cgp7ctrs7j+9jz6nuY3V+UlGR7EmQ\nrZddI29VrSwrWs3UdD1vXsBrDHkWW11GqLG51CHv1cH9K9fW+lbFR4/jj4Fp\nrdsnlwHzQbkVial4NmK/vheo926px2IOj3KpgsXLHQ6Xoax15jjDzmb+uVfo\nx/OlDGWgKlDjXnB+s99gTFh2otGN/e/wDUDPiYUgvgrK+ZXxi736JpXQBvhv\n2PZ/dPuuPmHS81K9/nYH5nicxAkWEiW9Zh6Uv2KFlzFtT7YFIZM8ZJtIstQE\nQy6ihsTx+50tpgKQ03sPYyySzSwe+NG7nHj3vaS5ByLyG62XCVuW8pa+QHSA\nkeHA+aDILcr2oqMf4rhNw0uLd4dP8iaUqCHoRwYdJgwpZXqsJuSV7EQVv9X2\n2EbfZ4E+UcaL+90h5UMo3fDwkWG1aKtbmJIQRGGinAENbg+IXULR44/TybXB\n+pLRm/MBY4d3DHsmyanA28i4NOmG7SH+S/2MtdwR+H8tFJks/U8lGhKPAXE8\nGs101F5IGV7bLRfbJ8SPEChuMhSv16I2kzKz6XTw85Cb3LSv1Q941aOb+/vn\ntBWe\r\n=aJ3R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKGW5C+6TeHJtTG2pXWLMl0zZHI/rjW3+da/Z9Br0/eAiA4ckL65N3l4I+kV74HJaC2QFNUYC6O7Oa6zvel9KtLyA=="}]},"maintainers":[{"name":"a.kosheverov","email":"feadakin@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-popper-tooltip_2.10.1_1585316618542_0.3419599831820448"},"_hasShrinkwrap":false},"2.10.2":{"name":"@a.kosheverov_temp_org/react-popper-tooltip","version":"2.10.2","description":"React tooltip library built around react-popper","homepage":"https://react-popper-tooltip.netlify.com","repository":{"type":"git","url":"git+https://github.com/a.kosheverov/react-popper-tooltip.git"},"main":"dist/cjs/react-popper-tooltip.js","module":"dist/esm/react-popper-tooltip.js","style":"dist/styles.css","typings":"dist/index.d.ts","sideEffects":["*.css"],"scripts":{"build":"rm -rf dist && rollup -c && cp src/styles.css dist && yarn tsc && rm -rf compiled","prepublishOnly":"yarn typecheck && yarn lint && yarn build && yarn test","prettier":"prettier --write src/**/*.{ts,tsx}","docs":"docz dev","docs:build":"docz build","typecheck":"tsc --noEmit","lint":"eslint src/**/*.{ts,tsx}","test":"jest"},"husky":{"hooks":{"pre-commit":"yarn typecheck && yarn build && yarn test && lint-staged"}},"lint-staged":{"src/**/*.(ts|tsx)":["prettier --write","yarn lint --fix"],"*":["git add"]},"keywords":["react","tooltip","popover","overlay","react-tooltip","react-popper"],"author":{"name":"Mohsin Ul Haq","email":"mohsinulhaq01@gmail.com"},"license":"MIT","peerDependencies":{"react":"^16.6.0","react-dom":"^16.6.0"},"dependencies":{"@babel/runtime":"^7.8.7","react-popper":"^1.3.7"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.8.7","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-runtime":"^7.8.3","@babel/preset-env":"^7.8.7","@babel/preset-react":"^7.8.3","@babel/preset-typescript":"^7.8.3","@testing-library/react":"^10.0.1","@types/jest":"^25.1.4","@types/react":"^16.9.23","@types/react-dom":"^16.9.5","@typescript-eslint/eslint-plugin":"^2.24.0","@typescript-eslint/parser":"^2.24.0","docz":"^2.2.0","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.19.0","husky":"^4.2.3","jest":"^25.1.0","lint-staged":"^10.0.8","prettier":"^1.19.1","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^2.0.6","rollup-plugin-babel":"^4.4.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-size-snapshot":"^0.11.0","typescript":"^3.8.3"},"gitHead":"28f5a2b1440ae980e4ef7bd853ce5fa60b7f8718","bugs":{"url":"https://github.com/a.kosheverov/react-popper-tooltip/issues"},"_id":"@a.kosheverov_temp_org/react-popper-tooltip@2.10.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"a.kosheverov","email":"feadakin@gmail.com"},"dist":{"integrity":"sha512-5qlqk9fKFOob4eC0n2wMRkab2BrFCXmNMYf3p0wPrN7g39sT8YIVOoeIj/MPzsa1p6GoII2ls47pOyxNdpdnmg==","shasum":"3b67cd076027f21bd5bac727b84722c6ffd11bc8","tarball":"https://registry.npmjs.org/@a.kosheverov_temp_org/react-popper-tooltip/-/react-popper-tooltip-2.10.2.tgz","fileCount":13,"unpackedSize":99554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefgNFCRA9TVsSAnZWagAA4/EQAJXBn2pH0HsbqsK04Nr/\nKod2p12yTiWFS68d9Qd7M4ju1+6oi1hMOgykkfQlvbfOR+yaeXbLAEG2YU3z\nc7ihB5CG2+wk4c0ZQOqvSfsOlZNlawWIPdZqQ7kWDVINnDC7OTUAFaYK7e4Z\nF0WuzZOrd58gG9C/PI9Lt7+E3oM1fNGdEQRNNQKQupg5/Cf4SBLuC5orE6lN\nZ3Q6uXoAL00B+RiUKOruIHoApPuFLEh2YRJyXflMroDsnOmGVMXm/iPQXw9C\ntMJ0aVlR8Uk3r8y7SYBYHnHPSlvqdsRdUzK0q2GPvLMci7KUZs84hgweRdq9\nWVxLB2SEA3PwfrNHdLbEWuEKsU+AlQN1SnW24GRYPctIUOa2NJWDkmgaq56N\nfIWanl7zAPbePcmkhVUBEv/onDzSrn9cfxQvPW4nNp0c2apDCnVY/YSBoFDM\npzMIHi8KghL8VDajrvVj/SxSu6z/zJMUKAB5jrVjtoE6dj/aALvDwpsCRoRy\nZGx2fF/ei60Hwb+3LcQfEPdfVlWYw1aDfTisZJNcYeaFUx4fQ8lX1f7cARvD\nA5QijsyE0MAZfA8jt3gjHnIrbWswIHVGpRSebJuOtSI8SGbHa6yypJBkNXCQ\n6wy5MbJJAuD3RDt4ULV3IhG94uzOisEZJP/ysl3bq4dWM3htu6niOIrceGlF\nom6A\r\n=mWJ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwlVCptzb5XpcxrEXjKzNSEiGkY/BAwayztYJsldBGIAiBq8zZqUDaUrnWT9/90Aat9uR330cKs99NJX2wcLI1BVg=="}]},"maintainers":[{"name":"a.kosheverov","email":"feadakin@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-popper-tooltip_2.10.2_1585316677092_0.5426321377229513"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-27T13:43:38.281Z","2.10.1":"2020-03-27T13:43:38.642Z","modified":"2022-04-04T10:52:41.170Z","2.10.2":"2020-03-27T13:44:37.231Z"},"maintainers":[{"name":"a.kosheverov","email":"feadakin@gmail.com"}],"description":"React tooltip library built around react-popper","homepage":"https://react-popper-tooltip.netlify.com","keywords":["react","tooltip","popover","overlay","react-tooltip","react-popper"],"repository":{"type":"git","url":"git+https://github.com/a.kosheverov/react-popper-tooltip.git"},"author":{"name":"Mohsin Ul Haq","email":"mohsinulhaq01@gmail.com"},"bugs":{"url":"https://github.com/a.kosheverov/react-popper-tooltip/issues"},"license":"MIT","readme":"# React Tooltip\n\n[![npm version](https://img.shields.io/npm/v/react-popper-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/react-popper-tooltip)\n[![npm downloads](https://img.shields.io/npm/dm/react-popper-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/react-popper-tooltip)\n[![codecov](https://codecov.io/gh/mohsinulhaq/react-popper-tooltip/branch/master/graph/badge.svg)](https://codecov.io/gh/mohsinulhaq/react-popper-tooltip)\n[![Dependency Status](https://img.shields.io/david/mohsinulhaq/react-popper-tooltip.svg?style=flat-square)](https://david-dm.org/mohsinulhaq/react-popper-tooltip)\n\nReact tooltip component based on [react-popper](https://github.com/FezVrasta/react-popper), the React wrapper around [popper.js](https://popper.js.org/) library.\n\n## Homepage\n\nhttps://react-popper-tooltip.netlify.com\n\n## Example\n\nhttps://codesandbox.io/s/pykkz77z5j\n\n### Usage\n\n```bash\nnpm install react-popper-tooltip\n```\n\nor\n\n```bash\nyarn add react-popper-tooltip\n```\n\n```jsx\nimport React from 'react';\nimport {render} from 'react-dom';\nimport TooltipTrigger from 'react-popper-tooltip';\n\nconst Tooltip = ({\n  arrowRef,\n  tooltipRef,\n  getArrowProps,\n  getTooltipProps,\n  placement\n}) => (\n  <div\n    {...getTooltipProps({\n      ref: tooltipRef,\n      className: 'tooltip-container'\n      /* your props here */\n    })}\n  >\n    <div\n      {...getArrowProps({\n        ref: arrowRef,\n        className: 'tooltip-arrow',\n        'data-placement': placement\n        /* your props here */\n      })}\n    />\n    Hello, World!\n  </div>\n);\n\nconst Trigger = ({getTriggerProps, triggerRef}) => (\n  <span\n    {...getTriggerProps({\n      ref: triggerRef,\n      className: 'trigger'\n      /* your props here */\n    })}\n  >\n    Click Me!\n  </span>\n);\n\nrender(\n  <TooltipTrigger placement=\"right\" trigger=\"click\" tooltip={Tooltip}>\n    {Trigger}\n  </TooltipTrigger>,\n  document.getElementById('root')\n);\n```\n\n`TooltipTrigger` is the only component exposed by the package. It's just a positioning engine. What to render is left completely to the user, which can be provided using render props. Your props should be passed through `getTriggerProps`, `getTooltipProps` and `getArrowProps`.\n\nRead more about [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) pattern if you're not familiar with this approach.\n\n## Quick start\n\nIf you would like our opinionated container and arrow styles for your tooltip for quick start, you may import `react-popper-tooltip/dist/styles.css`, and use the classes `tooltip-container` and `tooltip-arrow` as follows:\n\n### Tooltip.js\n\n```jsx\nimport React from 'react';\nimport TooltipTrigger from 'react-popper-tooltip';\nimport 'react-popper-tooltip/dist/styles.css';\n\nconst Tooltip = ({children, tooltip, hideArrow, ...props}) => (\n  <TooltipTrigger\n    {...props}\n    tooltip={({\n      arrowRef,\n      tooltipRef,\n      getArrowProps,\n      getTooltipProps,\n      placement\n    }) => (\n      <div\n        {...getTooltipProps({\n          ref: tooltipRef,\n          className: 'tooltip-container'\n        })}\n      >\n        {!hideArrow && (\n          <div\n            {...getArrowProps({\n              ref: arrowRef,\n              className: 'tooltip-arrow',\n              'data-placement': placement\n            })}\n          />\n        )}\n        {tooltip}\n      </div>\n    )}\n  >\n    {({getTriggerProps, triggerRef}) => (\n      <span\n        {...getTriggerProps({\n          ref: triggerRef,\n          className: 'trigger'\n        })}\n      >\n        {children}\n      </span>\n    )}\n  </TooltipTrigger>\n);\n\nexport default Tooltip;\n```\n\nThen you can use it as shown in the example below.\n\n```jsx\n<Tooltip placement=\"top\" trigger=\"click\" tooltip=\"Hi there!\">\n  Click me\n</Tooltip>\n```\n\n## Examples\n\nTo fiddle with our example recipes, run:\n\n```bash\n> npm install\n> npm run docs\n```\n\nor\n\n```bash\n> yarn\n> yarn docs\n```\n\nand open up [localhost:3000](http://localhost:3000) in your browser.\n\n## Props\n\n### children\n\n> `function({})` | _required_\n\nThis is called with an object. Read more about the properties of this object in\nthe section \"[Children and tooltip functions](#children-and-tooltip-functions)\".\n\n### tooltip\n\n> `function({})` | _required_\n\nThis is called with an object. Read more about the properties of this object in\nthe section \"[Children and tooltip functions](#children-and-tooltip-functions)\".\n\n### defaultTooltipShown\n\n> `boolean` | defaults to `false`\n\nThis is the initial visibility state of the tooltip.\n\n### onVisibilityChange\n\n> `function(tooltipShown: boolean)`\n\nCalled with the tooltip state, when the visibility of the tooltip changes\n\n### tooltipShown\n\n> `boolean` | **control prop**\n\nUse this prop if you want to control the visibility state of the tooltip.\n\n`react-popper-tooltip` manages its own state internally. You can use this prop to pass the\nvisibility state of the tooltip from the outside. You will be required to keep this state up to\ndate (this is where `onVisibilityChange` becomes useful), but you can also control the state\nfrom anywhere, be that state from other components, `redux`, `react-router`, or anywhere else.\n\n### delayShow\n\n> `number` | defaults to `0`\n\nDelay in showing the tooltip (ms).\n\n### delayHide\n\n> `number` | defaults to `0`\n\nDelay in hiding the tooltip (ms).\n\n### placement\n\n> `string` | defaults to `right`\n\nThe tooltip placement. Valid placements are:\n\n- `auto`\n- `top`\n- `right`\n- `bottom`\n- `left`\n\nEach placement can have a variation from this list:\n\n- `-start`\n- `-end`\n\n### trigger\n\n> `string` or `string[]` | defaults to `\"hover\"`\n\nThe event(s) that trigger the tooltip. One of `click`, `right-click`, `hover`, `focus`, and `none`, or an array of them.\n\n### getTriggerRef\n\n> `function(HTMLElement) => void`\n\nFunction that can be used to obtain a trigger element reference.\n\n### closeOnOutOfBoundaries\n\n> `boolean` | defaults to `true`\n\nWhether to close the tooltip when it's trigger is out of the boundary.\n\n### usePortal\n\n> `boolean` | defaults to `true`\n\nWhether to use `React.createPortal` for creating tooltip.\n\n### portalContainer\n\n> `HTMLElement` | defaults to `document.body`\n\nElement to be used as portal container\n\n### followCursor\n\n> `boolean` | defaults to `false`\n\nWhether to spawn the tooltip at the cursor position.\n\nRecommended usage with hover trigger and no arrow element\n\n### modifiers\n\n> `object`\n\nModifiers passed directly to the underlying popper.js instance.\nFor more information, refer to Popper.js’\n[modifier docs](https://popper.js.org/popper-documentation.html#modifiers)\n\nModifiers, applied by default:\n\n```\n{\n  preventOverflow: {\n    boundariesElement: 'viewport'\n  }\n}\n```\n\n## Children and tooltip functions\n\nThis is where you render whatever you want. `react-popper-tooltip` uses two render props `children`\nand `tooltip`. `Children` prop is used to trigger the appearance of the tooltip and `tooltip`\ndisplays the tooltip itself.\n\nYou use it like so:\n\n```jsx\nconst tooltip = (\n  <TooltipTrigger tooltip={tooltip => <div>{/* more jsx here */}</div>}>\n    {trigger => <div>{/* more jsx here */}</div>}\n  </TooltipTrigger>\n);\n```\n\n### prop getters\n\n> See [the blog post about prop getters](https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf)\n\nThese functions are used to apply props to the elements that you render.\nIt's advisable to pass all your props to that function rather than applying them on the element\nyourself to avoid your props being overridden (or overriding the props returned). For example\n`<button {...getTriggerProps({onClick: event => console.log(event))}>Click me</button>`\n\n### children function\n\n| property        | type           | description                                                           |\n| --------------- | -------------- | --------------------------------------------------------------------- |\n| triggerRef      | `function ref` | returns the react ref you should apply to the trigger element.        |\n| getTriggerProps | `function({})` | returns the props you should apply to the trigger element you render. |\n\n### tooltip function\n\n| property        | type           | description                                                           |\n| --------------- | -------------- | --------------------------------------------------------------------- |\n| arrowRef        | `function ref` | return the react ref you should apply to the tooltip arrow element.   |\n| tooltipRef      | `function ref` | return the react ref you should apply to the tooltip element.         |\n| getArrowProps   | `function({})` | return the props you should apply to the tooltip arrow element.       |\n| getTooltipProps | `function({})` | returns the props you should apply to the tooltip element you render. |\n| placement       | `string`       | return the dynamic placement of the tooltip.                          |\n\n## Inspiration and Thanks!\n\nThis library is based on [react-popper](https://github.com/FezVrasta/react-popper), the official\nreact wrapper around [Popper.js](https://popper.js.org).\n\nUsing of render props, prop getters and doc style of this library are heavily inspired by\n[downshift](https://github.com/paypal/downshift).\n","readmeFilename":"README.md"}