{"bugs":{"url":"https://github.com/mohsinulhaq/react-popper-tooltip/issues"},"dist":{"shasum":"b2a22c18579ee750af0c50a024a77edeb11d6b9b","tarball":"https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-2.7.3-alpha.1.tgz","fileCount":7,"integrity":"sha512-4o5FB1ImCB0K0TxjQU1DiRGFQJy2124M4WFHo98Ijbg9j/tVVM+XLIDq7S9z0umdWQt9N2tpN0zuCd+fZCBzpQ==","signatures":[{"sig":"MEYCIQDTgf5zxVk7Q5Y7DDzsB0xy9MXfSWKFMt6uqdnBOg0hwQIhAPM4UgAULuS93vR4anOq4gFnqoESe/cGau/+QN5IzZu9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNMzGCRA9TVsSAnZWagAAYjkP/j0oFz1uosduXLJgxp4l\n59u4aiplHjlrIvdL2BAZQFDbwrikSFWbleu82zbnIM965KN/1ZyLKQv+xD/I\n6UKOjkCVobAjaBsgKqUiQ1UyZiUYfFyJgUEH8vFpMX4ZVQkhkeOGI82ees3Z\n9H/oyWQNo3+pxmE12sLUhf4Y8PSEHHzKL5Hk1TODxgNM4FjzrsI/fwm7DH49\nSfmn8N8D/XmjFD2Pct5Rl+7vp9j26ol4kUC9mW3brlQVIc/7KjwViLlVUcGz\nIgsFD52HZRHx9SLDOO7Dyj+SvmEgvaHLxWrTCLglPHPZCclCIgbWcvhDO3eC\n8CWJ/C19Q6hOXxgjIYkLB3gkLUMnaIJUWookkW1zl4/IPKLxMIDdr5bTfVe8\ndGTN7TGmTNsSylGgPeQk8mIENB/qTav89hnoC+6urkUhSCna4XCUPeDil4dF\nG/b+KDuMfzSOeLl0034BbFGyOFiy0rES92aiXgnXsiYjDX52/q1OKZz/GIPg\neA9ndGFx1VEj/14dIPbugBN45Ts2LvPy/RTZgJQ2yY7fmx/KKU5lrCYsPMNU\noBRmq21gDWJr3e2M+Pz3DIFDoRZUG4CBvU1KYumyAwPX0VC/0WaDx734gA3M\ncaALitmogqa6SNp+W0P9/kFiiBMCqZUN/vOt1mC8NhflpNpKU/R3UTTREhik\nty2G\r\n=nqmB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/react-popper-tooltip.js","name":"react-popper-tooltip","style":"dist/styles.css","author":{"name":"Mohsin Ul Haq","email":"mohsinulhaq01@gmail.com"},"module":"dist/esm/react-popper-tooltip.js","readme":"# React Tooltip\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[![Build Status](https://travis-ci.com/mohsinulhaq/react-popper-tooltip.svg?branch=master)](https://travis-ci.com/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[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![codecov](https://codecov.io/gh/mohsinulhaq/react-popper-tooltip/branch/master/graph/badge.svg)](https://codecov.io/gh/mohsinulhaq/react-popper-tooltip)\n\nReact tooltip component based on [react-popper](https://github.com/FezVrasta/react-popper), the \nReact wrapper around [popper.js](https://popper.js.org/) library.\n\n## Homepage\nhttps://mohsinulhaq.github.io/react-popper-tooltip/\n\n## Example\nhttps://codesandbox.io/s/pykkz77z5j\n\n### Usage\n\n```bash\nnpm install react-popper-tooltip\n```\nor\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  getTooltipProps,\n  getArrowProps,\n  tooltipRef,\n  arrowRef,\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        'data-placement': placement,\n        className: 'tooltip-arrow'\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\n    placement=\"right\"\n    trigger=\"click\"\n    tooltip={Tooltip}\n  >\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 = ({tooltip, children, hideArrow ...props}) => (\n  <TooltipTrigger\n    {...props}\n    tooltip={({\n      getTooltipProps,\n      getArrowProps,\n      tooltipRef,\n      arrowRef,\n      placement\n    }) => (\n      <div\n        {...getTooltipProps({\n          ref: tooltipRef,\n          className: 'tooltip-container'\n        })}\n      >\n        {!hideArrow && <div\n          {...getArrowProps({\n            ref: arrowRef,\n            'data-placement': placement,\n            className: 'tooltip-arrow'\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!\">Click me</Tooltip>\n```\n\n## Examples\nTo fiddle with our example recipes, run:\n```bash\n> npm install\n> npm run docs\n```\nor\n```bash\n> yarn\n> yarn docs\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\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- `auto`\n- `top`\n- `right`\n- `bottom`\n- `left`\n\nEach placement can have a variation from this list:\n- `-start`\n- `-end`\n\n### trigger\n\n> `string` | defaults to `hover` \n\nThe event that triggers the tooltip. One of `click`, `hover`, `right-click`, `none`.\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```\nconst tooltip = (\n  <TooltipTrigger\n    tooltip={tooltip => (<div>{/* more jsx here */}</div>)}\n  >\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| getTriggerProps | `function({})` | returns the props you should apply to the trigger element you render. |\n| triggerRef      | `node`         | returns the react ref you should apply to the trigger element.        |\n\n\n### tooltip function\n\n| property        | type           | description                                                            |\n| --------------- | -------------- | ---------------------------------------------------------------------- |\n| getTooltipProps | `function({})` | returns the props you should apply to the tooltip element you render.  |\n| tooltipRef      | `node`         | 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| arrowRef        | `node`         | return the react ref you should apply to the tooltip arrow element.    |\n| placement       | `string`       | return the 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","gitHead":"971604f94c0c32dd734da10238539a2dd5dc554e","license":"MIT","scripts":{"docs":"docz dev","lint":"eslint .","test":"jest","build":"rimraf dist && rollup -c && cp src/styles.css dist","docs:build":"docz build","docs:deploy":"yarn docs:build && cp .docz/dist/index.html .docz/dist/404.html && gh-pages -d .docz/dist","prepublishOnly":"yarn lint && yarn test && yarn build"},"typings":"typings/react-popper-tooltip.d.ts","_npmUser":{"name":"mohsinulhaq","email":"mohsinulhaq01@gmail.com"},"homepage":"https://mohsinulhaq.github.io/react-popper-tooltip/","keywords":["react","tooltip","popover","overlay","react-tooltip","react-popper"],"pre-commit":["lint","test"],"repository":{"url":"git+https://github.com/mohsinulhaq/react-popper-tooltip.git","type":"git"},"_npmVersion":"6.5.0","description":"React tooltip library built around react-popper","directories":{},"maintainers":[{"name":"denisborovikov","email":"metaller.ru@gmail.com"},{"name":"mohsinulhaq","email":"mohsinulhaq01@gmail.com"}],"sideEffects":["*.css"],"_nodeVersion":"10.15.0","dependencies":{"react-popper":"^1.3.2","@babel/runtime":"^7.2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"docz":"^0.13.7","jest":"^23.6.0","react":"^16.7.0","eslint":"^5.11.1","rimraf":"^2.6.2","rollup":"^0.68.2","gh-pages":"^2.0.1","prettier":"^1.15.3","react-dom":"^16.7.0","@babel/cli":"^7.2.3","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","pre-commit":"^1.2.2","prop-types":"^15.6.2","@babel/core":"^7.2.2","@types/jest":"^23.3.10","@types/react":"^16.7.18","babel-eslint":"^10.0.1","docz-plugin-css":"^0.11.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","docz-theme-default":"^0.13.7","eslint-plugin-jest":"^22.1.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.12.0","rollup-plugin-babel":"^4.1.0","react-testing-library":"^5.4.2","eslint-config-prettier":"^3.3.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-prettier":"^3.0.1","rollup-plugin-size-snapshot":"^0.7.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3","babel-plugin-transform-react-remove-prop-types":"^0.4.21"},"peerDependencies":{"react":"^16.7.0","react-dom":"^16.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-popper-tooltip_2.7.3-alpha.1_1546964165152_0.2558927739188428","host":"s3://npm-registry-packages"},"_id":"react-popper-tooltip@2.7.3-alpha.1","version":"2.7.3-alpha.1"}