{"_id":"@cruise-automation/tooltip","_rev":"7-6d225eea970cfd4e02601400821f07a8","name":"@cruise-automation/tooltip","dist-tags":{"latest":"0.0.7"},"versions":{"0.0.7":{"name":"@cruise-automation/tooltip","version":"0.0.7","main":"lib/index.js","description":"Cruise tooltip","license":"Apache-2.0","scripts":{"build-dev":"BABEL_ENV=$NODE_ENV babel src/index.js --out-dir lib --copy-files --config-file ../../../babel.config.js","build":"NODE_ENV=production npm run build-dev && flow-copy-source -v src lib --ignore '*.test.*'","watch":"NODE_ENV=development npm run build-dev --watch"},"dependencies":{"react-popper":"1.0.0"},"peerDependencies":{"react":"16.x"},"devDependencies":{"flow-bin":"^0.89.0"},"publishConfig":{"access":"public"},"gitHead":"a799782ff908186f8c42c37f39806d251922ca6e","_resolved":"","_integrity":"","_from":"file:cruise-automation-tooltip-0.0.7.tgz","_id":"@cruise-automation/tooltip@0.0.7","_npmVersion":"6.5.0","_nodeVersion":"11.5.0","_npmUser":{"name":"janpaul123","email":"me@janpaulposma.nl"},"dist":{"integrity":"sha512-KhnDUdt6CiQQpfBouPQcXBjGH0jmnDWEmA6Ax4xLWE1xfrz7KZfmrg4wWIrgQlklXjy+lpOgOcUmcNi0r0FtRA==","shasum":"abc641fd95832bf8598edc50442f72c5955cb501","tarball":"https://registry.npmjs.org/@cruise-automation/tooltip/-/tooltip-0.0.7.tgz","fileCount":7,"unpackedSize":48582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJnVcCRA9TVsSAnZWagAAMscQAIsyQyi1k2XvlmdexLMe\nezFciegQULUQv/0NMzCSc4asAPXCTqq0agrjO7GT7Zkg/2ZAJuG+0R+Az2tJ\n+XXANy3GWdUTkrZax9E/wKppvVRUVtsPY2iP6cd0iFh4zNuZ2wgjiagDwG7J\n2W+j2N0y1P0OdsbEn1TiImslLGtg/UimvnBNupDxG3i79ExH3HtsvBvD+1yh\nQRoG1QfxQIvVb6mIR3m5g3VvOURM/8G/Xhcno7n9RATeipf9a7TQ3pi5Enr8\nx8HUKD1/g10P9UdybdnDf5pUiKEeA7qEv6kUdTOuC9ymXdnV2qf3CWB1lc6/\nq8OmfVAwFMgWjg9sOgyLv4lfA63fpXS3wt7twhcC621mCP1FqRrCQ8huiybs\nGGHV4ZOkIVMYdb1x6E1oABpaDjZwqftNpK2YQqAL3lUEVTzEphCFMyIu89Df\nXRdhkMGGsNRuiZmprCYlALZVH2iJWkjDFnAEcv6POSgKQZ3aSn4K1uq6b778\npN6WoWQ2kCRxd6VE5wM/HcQbueECL79Wk0hAUr9EAY8mP5EwezLEdXQO5f/L\nJGlC05MjjqmapcBxj/B/od+aXZDVqeBMUJhRJ2LTislQN+WSCJINj6IHfq1p\nlqwfXGLH4qP6O21perLpTkIlZuvVpYHZuTQsjTLWYXUAqhJ9I3uBWQN9kaBX\nYzd1\r\n=eyRZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKtN/yKQbQDTDuPwmh1A3QEbS/S8PRGPFgZgwzM8/bKgIgcTD7vsSyqlg/cQDuMrEPLfPd6Xcg+JHi+7c96XLJ/f0="}]},"maintainers":[{"name":"janpaul123","email":"me@janpaulposma.nl"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tooltip_0.0.7_1546024283713_0.6186227066480225"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-28T19:11:23.529Z","0.0.7":"2018-12-28T19:11:23.879Z","modified":"2022-04-05T01:57:47.165Z"},"maintainers":[{"email":"hassoncs@gmail.com","name":"hassoncs"},{"email":"me@janpaulposma.nl","name":"janpaul123"},{"email":"me@audreyli.me","name":"audreyli"}],"description":"Cruise tooltip","license":"Apache-2.0","readme":"# @cruise-automation/tooltip\n\nFloating tooltip React component, for usage across Cruise projects.\n\n## Usage\n\nInstall: `npm install --save @cruise-automation/tooltip`.\n\nIt can render any `React.Node` within itself. It comes with a wrapper component you can use to add tooltips to existing html elements, and an imperative API to absolutely position the tooltip for interacting with non-element based things (image hitmaps, charts, webgl).\n\nThe tooltip container element has basic css applied for absolute positioning.  It also has an unused global className of `tooltip` so you can apply custom styles globally in your application. e.g. `.tooltip { border-radius: 5px, padding: 10px, border: 1px solid pink }` in your css.\n\nThe react \"wrapper\" component API looks like so:\n\n```js\n<Tooltip contents=\"This is the tooltip contents\" fixed delay>\n  <div>Mouse over this and after 500 milliseconds a tooltip will show</div>\n</Tooltip>\n```\n\nThe imperative API looks like so:\n\n```js\nconst MyComponent = (props) => {\n  const showTip = (e) => {\n    Tip.show(\n      e.clientX,\n      e.clientY,\n      <div>\n        `Your mouse is at ${e.clientX}, ${e.clientY}\n      </div>,\n      { offset: 20 }\n    );\n  };\n\n  return (\n    <div onMouseMove={showTip} onMouseLeave={Tooltip.hide}>\n      Mouse over to show a tooltip\n    </div>\n  );\n};\n```\n\n## API\n\n### Tooltip.show(x: number, y: number, contents: React.Node, options: { offset: number })\n\nShows the tooltip at `x, y` with the `contents` rendered into the body of the tooltip. An optional offset can be supplied to move the tooltip `offset`px away from the mouse. The tooltip will attempt to render within the viewport, so if it is rendered near the bottom edge of the screen it will shift to the left / top of the mouse (plus the offset) accordingly.\n\n### Tooltip.hide()\n\nHides the tooltip\n\n## Props\n\n| Name     | Type              | Description                                                                                                                      |\n| -------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n| children | React.Node        | The element to wrap and add mouse listeners to                                                                                   |\n| contents | React.Node        | This will rendered into the body of the tooltip when the tooltip is shown                                                        |\n| fixed?   | boolean           | `true` will make the tooltip fixed to the bottom / right edge of the wrapped component                                           |\n| delay?   | boolean or number | The delay to wait before displaying a fixed tooltip. Setting to `true` will use the default delay of 500ms                       |\n| offset?  | number            | The pixel offset from `x, y` - the default value is `14px`. This helps the tooltip not be partially covered by the mouse pointer |\n","readmeFilename":"README.md"}