\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 HeaderWithTooltip = 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|tag|`div`|A HTML element tag name e.g. `span`|Specifies the HTML element used to wrap the content that triggers the tooltip. When using a tooltip inline, `span` is more likely to be valid markup. When using a higher-order component with a block-level element, a `div` or `a` is more likely to be valid markup.|\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","maintainers":[{"name":"ursa","email":"khoathaiviet@gmail.com"}],"time":{"modified":"2022-06-26T08:39:20.896Z","created":"2017-04-11T17:19:39.500Z","0.3.1":"2017-04-11T17:19:39.500Z","0.3.2":"2017-04-11T17:28:39.144Z","0.3.2-1":"2017-04-11T17:40:16.689Z","0.3.2-2":"2017-04-11T18:01:20.198Z","0.3.5":"2017-04-13T03:03:09.717Z","0.3.5-1":"2017-04-13T17:58:00.953Z","0.3.5-2":"2017-04-16T09:50:18.172Z","0.3.5-3":"2017-04-16T10:01:29.179Z","0.4.0":"2017-04-16T16:22:41.069Z","0.4.0-1":"2017-04-16T17:01:29.394Z","0.4.1":"2017-04-17T03:03:42.914Z","0.5.1":"2017-04-20T11:07:09.790Z","0.5.1-1":"2017-04-20T11:10:58.117Z","0.6.1":"2017-04-21T09:30:30.934Z","0.6.1-1":"2017-04-21T11:19:10.925Z","0.6.1-2":"2017-04-21T11:23:42.645Z","0.6.1-3":"2017-04-21T11:41:50.122Z","0.7.0":"2017-04-22T18:28:15.092Z","0.10.0":"2017-04-26T10:03:23.925Z","0.11.1":"2017-05-03T16:43:34.300Z","0.11.1-1":"2017-05-11T08:25:11.363Z","0.12.0":"2017-05-13T05:27:28.252Z","0.12.1":"2017-05-13T05:40:30.103Z","0.14.0":"2017-05-20T11:18:36.089Z","1.0.1":"2017-07-02T10:05:28.395Z","1.0.2":"2017-07-08T07:40:59.454Z","1.2.0":"2017-08-03T10:52:12.827Z","1.2.1":"2017-08-03T11:05:31.649Z","1.2.2":"2017-09-10T08:16:28.598Z","1.2.3":"2018-09-26T08:03:03.697Z","1.2.4":"2019-10-22T05:49:04.085Z","1.2.5":"2019-10-22T06:10:29.947Z","1.2.6":"2019-10-22T06:20:32.931Z","1.2.7":"2019-10-22T06:28:35.885Z","1.2.8":"2019-10-22T06:44:17.434Z","1.3.0":"2019-10-22T06:56:42.828Z","1.3.1":"2019-10-23T00:33:46.817Z","1.3.3":"2020-02-02T22:31:44.259Z","1.3.4":"2020-02-03T05:03:01.071Z","1.4.0":"2020-05-13T03:26:13.591Z"},"homepage":"https://github.com/tvkhoa/react-tippy","repository":{"type":"git","url":"git+https://github.com/tvkhoa/react-tippy.git"},"author":{"name":"Khoa Thai"},"bugs":{"url":"https://github.com/tvkhoa/react-tippy/issues"},"license":"MIT","readmeFilename":"README.md","users":{"kbakba":true}}