{"_id":"@sanity/react-tippy","_rev":"176-2df08c75ebf1a6e2730979b8133d8c3b","name":"@sanity/react-tippy","dist-tags":{"latest":"1.2.6"},"versions":{"1.2.2":{"name":"@sanity/react-tippy","version":"1.2.2","author":{"name":"Khoa Thai"},"license":"MIT","_id":"@sanity/react-tippy@1.2.2","maintainers":[{"name":"sanity-io","email":"hello@sanity.io"}],"homepage":"https://github.com/tvkhoa/react-tippy","bugs":{"url":"https://github.com/tvkhoa/react-tippy/issues"},"dist":{"shasum":"32fd9162ecf96184e1ed25a3f339aba840dec5a5","tarball":"https://registry.npmjs.org/@sanity/react-tippy/-/react-tippy-1.2.2.tgz","integrity":"sha512-kFg4pyaBOhq/pfku1LVUZYg3usU2QxD906rU73e0Bgsr7SgKM4sb+XnPwc5n+XVonLkk37K85eyRpeNsW/lIBQ==","signatures":[{"sig":"MEUCIHlcev3zcQz/lx3hBg9SApU338qRojmMpaz+7xqjnS1wAiEA3D4q+EuTTWo2QkS5tiZLATnSsqKp9CFGhyCK6lGfkPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/react-tippy.js","gitHead":"40e31326becb0173886415f43952dea9b084c3bd","scripts":{"build":"webpack --config webpacklib.config.js --env build","start":"react-scripts start"},"_npmUser":{"name":"sanity-io","email":"hello@sanity.io"},"repository":{"url":"git+https://github.com/tvkhoa/react-tippy.git","type":"git"},"_npmVersion":"5.5.1","description":"React tippy","directories":{},"_nodeVersion":"8.9.2","dependencies":{"popper.js":"^1.11.1"},"devDependencies":{"chai":"^3.5.0","babel":"^6.23.0","mocha":"^3.2.0","react":"^15.5.3","redux":"^3.7.1","yargs":"^7.0.2","eslint":"^3.18.0","webpack":"^2.3.0","flow-bin":"^0.42.0","react-dom":"^15.5.3","recompose":"^0.23.1","babel-core":"^6.24.0","react-redux":"^5.0.5","redux-thunk":"^2.2.0","babel-eslint":"^7.2.0","babel-loader":"^6.4.1","eslint-loader":"^1.6.3","react-scripts":"0.9.5","babel-preset-react":"^6.24.1","redux-state-action":"^1.0.8","babel-plugin-lodash":"^3.2.11","babel-preset-es2015":"^6.24.0","eslint-plugin-import":"^2.2.0","lodash-webpack-plugin":"^0.11.2","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/react-tippy-1.2.2.tgz_1516802020805_0.5172599034849554","host":"s3://npm-registry-packages"}},"1.2.3":{"name":"@sanity/react-tippy","version":"1.2.3","author":{"name":"Khoa Thai"},"license":"MIT","_id":"@sanity/react-tippy@1.2.3","maintainers":[{"name":"kristofferj","email":"kristoffer@bengler.no"},{"name":"simenss","email":"simen@bengler.no"},{"name":"skogsmaskin","email":"per.kristian.nordnes@gmail.com"},{"name":"thomax","email":"thomas@bengler.no"},{"name":"rexxars","email":"rexxars@gmail.com"},{"name":"sanity-io","email":"hello@sanity.io"},{"name":"bjoerge","email":"bjoerge@gmail.com"}],"homepage":"https://github.com/tvkhoa/react-tippy","bugs":{"url":"https://github.com/tvkhoa/react-tippy/issues"},"dist":{"shasum":"b6fedbf0cd520dd72cee4be375bb0171f150be82","tarball":"https://registry.npmjs.org/@sanity/react-tippy/-/react-tippy-1.2.3.tgz","integrity":"sha512-rtVqmdavlOxCQ+Fukf2ZzlinhcxoYq9zq4eyfQa+H262cXSMMgUnH6nacgK6bSjTq5m5QdxXl9Ix8g1QVSUGng==","signatures":[{"sig":"MEUCIFqTzuKWUKHkBtvriBeAcYaHsDASDJHzkUuSOQrVSTBUAiEAihMB57fYab6S+qxp/ULGbL9pzaG/uXjW31tYa1BcUoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/react-tippy.js","gitHead":"cf542bf6420c456e9f8d1f4b2541de737bcda5d2","scripts":{"build":"webpack --config webpacklib.config.js --env build","start":"react-scripts start"},"_npmUser":{"name":"sanity-io","email":"hello@sanity.io"},"repository":{"url":"git+https://github.com/sanity-io/react-tippy.git","type":"git"},"_npmVersion":"5.5.1","description":"React tippy","directories":{},"_nodeVersion":"8.9.2","dependencies":{"popper.js":"^1.11.1"},"devDependencies":{"chai":"^3.5.0","babel":"^6.23.0","mocha":"^3.2.0","react":"^15.5.3","redux":"^3.7.1","yargs":"^7.0.2","eslint":"^3.18.0","webpack":"^2.3.0","flow-bin":"^0.42.0","react-dom":"^15.5.3","recompose":"^0.23.1","babel-core":"^6.24.0","react-redux":"^5.0.5","redux-thunk":"^2.2.0","babel-eslint":"^7.2.0","babel-loader":"^6.4.1","eslint-loader":"^1.6.3","react-scripts":"0.9.5","babel-preset-react":"^6.24.1","redux-state-action":"^1.0.8","babel-plugin-lodash":"^3.2.11","babel-preset-es2015":"^6.24.0","eslint-plugin-import":"^2.2.0","lodash-webpack-plugin":"^0.11.2","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/react-tippy-1.2.3.tgz_1516804075869_0.03995042550377548","host":"s3://npm-registry-packages"}},"1.2.4":{"name":"@sanity/react-tippy","version":"1.2.4","author":{"name":"Khoa Thai"},"license":"MIT","_id":"@sanity/react-tippy@1.2.4","maintainers":[{"name":"kristofferj","email":"kristoffer@bengler.no"},{"name":"simenss","email":"simen@bengler.no"},{"name":"skogsmaskin","email":"per.kristian.nordnes@gmail.com"},{"name":"thomax","email":"thomas@bengler.no"},{"name":"rexxars","email":"rexxars@gmail.com"},{"name":"sanity-io","email":"hello@sanity.io"},{"name":"bjoerge","email":"bjoerge@gmail.com"}],"homepage":"https://github.com/tvkhoa/react-tippy","bugs":{"url":"https://github.com/tvkhoa/react-tippy/issues"},"dist":{"shasum":"c6ee9e3b27346ef32b7643defef77ee338d3fb7e","tarball":"https://registry.npmjs.org/@sanity/react-tippy/-/react-tippy-1.2.4.tgz","integrity":"sha512-WUHVHPRqw+2FNrwgIfRSABjMtlDDVHj7v3VRuyd1Dabi3aZUefLYSQ0mhBvZPSiHFj5dOMf5utM0zYFVrSmbJQ==","signatures":[{"sig":"MEYCIQCJBwpbG04WfOwcYzQHrDM2wkStjLeUfJwhF1iIjAo9tQIhAImkkWXyqf/cAnFIXPGVhk7AYHwxSkxDd0vYkZIeZ3+K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/react-tippy.js","gitHead":"4048d2b98f0980be9a0e053719362cf41edb2922","scripts":{"build":"webpack --config webpacklib.config.js --env build","start":"react-scripts start"},"_npmUser":{"name":"sanity-io","email":"hello@sanity.io"},"repository":{"url":"git+https://github.com/sanity-io/react-tippy.git","type":"git"},"_npmVersion":"5.5.1","description":"React tippy","directories":{},"_nodeVersion":"8.9.2","dependencies":{"popper.js":"^1.11.1"},"devDependencies":{"chai":"^3.5.0","babel":"^6.23.0","mocha":"^3.2.0","react":"^15.5.3","redux":"^3.7.1","yargs":"^7.0.2","eslint":"^3.18.0","webpack":"^2.3.0","flow-bin":"^0.42.0","react-dom":"^15.5.3","recompose":"^0.23.1","babel-core":"^6.24.0","react-redux":"^5.0.5","redux-thunk":"^2.2.0","babel-eslint":"^7.2.0","babel-loader":"^6.4.1","eslint-loader":"^1.6.3","react-scripts":"0.9.5","babel-preset-react":"^6.24.1","redux-state-action":"^1.0.8","babel-plugin-lodash":"^3.2.11","babel-preset-es2015":"^6.24.0","eslint-plugin-import":"^2.2.0","lodash-webpack-plugin":"^0.11.2","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/react-tippy-1.2.4.tgz_1516804370590_0.9750750195235014","host":"s3://npm-registry-packages"}},"1.2.5":{"name":"@sanity/react-tippy","version":"1.2.5","author":{"name":"Khoa Thai"},"license":"MIT","_id":"@sanity/react-tippy@1.2.5","maintainers":[{"name":"bjoerge","email":"bjoerge@gmail.com"},{"name":"kristofferj","email":"kristoffer@bengler.no"},{"name":"rexxars","email":"rexxars@gmail.com"},{"name":"sanity-io","email":"hello@sanity.io"},{"name":"simenss","email":"simen@bengler.no"},{"name":"skogsmaskin","email":"per.kristian.nordnes@gmail.com"},{"name":"thomax","email":"thomas@bengler.no"}],"homepage":"https://github.com/tvkhoa/react-tippy","bugs":{"url":"https://github.com/tvkhoa/react-tippy/issues"},"dist":{"shasum":"2dcf597f0a78dfb2efbf725275a4cde9fa97d2cc","tarball":"https://registry.npmjs.org/@sanity/react-tippy/-/react-tippy-1.2.5.tgz","fileCount":7,"integrity":"sha512-W1ey05B26Fr/uacfMtEyBU0eDXVs0urO5EKcxbhxpO9gqIAtPLDmtTpUPZirJyuGyj6e739CcHCLaPg3CKLrsw==","signatures":[{"sig":"MEUCIQDx4at2R0t9vIM7HTK2CHaTM32HPHtyEF2BJH+hBftyegIgWNFWWgUVUIzXlFUUBT5k0D5Rvlya0f1ulLPOx32s3Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427344},"main":"dist/react-tippy.js","gitHead":"483afe129e6841178a734497e7cc681cfb62910c","scripts":{"build":"webpack --config webpacklib.config.js --env build","start":"react-scripts start"},"_npmUser":{"name":"sanity-io","email":"hello@sanity.io"},"repository":{"url":"git+https://github.com/sanity-io/react-tippy.git","type":"git"},"_npmVersion":"5.7.1","description":"React tippy","directories":{},"_nodeVersion":"8.9.2","dependencies":{"popper.js":"1.11.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^3.5.0","babel":"^6.23.0","mocha":"^3.2.0","react":"^15.5.3","redux":"^3.7.1","yargs":"^7.0.2","eslint":"^3.18.0","webpack":"^2.3.0","flow-bin":"^0.42.0","react-dom":"^15.5.3","recompose":"^0.23.1","babel-core":"^6.24.0","react-redux":"^5.0.5","redux-thunk":"^2.2.0","babel-eslint":"^7.2.0","babel-loader":"^6.4.1","eslint-loader":"^1.6.3","react-scripts":"0.9.5","babel-preset-react":"^6.24.1","redux-state-action":"^1.0.8","babel-plugin-lodash":"^3.2.11","babel-preset-es2015":"^6.24.0","eslint-plugin-import":"^2.2.0","lodash-webpack-plugin":"^0.11.2","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/react-tippy_1.2.5_1522844609475_0.9044500644371256","host":"s3://npm-registry-packages"}},"1.2.6":{"name":"@sanity/react-tippy","version":"1.2.6","author":{"name":"Khoa Thai"},"license":"MIT","_id":"@sanity/react-tippy@1.2.6","maintainers":[{"name":"bjoerge","email":"bjoerge@gmail.com"},{"name":"kristofferj","email":"kristoffer@bengler.no"},{"name":"rexxars","email":"rexxars@gmail.com"},{"name":"sanity-io","email":"hello@sanity.io"},{"name":"simenss","email":"simen@bengler.no"},{"name":"skogsmaskin","email":"per.kristian.nordnes@gmail.com"},{"name":"thomax","email":"thomas@bengler.no"}],"homepage":"https://github.com/tvkhoa/react-tippy","bugs":{"url":"https://github.com/tvkhoa/react-tippy/issues"},"dist":{"shasum":"50bac9ecdfa2804c23d464b49182d0d52c0d5f3b","tarball":"https://registry.npmjs.org/@sanity/react-tippy/-/react-tippy-1.2.6.tgz","fileCount":7,"integrity":"sha512-4XBAI7EQKvUTSHvaZolsJhw20Pn0HNCE0LE/uVOLcvAaDJKRxyUkZhoZexijshq0R28AqHtO7qZoMWxiMANPSg==","signatures":[{"sig":"MEQCHzmtaeJiVbnIowPtkIUYsi3nabNFjzth2+1Tz+XvRQkCIQD+l+eQEWXajC5C4PrNjIWmtUXZwhXFO+Ja7m3TWWAg1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427344},"main":"dist/react-tippy.js","gitHead":"1aa8e2cf05dcd026f15aa96250eedea09af2bc7f","scripts":{"build":"webpack --config webpacklib.config.js --env build","start":"react-scripts start"},"_npmUser":{"name":"sanity-io","email":"hello@sanity.io"},"repository":{"url":"git+https://github.com/sanity-io/react-tippy.git","type":"git"},"_npmVersion":"5.7.1","description":"React tippy","directories":{},"_nodeVersion":"8.9.2","dependencies":{"popper.js":"1.14.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^3.5.0","babel":"^6.23.0","mocha":"^3.2.0","react":"^15.5.3","redux":"^3.7.1","yargs":"^7.0.2","eslint":"^3.18.0","webpack":"^2.3.0","flow-bin":"^0.42.0","react-dom":"^15.5.3","recompose":"^0.23.1","babel-core":"^6.24.0","react-redux":"^5.0.5","redux-thunk":"^2.2.0","babel-eslint":"^7.2.0","babel-loader":"^6.4.1","eslint-loader":"^1.6.3","react-scripts":"0.9.5","babel-preset-react":"^6.24.1","redux-state-action":"^1.0.8","babel-plugin-lodash":"^3.2.11","babel-preset-es2015":"^6.24.0","eslint-plugin-import":"^2.2.0","lodash-webpack-plugin":"^0.11.2","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-object-rest-spread":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/react-tippy_1.2.6_1522846619690_0.9499473487096561","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-01-24T13:53:42.130Z","modified":"2026-04-08T15:14:45.873Z","1.2.2":"2018-01-24T13:53:42.130Z","1.2.3":"2018-01-24T14:27:56.016Z","1.2.4":"2018-01-24T14:32:51.924Z","1.2.5":"2018-04-04T12:23:29.619Z","1.2.6":"2018-04-04T12:56:59.870Z"},"bugs":{"url":"https://github.com/tvkhoa/react-tippy/issues"},"author":{"name":"Khoa Thai"},"license":"MIT","homepage":"https://github.com/tvkhoa/react-tippy","repository":{"url":"git+https://github.com/sanity-io/react-tippy.git","type":"git"},"description":"React tippy","maintainers":[{"email":"svc.npm@sanity.io","name":"sanity-svc.npm"},{"email":"developers@sanity.io","name":"sanity-io"}],"readme":"## React Tippy\n\nA lightweight tooltip for React. Demo at [Demo page here...](https://tvkhoa.github.io/testlib)\n\nBased on `tippy.js` and powered by `Popper.js`\n\n\n\n\n## Why you should use it?\n\nIt is designed to work friendly with React, it provides `` element or a higher-order component\n\nIt uses `React DOM` to render tooltip content. Therefore, you can fully use it in your React project without doubt\n\nIt is an enhancement of Tippy.js for using in React.\n\n\n\n## Getting Started\n\n```\nyarn add react-tippy\n\n```\n\n## How to use\n\nFirst, you need import css\n\n```javascript\nimport 'react-tippy/dist/tippy.css'\n\n```\n\nThere are 2 ways for you to use react Tippy\n\n### Tooltip Component\n\n```javascript\nimport {\n Tooltip,\n} from 'react-tippy';\n\n\n\n
\n Click here to show popup\n
\n\n\n```\n\n### High Order Component\n\n`withTooltip(Component, options)`\n\n\n```javascript\nimport {\n withTooltip,\n} from 'react-tippy';\n\n\nconst Header = () => (\n
Header here
\n);\n\nconst HeaderWithTootip = withTooltip(Header, {\n title: 'Welcome to React with tooltip',\n});\n\n```\n\n\n## Props\n\n|Setting|Default|Options|Role|\n|--- |--- |--- |--- |\n|disabled|`false`|`true` `false`|Show or not show tooltip|\n|open|`undefined`|`true` `false`|Just only use it if you want to `show/hide it manually`. Usually, you don't need it|\n|useContext|`undefined`|`true` `false`|Define that you're using context in your tooltip content (or `html` props). It's useful when you want your tooltip content can connect to redux store|\n|onRequestClose|`noop function`|Function|Just only use it if you want to `show/hide it manually`. This event is fired when you click outside of your tooltip, should be used with the prop `interaction` to keep your tooltip showing|\n|position|`top`|`top` `bottom` `left` `right`|Specifies which direction to position the tooltip on the element. Add the suffix `-start` or `-end` to shift the position. `top-end` is an example.|\n|trigger|`mouseenter focus`|`mouseenter` `focus` `click` `manual`|Specifies which type of events will trigger a tooltip to show. Separate each by a space. mouseenter is for hovering and touch on mobile, and focus is for keyboard navigation. Use manual if you want to show/hide the tooltip manually/programmatically (see below).|\n|tabIndex|`undefined`|number|set tabIndex so element can receive focus|\n|interactive|`false`|`true` `false`|Makes a tooltip interactive, i.e. will not close when the user hovers over or clicks on the tooltip. This lets you create a popover (similar to Bootstrap) when used in conjunction with a click trigger.|\n|interactiveBorder|2|Any number (pixels)|Specifies the size of the invisible border around an interactive tooltip that will prevent it from closing. Only applies to `mouseenter` triggered tooltips.|\n|delay|0|Any integer >= 0 (milliseconds)|Specifies how long it takes after a trigger event is fired for a tooltip to show.|\n|hideDelay|0|Any integer >= 0 (milliseconds)|Specifies how long it takes after a leave event is fired for a tooltip to hide. Not applicable when clicking on the document to hide tooltips.|\n|animation|`shift`|`shift` `perspective` `fade` `scale` `none`|Specifies the type of transition animation a tooltip has.|\n|arrow|`false`|`true` `false`|Adds an arrow pointing to the tooltipped element. Setting this to true disables animateFill.|\n|arrowSize|`regular`|`small` `regular` `big`|Specifies how big the tooltip's arrow is.|\n|animateFill|`true`|`true` `false`|Adds a material design-esque filling animation. This is disabled if you have arrow set to true.|\n|duration|375|Any integer >= 0 (milliseconds)|Specifies how long the transition animation takes to complete when showing a tooltip.|\n|distance|10|Any number (pixels)|Specifies how far away the tooltip is from its element.|\n|offset|0|Any number (pixels)|Offsets the tooltip on its opposite axis. For position top and bottom, it acts as offsetX. For position left and right, it acts as offsetY.|\n|hideOnClick|`true`|`true` `false` `'persistent'`|Specifies whether to hide a tooltip upon clicking its element after hovering over.|\n|multiple|`false`|`true` `false`|Specifies whether to allow multiple tooltips open on the page (click trigger only).|\n|followCursor|`false`|`true` `false`|Specifies whether to follow the user's mouse cursor (mouse devices only).|\n|inertia|`false`|`true` `false`|Modifies the transition-timing-function with a cubic bezier to create a \"slingshot\" intertial effect.|\n|transitionFlip|`true`|`true` `false`|Specifies whether to transition between flips or not. Uses the same transition timing as duration|\n|popperOptions|{}|Object|Allows more control over tooltip positioning and behavior. See right below.|\n|html|null|react element|Tooltip content. If you don't define html, the title will be used|\n|rawTemplate|undefined|`template id` or `dom element`|USED WITH CAUTION. Support creating html templates from tippyjs. But IMO, it's not good to render raw html in React, it's a way to work around if you want to render some complex html generated by 3rd party such as SVG chart(in case you can not find React lib to render chart)|\n|unmountHTMLWhenHide|`false`|`true` `false`|By default, html component will be mounted at first show and unmount only when your tooltip component is unmounted. When you set unmountHTMLWhenHide is `true`, it will be unmounted whenever tooltip is hidden.|\n|size|`regular`|`small` `regular` `big`|Specifies how big the tooltip is.|\n|sticky|`false`|`true` `false`|Specifies whether the tooltip should stick to its element reference when it's showing (for example, if the element is animated/moves).|\n|stickyDuration|200|Any number (milliseconds)|Specifies the 'smoothing' transition when the popper's position updates as its element moves.|\n|touchHold|false|`true` `false`|Changes the trigger behavior on touch devices. It will change it from a tap to show and tap off to hide, to a tap and hold to show, and a release to hide.|\n|onShow|noop|function|Callback when the tooltip has been triggered and has started to transition in|\n|onShown|noop|function|Callback when the tooltip has fully transitioned in and is showing|\n|onHide|noop|function|Callback when the tooltip has begun to transition out|\n|onHidden|noop|function|Callback when the tooltip has fully transitioned out and is hidden|\n|theme|`dark`|`dark` `light` `transparent`|The CSS styling theme.|\n|className|''|string|className of container|\n|style|{}|React inline style (object)|style of container|\n\n\n## Custom tooltip content\n\nYou need to pass element to option `html`\n\n```javascript\nimport {\n Tooltip,\n} from 'react-tippy';\n\n\n\n \n Hello\n \n \n )}\n>\n // ...\n\n\n```\n\n## Interactive html tooltip\nYou can use `interactive` prop and `html` for your interactive tooltip\n\n```javascript\n \n
{tooltipContent}
\n {setTooltipContent(e.target.value)}}\n />\n \n )}\n >\n ...\n \n```\n\n## Show/hide your tooltip manually\n\n```javascript\n {console.log('call'); setIsOpen(false)}}\n>\n { setIsOpen(true) }}>\n This will show {tooltipContent}\n \n\n```\n\n## Browser support\n\nTippy gracefully degrades on older browsers (and with JavaScript disabled) by using the browser's default title tooltip.\n\nIf you want to support older browsers, please add `polyfill` by yourself\n\n### Supported browsers\n\nBrowsers which support requestAnimationFrame. See [caniuse](https://caniuse.com/#search=requestAnimationFrame). If your audience has low Opera Mini usage (common in western countries), then support should be >96%.\n\n### Touch devices\n\nTippy works on touch devices almost the same as on desktop/mouse devices. However on iOS devices, in order for tooltips to close when tapping anywhere on the body and to trigger hover events on non-clickable elements, a .tippy-touch { cursor: pointer !important; } class is added to the body.\n\n## Accessibility\n\nTooltips have ARIA labelling to ensure accessibility.\n\n\n# Troubleshoot\n\n## I cannot connect html props with redux connect. Or can I use context in tooltip content?\n\nreact-tippy provides `useContext` for Tooltip component. It can allow you to use context in tooltip content. Therefore, you can totally connect it to redux.\n\n```javascript\n\n )}\n>\n Click here\n\n```\n\n## Could I change tooltip style (width, height, ...)?\n\nYou can change css to have your tooltip width. If you use `html` props, you can do like this\n\n```javascript\nhtml={(\n
\n // content here\n
\n)}\n```\n\n\n# License\nMIT. Also check Popper.js' license.\n","readmeFilename":"README.md"}