react-tooltip 4.5.1 → 5.0.0-beta.0

package/dist/react-tooltip.umd.min.js

@@ -0,0 +1,6 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactTooltip={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(t),o={exports:{}},i={};!function(){var e=r.default,t=Symbol.for("react.element"),n=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),l=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),d=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),m=Symbol.for("react.offscreen"),h=Symbol.iterator;var g=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function v(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];b("error",e,n)}function b(e,t,n){var r=g.ReactDebugCurrentFrame.getStackAddendum();""!==r&&(t+="%s",n=n.concat([r]));var o=n.map((function(e){return String(e)}));o.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,o)}var w;function x(e){return e.displayName||"Context"}function S(e){if(null==e)return null;if("number"==typeof e.tag&&v("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return"Fragment";case n:return"Portal";case l:return"Profiler";case a:return"StrictMode";case f:return"Suspense";case p:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return x(e)+".Consumer";case s:return x(e._context)+".Provider";case u:return function(e,t,n){var r=e.displayName;if(r)return r;var o=t.displayName||t.name||"";return""!==o?n+"("+o+")":n}(e,e.render,"ForwardRef");case d:var t=e.displayName||null;return null!==t?t:S(e.type)||"Memo";case y:var r=e,i=r._payload,m=r._init;try{return S(m(i))}catch(e){return null}}return null}w=Symbol.for("react.module.reference");var _,R,k,T,j,O,E,P=Object.assign,A=0;function N(){}N.__reactDisabledLog=!0;var L,C=g.ReactCurrentDispatcher;function $(e,t,n){if(void 0===L)try{throw Error()}catch(e){var r=e.stack.trim().match(/\n( *(at )?)/);L=r&&r[1]||""}return"\n"+L+e}var D,F=!1,I="function"==typeof WeakMap?WeakMap:Map;function W(e,t){if(!e||F)return"";var n,r=D.get(e);if(void 0!==r)return r;F=!0;var o,i=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=C.current,C.current=null,function(){if(0===A){_=console.log,R=console.info,k=console.warn,T=console.error,j=console.group,O=console.groupCollapsed,E=console.groupEnd;var e={configurable:!0,enumerable:!0,value:N,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}A++}();try{if(t){var a=function(){throw Error()};if(Object.defineProperty(a.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(a,[])}catch(e){n=e}Reflect.construct(e,[],a)}else{try{a.call()}catch(e){n=e}e.call(a.prototype)}}else{try{throw Error()}catch(e){n=e}e()}}catch(t){if(t&&n&&"string"==typeof t.stack){for(var l=t.stack.split("\n"),s=n.stack.split("\n"),c=l.length-1,u=s.length-1;c>=1&&u>=0&&l[c]!==s[u];)u--;for(;c>=1&&u>=0;c--,u--)if(l[c]!==s[u]){if(1!==c||1!==u)do{if(c--,--u<0||l[c]!==s[u]){var f="\n"+l[c].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&D.set(e,f),f}}while(c>=1&&u>=0);break}}}finally{F=!1,C.current=o,function(){if(0==--A){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:P({},e,{value:_}),info:P({},e,{value:R}),warn:P({},e,{value:k}),error:P({},e,{value:T}),group:P({},e,{value:j}),groupCollapsed:P({},e,{value:O}),groupEnd:P({},e,{value:E})})}A<0&&v("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=i}var p=e?e.displayName||e.name:"",d=p?$(p):"";return"function"==typeof e&&D.set(e,d),d}function H(e,t,n){if(null==e)return"";if("function"==typeof e)return W(e,!(!(r=e.prototype)||!r.isReactComponent));var r;if("string"==typeof e)return $(e);switch(e){case f:return $("Suspense");case p:return $("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return W(e.render,!1);case d:return H(e.type,t,n);case y:var o=e,i=o._payload,a=o._init;try{return H(a(i),t,n)}catch(e){}}return""}D=new I;var M=Object.prototype.hasOwnProperty,U={},B=g.ReactDebugCurrentFrame;function V(e){if(e){var t=e._owner,n=H(e.type,e._source,t?t.type:null);B.setExtraStackFrame(n)}else B.setExtraStackFrame(null)}var q=Array.isArray;function z(e){return q(e)}function Y(e){return""+e}function X(e){if(function(e){try{return Y(e),!1}catch(e){return!0}}(e))return v("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),Y(e)}var J,K,Z,G=g.ReactCurrentOwner,Q={key:!0,ref:!0,__self:!0,__source:!0};Z={};function ee(e,n,r,o,i){var a,l={},s=null,c=null;for(a in void 0!==r&&(X(r),s=""+r),function(e){if(M.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(n)&&(X(n.key),s=""+n.key),function(e){if(M.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}(n)&&(c=n.ref,function(e,t){if("string"==typeof e.ref&&G.current&&t&&G.current.stateNode!==t){var n=S(G.current.type);Z[n]||(v('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',S(G.current.type),e.ref),Z[n]=!0)}}(n,i)),n)M.call(n,a)&&!Q.hasOwnProperty(a)&&(l[a]=n[a]);if(e&&e.defaultProps){var u=e.defaultProps;for(a in u)void 0===l[a]&&(l[a]=u[a])}if(s||c){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;s&&function(e,t){var n=function(){J||(J=!0,v("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}(l,f),c&&function(e,t){var n=function(){K||(K=!0,v("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,"ref",{get:n,configurable:!0})}(l,f)}return function(e,n,r,o,i,a,l){var s={$$typeof:t,type:e,key:n,ref:r,props:l,_owner:a,_store:{}};return Object.defineProperty(s._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(s,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(s,"_source",{configurable:!1,enumerable:!1,writable:!1,value:i}),Object.freeze&&(Object.freeze(s.props),Object.freeze(s)),s}(e,s,c,i,o,G.current,l)}var te,ne=g.ReactCurrentOwner,re=g.ReactDebugCurrentFrame;function oe(e){if(e){var t=e._owner,n=H(e.type,e._source,t?t.type:null);re.setExtraStackFrame(n)}else re.setExtraStackFrame(null)}function ie(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function ae(){if(ne.current){var e=S(ne.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}te=!1;var le={};function se(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var n=function(e){var t=ae();if(!t){var n="string"==typeof e?e:e.displayName||e.name;n&&(t="\n\nCheck the top-level render call using <"+n+">.")}return t}(t);if(!le[n]){le[n]=!0;var r="";e&&e._owner&&e._owner!==ne.current&&(r=" It was passed a child from "+S(e._owner.type)+"."),oe(e),v('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',n,r),oe(null)}}}function ce(e,t){if("object"==typeof e)if(z(e))for(var n=0;n<e.length;n++){var r=e[n];ie(r)&&se(r,t)}else if(ie(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var t=h&&e[h]||e["@@iterator"];return"function"==typeof t?t:null}(e);if("function"==typeof o&&o!==e.entries)for(var i,a=o.call(e);!(i=a.next()).done;)ie(i.value)&&se(i.value,t)}}function ue(e){var t,n=e.type;if(null!=n&&"string"!=typeof n){if("function"==typeof n)t=n.propTypes;else{if("object"!=typeof n||n.$$typeof!==u&&n.$$typeof!==d)return;t=n.propTypes}if(t){var r=S(n);!function(e,t,n,r,o){var i=Function.call.bind(M);for(var a in e)if(i(e,a)){var l=void 0;try{if("function"!=typeof e[a]){var s=Error((r||"React class")+": "+n+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw s.name="Invariant Violation",s}l=e[a](t,a,r,n,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){l=e}!l||l instanceof Error||(V(o),v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",r||"React class",n,a,typeof l),V(null)),l instanceof Error&&!(l.message in U)&&(U[l.message]=!0,V(o),v("Failed %s type: %s",n,l.message),V(null))}}(t,e.props,"prop",r,e)}else if(void 0!==n.PropTypes&&!te){te=!0,v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",S(n)||"Unknown")}"function"!=typeof n.getDefaultProps||n.getDefaultProps.isReactClassApproved||v("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function fe(e,n,r,i,h,g){var b=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===l||e===a||e===f||e===p||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===d||e.$$typeof===s||e.$$typeof===c||e.$$typeof===u||e.$$typeof===w||void 0!==e.getModuleId)}(e);if(!b){var x="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(x+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var _,R=function(e){return void 0!==e?"\n\nCheck your code at "+e.fileName.replace(/^.*[\\\/]/,"")+":"+e.lineNumber+".":""}(h);x+=R||ae(),null===e?_="null":z(e)?_="array":void 0!==e&&e.$$typeof===t?(_="<"+(S(e.type)||"Unknown")+" />",x=" Did you accidentally export a JSX literal instead of a component?"):_=typeof e,v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",_,x)}var k=ee(e,n,r,h,g);if(null==k)return k;if(b){var T=n.children;if(void 0!==T)if(i)if(z(T)){for(var j=0;j<T.length;j++)ce(T[j],e);Object.freeze&&Object.freeze(T)}else v("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else ce(T,e)}return e===o?function(e){for(var t=Object.keys(e.props),n=0;n<t.length;n++){var r=t[n];if("children"!==r&&"key"!==r){oe(e),v("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",r),oe(null);break}}null!==e.ref&&(oe(e),v("Invalid attribute `ref` supplied to `React.Fragment`."),oe(null))}(k):ue(k),k}var pe=function(e,t,n){return fe(e,t,n,!1)},de=function(e,t,n){return fe(e,t,n,!0)};i.Fragment=o,i.jsx=pe,i.jsxs=de}(),function(e){e.exports=i}(o);var a={exports:{}};
+/*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  */!function(e){!function(){var t={}.hasOwnProperty;function n(){for(var e=[],r=0;r<arguments.length;r++){var o=arguments[r];if(o){var i=typeof o;if("string"===i||"number"===i)e.push(o);else if(Array.isArray(o)){if(o.length){var a=n.apply(null,o);a&&e.push(a)}}else if("object"===i){if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]")){e.push(o.toString());continue}for(var l in o)t.call(o,l)&&o[l]&&e.push(l)}}}return e.join(" ")}e.exports?(n.default=n,e.exports=n):window.classNames=n}()}(a);var l=a.exports;const s=(e,t,n)=>{let r;return function(){const o=this,i=arguments,a=()=>{r=null,n||e.apply(o,i)},l=n&&!r;clearTimeout(r),r=setTimeout(a,t),l&&e.apply(o,i)}},c=({content:e})=>o.exports.jsx("span",{dangerouslySetInnerHTML:{__html:e}});function u(e){return e.split("-")[0]}function f(e){return e.split("-")[1]}function p(e){return["top","bottom"].includes(u(e))?"x":"y"}function d(e){return"y"===e?"height":"width"}function y(e,t,n){let{reference:r,floating:o}=e;const i=r.x+r.width/2-o.width/2,a=r.y+r.height/2-o.height/2,l=p(t),s=d(l),c=r[s]/2-o[s]/2,y="x"===l;let m;switch(u(t)){case"top":m={x:i,y:r.y-o.height};break;case"bottom":m={x:i,y:r.y+r.height};break;case"right":m={x:r.x+r.width,y:a};break;case"left":m={x:r.x-o.width,y:a};break;default:m={x:r.x,y:r.y}}switch(f(t)){case"start":m[l]-=c*(n&&y?-1:1);break;case"end":m[l]+=c*(n&&y?-1:1)}return m}function m(e){return"number"!=typeof e?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(e):{top:e,right:e,bottom:e,left:e}}function h(e){return{...e,top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height}}async function g(e,t){var n;void 0===t&&(t={});const{x:r,y:o,platform:i,rects:a,elements:l,strategy:s}=e,{boundary:c="clippingAncestors",rootBoundary:u="viewport",elementContext:f="floating",altBoundary:p=!1,padding:d=0}=t,y=m(d),g=l[p?"floating"===f?"reference":"floating":f],v=h(await i.getClippingRect({element:null==(n=await(null==i.isElement?void 0:i.isElement(g)))||n?g:g.contextElement||await(null==i.getDocumentElement?void 0:i.getDocumentElement(l.floating)),boundary:c,rootBoundary:u,strategy:s})),b=h(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===f?{...a.floating,x:r,y:o}:a.reference,offsetParent:await(null==i.getOffsetParent?void 0:i.getOffsetParent(l.floating)),strategy:s}):a[f]);return{top:v.top-b.top+y.top,bottom:b.bottom-v.bottom+y.bottom,left:v.left-b.left+y.left,right:b.right-v.right+y.right}}const v=Math.min,b=Math.max;function w(e,t,n){return b(e,v(t,n))}const x={left:"right",right:"left",bottom:"top",top:"bottom"};function S(e){return e.replace(/left|right|bottom|top/g,(e=>x[e]))}const _={start:"end",end:"start"};function R(e){return e.replace(/start|end/g,(e=>_[e]))}const k=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n;const{placement:r,middlewareData:o,rects:i,initialPlacement:a,platform:l,elements:s}=t,{mainAxis:c=!0,crossAxis:y=!0,fallbackPlacements:m,fallbackStrategy:h="bestFit",flipAlignment:v=!0,...b}=e,w=u(r),x=m||(w===a||!v?[S(a)]:function(e){const t=S(e);return[R(e),t,R(t)]}(a)),_=[a,...x],k=await g(t,b),T=[];let j=(null==(n=o.flip)?void 0:n.overflows)||[];if(c&&T.push(k[w]),y){const{main:e,cross:t}=function(e,t,n){void 0===n&&(n=!1);const r=f(e),o=p(e),i=d(o);let a="x"===o?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return t.reference[i]>t.floating[i]&&(a=S(a)),{main:a,cross:S(a)}}(r,i,await(null==l.isRTL?void 0:l.isRTL(s.floating)));T.push(k[e],k[t])}if(j=[...j,{placement:r,overflows:T}],!T.every((e=>e<=0))){var O,E;const e=(null!=(O=null==(E=o.flip)?void 0:E.index)?O:0)+1,t=_[e];if(t)return{data:{index:e,overflows:j},reset:{placement:t}};let n="bottom";switch(h){case"bestFit":{var P;const e=null==(P=j.map((e=>[e,e.overflows.filter((e=>e>0)).reduce(((e,t)=>e+t),0)])).sort(((e,t)=>e[1]-t[1]))[0])?void 0:P[0].placement;e&&(n=e);break}case"initialPlacement":n=a}if(r!==n)return{reset:{placement:n}}}return{}}}};const T=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){const{x:n,y:r}=t,o=await async function(e,t){const{placement:n,platform:r,elements:o}=e,i=await(null==r.isRTL?void 0:r.isRTL(o.floating)),a=u(n),l=f(n),s="x"===p(n),c=["left","top"].includes(a)?-1:1,d=i&&s?-1:1,y="function"==typeof t?t(e):t;let{mainAxis:m,crossAxis:h,alignmentAxis:g}="number"==typeof y?{mainAxis:y,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...y};return l&&"number"==typeof g&&(h="end"===l?-1*g:g),s?{x:h*d,y:m*c}:{x:m*c,y:h*d}}(t,e);return{x:n+o.x,y:r+o.y,data:o}}}};function j(e){return e&&e.document&&e.location&&e.alert&&e.setInterval}function O(e){if(null==e)return window;if(!j(e)){const t=e.ownerDocument;return t&&t.defaultView||window}return e}function E(e){return O(e).getComputedStyle(e)}function P(e){return j(e)?"":e?(e.nodeName||"").toLowerCase():""}function A(){const e=navigator.userAgentData;return null!=e&&e.brands?e.brands.map((e=>e.brand+"/"+e.version)).join(" "):navigator.userAgent}function N(e){return e instanceof O(e).HTMLElement}function L(e){return e instanceof O(e).Element}function C(e){if("undefined"==typeof ShadowRoot)return!1;return e instanceof O(e).ShadowRoot||e instanceof ShadowRoot}function $(e){const{overflow:t,overflowX:n,overflowY:r,display:o}=E(e);return/auto|scroll|overlay|hidden/.test(t+r+n)&&!["inline","contents"].includes(o)}function D(e){return["table","td","th"].includes(P(e))}function F(e){const t=/firefox/i.test(A()),n=E(e),r=n.backdropFilter||n.WebkitBackdropFilter;return"none"!==n.transform||"none"!==n.perspective||!!r&&"none"!==r||t&&"filter"===n.willChange||t&&!!n.filter&&"none"!==n.filter||["transform","perspective"].some((e=>n.willChange.includes(e)))||["paint","layout","strict","content"].some((e=>{const t=n.contain;return null!=t&&t.includes(e)}))}function I(){return!/^((?!chrome|android).)*safari/i.test(A())}function W(e){return["html","body","#document"].includes(P(e))}const H=Math.min,M=Math.max,U=Math.round;function B(e,t,n){var r,o,i,a;void 0===t&&(t=!1),void 0===n&&(n=!1);const l=e.getBoundingClientRect();let s=1,c=1;t&&N(e)&&(s=e.offsetWidth>0&&U(l.width)/e.offsetWidth||1,c=e.offsetHeight>0&&U(l.height)/e.offsetHeight||1);const u=L(e)?O(e):window,f=!I()&&n,p=(l.left+(f&&null!=(r=null==(o=u.visualViewport)?void 0:o.offsetLeft)?r:0))/s,d=(l.top+(f&&null!=(i=null==(a=u.visualViewport)?void 0:a.offsetTop)?i:0))/c,y=l.width/s,m=l.height/c;return{width:y,height:m,top:d,right:p+y,bottom:d+m,left:p,x:p,y:d}}function V(e){return(t=e,(t instanceof O(t).Node?e.ownerDocument:e.document)||window.document).documentElement;var t}function q(e){return L(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function z(e){return B(V(e)).left+q(e).scrollLeft}function Y(e,t,n){const r=N(t),o=V(t),i=B(e,r&&function(e){const t=B(e);return U(t.width)!==e.offsetWidth||U(t.height)!==e.offsetHeight}(t),"fixed"===n);let a={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(r||!r&&"fixed"!==n)if(("body"!==P(t)||$(o))&&(a=q(t)),N(t)){const e=B(t,!0);l.x=e.x+t.clientLeft,l.y=e.y+t.clientTop}else o&&(l.x=z(o));return{x:i.left+a.scrollLeft-l.x,y:i.top+a.scrollTop-l.y,width:i.width,height:i.height}}function X(e){if("html"===P(e))return e;const t=e.assignedSlot||e.parentNode||(C(e)?e.host:null)||V(e);return C(t)?t.host:t}function J(e){return N(e)&&"fixed"!==E(e).position?e.offsetParent:null}function K(e){const t=O(e);let n=J(e);for(;n&&D(n)&&"static"===E(n).position;)n=J(n);return n&&("html"===P(n)||"body"===P(n)&&"static"===E(n).position&&!F(n))?t:n||function(e){let t=X(e);for(;N(t)&&!W(t);){if(F(t))return t;t=X(t)}return null}(e)||t}function Z(e){if(N(e))return{width:e.offsetWidth,height:e.offsetHeight};const t=B(e);return{width:t.width,height:t.height}}function G(e){const t=X(e);return W(t)?e.ownerDocument.body:N(t)&&$(t)?t:G(t)}function Q(e,t){var n;void 0===t&&(t=[]);const r=G(e),o=r===(null==(n=e.ownerDocument)?void 0:n.body),i=O(r),a=o?[i].concat(i.visualViewport||[],$(r)?r:[]):r,l=t.concat(a);return o?l:l.concat(Q(a))}function ee(e,t,n){return"viewport"===t?h(function(e,t){const n=O(e),r=V(e),o=n.visualViewport;let i=r.clientWidth,a=r.clientHeight,l=0,s=0;if(o){i=o.width,a=o.height;const e=I();(e||!e&&"fixed"===t)&&(l=o.offsetLeft,s=o.offsetTop)}return{width:i,height:a,x:l,y:s}}(e,n)):L(t)?function(e,t){const n=B(e,!1,"fixed"===t),r=n.top+e.clientTop,o=n.left+e.clientLeft;return{top:r,left:o,x:o,y:r,right:o+e.clientWidth,bottom:r+e.clientHeight,width:e.clientWidth,height:e.clientHeight}}(t,n):h(function(e){var t;const n=V(e),r=q(e),o=null==(t=e.ownerDocument)?void 0:t.body,i=M(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=M(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0);let l=-r.scrollLeft+z(e);const s=-r.scrollTop;return"rtl"===E(o||n).direction&&(l+=M(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:l,y:s}}(V(e)))}const te={getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:r,strategy:o}=e;const i="clippingAncestors"===n?function(e){let t=Q(e).filter((e=>L(e)&&"body"!==P(e))),n=e,r=null;for(;L(n)&&!W(n);){const e=E(n);"static"===e.position&&r&&["absolute","fixed"].includes(r.position)&&!F(n)?t=t.filter((e=>e!==n)):r=e,n=X(n)}return t}(t):[].concat(n),a=[...i,r],l=a[0],s=a.reduce(((e,n)=>{const r=ee(t,n,o);return e.top=M(r.top,e.top),e.right=H(r.right,e.right),e.bottom=H(r.bottom,e.bottom),e.left=M(r.left,e.left),e}),ee(t,l,o));return{width:s.right-s.left,height:s.bottom-s.top,x:s.left,y:s.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:n,strategy:r}=e;const o=N(n),i=V(n);if(n===i)return t;let a={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if((o||!o&&"fixed"!==r)&&(("body"!==P(n)||$(i))&&(a=q(n)),N(n))){const e=B(n,!0);l.x=e.x+n.clientLeft,l.y=e.y+n.clientTop}return{...t,x:t.x-a.scrollLeft+l.x,y:t.y-a.scrollTop+l.y}},isElement:L,getDimensions:Z,getOffsetParent:K,getDocumentElement:V,getElementRects:e=>{let{reference:t,floating:n,strategy:r}=e;return{reference:Y(t,K(n),r),floating:{...Z(n),x:0,y:0}}},getClientRects:e=>Array.from(e.getClientRects()),isRTL:e=>"rtl"===E(e).direction},ne=(e,t,n)=>(async(e,t,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:i=[],platform:a}=n,l=i.filter(Boolean),s=await(null==a.isRTL?void 0:a.isRTL(t));if(null==a&&console.error(["Floating UI: `platform` property was not passed to config. If you","want to use Floating UI on the web, install @floating-ui/dom","instead of the /core package. Otherwise, you can create your own","`platform`: https://floating-ui.com/docs/platform"].join(" ")),l.filter((e=>{let{name:t}=e;return"autoPlacement"===t||"flip"===t})).length>1)throw new Error(["Floating UI: duplicate `flip` and/or `autoPlacement` middleware","detected. This will lead to an infinite loop. Ensure only one of","either has been passed to the `middleware` array."].join(" "));e&&t||console.error(["Floating UI: The reference and/or floating element was not defined","when `computePosition()` was called. Ensure that both elements have","been created and can be measured."].join(" "));let c=await a.getElementRects({reference:e,floating:t,strategy:o}),{x:u,y:f}=y(c,r,s),p=r,d={},m=0;for(let n=0;n<l.length;n++){const{name:i,fn:h}=l[n],{x:g,y:v,data:b,reset:w}=await h({x:u,y:f,initialPlacement:r,placement:p,strategy:o,middlewareData:d,rects:c,platform:a,elements:{reference:e,floating:t}});u=null!=g?g:u,f=null!=v?v:f,d={...d,[i]:{...d[i],...b}},m>50&&console.warn(["Floating UI: The middleware lifecycle appears to be running in an","infinite loop. This is usually caused by a `reset` continually","being returned without a break condition."].join(" ")),w&&m<=50&&(m++,"object"==typeof w&&(w.placement&&(p=w.placement),w.rects&&(c=!0===w.rects?await a.getElementRects({reference:e,floating:t,strategy:o}):w.rects),({x:u,y:f}=y(c,p,s))),n=-1)}return{x:u,y:f,placement:p,strategy:o,middlewareData:d}})(e,t,{platform:te,...n}),re=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:n=null,place:r="top",offset:o=10})=>{if(null===e)return console.error("The reference element for tooltip was not defined: ",e),{tooltipStyles:{},tooltipArrowStyles:{}};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{}};const i=[T(Number(o)),k(),(a={padding:5},void 0===a&&(a={}),{name:"shift",options:a,async fn(e){const{x:t,y:n,placement:r}=e,{mainAxis:o=!0,crossAxis:i=!1,limiter:l={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...s}=a,c={x:t,y:n},f=await g(e,s),d=p(u(r)),y="x"===d?"y":"x";let m=c[d],h=c[y];if(o){const e="y"===d?"bottom":"right";m=w(m+f["y"===d?"top":"left"],m,m-f[e])}if(i){const e="y"===y?"bottom":"right";h=w(h+f["y"===y?"top":"left"],h,h-f[e])}const v=l.fn({...e,[d]:m,[y]:h});return{...v,data:{x:v.x-t,y:v.y-n}}}})];var a;return n?(i.push((e=>({name:"arrow",options:e,async fn(t){const{element:n,padding:r=0}=null!=e?e:{},{x:o,y:i,placement:a,rects:l,platform:s}=t;if(null==n)return console.warn("Floating UI: No `element` was passed to the `arrow` middleware."),{};const c=m(r),u={x:o,y:i},y=p(a),h=f(a),g=d(y),v=await s.getDimensions(n),b="y"===y?"top":"left",x="y"===y?"bottom":"right",S=l.reference[g]+l.reference[y]-u[y]-l.floating[g],_=u[y]-l.reference[y],R=await(null==s.getOffsetParent?void 0:s.getOffsetParent(n));let k=R?"y"===y?R.clientHeight||0:R.clientWidth||0:0;0===k&&(k=l.floating[g]);const T=S/2-_/2,j=c[b],O=k-v[g]-c[x],E=k/2-v[g]/2+T,P=w(j,E,O),A=("start"===h?c[b]:c[x])>0&&E!==P&&l.reference[g]<=l.floating[g];return{[y]:u[y]-(A?E<j?j-E:O-E:0),data:{[y]:P,centerOffset:E-P}}}}))({element:n})),ne(e,t,{placement:r,middleware:i}).then((({x:e,y:t,placement:n,middlewareData:r})=>{const o={left:`${e}px`,top:`${t}px`},{x:i,y:a}=r.arrow;return{tooltipStyles:o,tooltipArrowStyles:{left:null!=i?`${i}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",[{top:"bottom",right:"left",bottom:"top",left:"right"}[n.split("-")[0]]]:"-4px"}}}))):ne(e,t,{placement:"bottom",middleware:i}).then((({x:e,y:t})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{}})))};var oe={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",show:"styles-module_show__2NboJ",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const ie=({id:e=t.useId(),className:n,classNameArrow:r,variant:i="dark",anchorId:a,place:u="top",offset:f=10,events:p=["hover"],wrapper:d="div",children:y=null,delayShow:m=0,delayHide:h=0,isHtmlContent:g=!1,content:v,isOpen:b,setIsOpen:w})=>{const x=t.createRef(),S=t.createRef(),_=t.useRef(),R=t.useRef(),[k,T]=t.useState({}),[j,O]=t.useState({}),[E,P]=t.useState(!1),A=e=>{w?w(e):void 0===b&&P(e)},N=()=>{w?w(!b):void 0===b&&P((e=>!e))},L=s((()=>{m?(_.current&&clearTimeout(_.current),_.current=setTimeout((()=>{A(!0)}),m)):A(!0),R.current&&clearTimeout(R.current)}),50),C=s((()=>{h?(R.current&&clearTimeout(R.current),R.current=setTimeout((()=>{A(!1)}),h)):A(!1),E&&_.current?clearTimeout(_.current):!E&&_.current&&(R.current=setTimeout((()=>{A(!1)}),2*m))}),50);return t.useEffect((()=>{const e=document.querySelector(`#${a}`);if(!e)return()=>{};const t=[];return p.find((e=>"click"===e))&&t.push({event:"click",listener:N}),p.find((e=>"hover"===e))&&t.push({event:"mouseenter",listener:L},{event:"mouseleave",listener:C},{event:"focus",listener:L},{event:"blur",listener:C}),t.forEach((({event:t,listener:n})=>{null==e||e.addEventListener(t,n)})),()=>{t.forEach((({event:t,listener:n})=>{null==e||e.removeEventListener(t,n)}))}}),[a,p,h,m]),t.useEffect((()=>{const e=document.querySelector(`#${a}`);return re({place:u,offset:f,elementReference:e,tooltipReference:x.current,tooltipArrowReference:S.current}).then((e=>{Object.keys(e.tooltipStyles).length&&T(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&O(e.tooltipArrowStyles)})),()=>{_.current=void 0,R.current=void 0}}),[E,b,a]),o.exports.jsxs(d,{id:e,role:"tooltip",className:l(oe.tooltip,oe[i],n,{[oe.show]:b||E}),style:k,ref:x,children:[y||(g?o.exports.jsx(c,{content:v}):v),o.exports.jsx("div",{className:l(oe.arrow,r),style:j,ref:S})]})},ae=["place","content","html","variant","offset","wrapper","events","delay-show","delay-hide"];e.Tooltip=({id:e,anchorId:n,content:r,html:i,className:a,classNameArrow:l,variant:s="dark",place:c="top",offset:u=10,wrapper:f="div",children:p=null,events:d=["hover"],delayShow:y=0,delayHide:m=0,getContent:h,isOpen:g,setIsOpen:v})=>{const[b,w]=t.useState(r||i),[x,S]=t.useState(c),[_,R]=t.useState(s),[k,T]=t.useState(u),[j,O]=t.useState(y),[E,P]=t.useState(m),[A,N]=t.useState(f),[L,C]=t.useState(d),[$,D]=t.useState(Boolean(i)),F=e=>{const t=Object.keys(e);let n=null;const r={place:e=>{S(e)},content:e=>{D(!0),w(h?h(e):e)},html:e=>{D(!0),w(h?h(e):e)},variant:e=>{R(e)},offset:e=>{T(e)},wrapper:e=>{N(e)},events:e=>{const t=e.split(" ");C(t)},"delay-show":e=>{O(Number(e))},"delay-hide":e=>{P(Number(e))}};t.forEach((t=>{n=t.replace("data-tooltip-",""),ae.includes(n)&&r[n](e[t])}))};t.useEffect((()=>{if(!n)return()=>{};const e=document.querySelector(`#${n}`);if(!e)return()=>{};r&&h&&w(h(r));const t=new MutationObserver((t=>{t.forEach((t=>{if("attributes"===t.type){const n=(({element:e,attributeName:t})=>({[t]:e.getAttribute(t)}))({element:e,attributeName:t.attributeName});F(n)}}))}));t.observe(e,{attributes:!0,childList:!1,subtree:!1});const o=(e=>null==e?void 0:e.getAttributeNames().reduce(((t,n)=>(n.includes("data-tooltip-")&&(t[n]=null==e?void 0:e.getAttribute(n)),t)),{}))(e);return F(o),()=>{t.disconnect()}}),[n]);const I={id:e,anchorId:n,className:a,classNameArrow:l,content:b,isHtmlContent:$,place:x,variant:_,offset:k,wrapper:A,events:L,delayShow:j,delayHide:E,isOpen:g,setIsOpen:v};return p?o.exports.jsx(ie,{...I,children:p}):o.exports.jsx(ie,{...I})},Object.defineProperty(e,"__esModule",{value:!0})}));

package/docs/README.md

@@ -0,0 +1,50 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+You can link react packages and react-tooltip to this repository, but this should not be updated in github:
+
+In package.json:
+```
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom",
+    "react-tooltip": "link:.."
+```
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

package/docs/docs/examples/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Examples",
+  "position": 4,
+  "link": {
+    "type": "generated-index"
+  }
+}

package/docs/docs/examples/basic-examples.mdx

@@ -0,0 +1,68 @@
+---
+sidebar_position: 1
+---
+
+# Basic examples
+
+Basic examples of use ReactTooltip component.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Props
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css'
+
+<a id="props-basic"> ◕‿‿◕ </a>
+
+<Tooltip anchorId="props-basic" content="hello world!" />
+```
+
+<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
+<Tooltip anchorId="props-basic" content="hello world!" />
+
+### Data attributes
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="attributes-basic" data-tooltip-content="hello world!"> ◕‿‿◕ </a>
+
+<Tooltip anchorId="attributes-basic" />
+```
+
+<TooltipAnchor id="attributes-basic" data-tooltip-content="hello world!">
+  ◕‿‿◕
+</TooltipAnchor>
+<Tooltip anchorId="attributes-basic" />
+
+---
+
+To check all available options, please check `options` docs

package/docs/docs/examples/children.mdx

@@ -0,0 +1,67 @@
+---
+sidebar_position: 1
+---
+
+# Children
+
+Children for content example of ReactTooltip component use case.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Using `children` as content
+
+When using `children` as content, `content` and `html` params will be ignored and only children will be shown.
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor-children"> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-children">
+  <div>
+    <h1>Tooltip</h1>
+    <ul>
+      <li>Lorem</li>
+      <li>Ipsum</li>
+    </ul>
+  </div>
+</Tooltip>
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor-children">◕‿‿◕</TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor-children">
+    <div>
+      <h1>Tooltip</h1>
+      <ul>
+        <li>Lorem</li>
+        <li>Ipsum</li>
+      </ul>
+    </div>
+  </Tooltip>
+</div>

package/docs/docs/examples/content.mdx

@@ -0,0 +1,80 @@
+---
+sidebar_position: 1
+---
+
+# Content
+
+Content in ReactTooltip component.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Using `content`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor"> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor" content="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip" place="left" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
+  <Tooltip
+    anchorId="tooltip-anchor"
+    content="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
+  />
+</div>
+
+### Using `data-tooltip-content`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a
+  id="tooltip-anchor-data-html"
+  data-tooltip-content="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
+> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-data-html" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor
+    id="tooltip-anchor-html"
+    data-tooltip-content="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor-html" />
+</div>
+
+#### Observations
+
+- When using `data-tooltip-content` the HTML tags works by default like [HTML](./html.mdx) param
+- When using prop `content` the HTML doesn't work by default, use prop `html` instead of this

package/docs/docs/examples/delay.mdx

@@ -0,0 +1,84 @@
+---
+sidebar_position: 1
+---
+
+# Delays
+
+Delays available in ReactTooltip component.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Delay to Hide tooltip
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a
+  id="tooltip-anchor-hide"
+  data-tooltip-content="hover on me will keep the tooltip"
+  data-tooltip-delay-hide={3000}
+> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-hide" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor
+    id="tooltip-anchor-hide"
+    data-tooltip-content="hover on me will keep the tooltip"
+    data-tooltip-delay-hide={3000}
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor-hide" />
+</div>
+
+### Delay to Show tooltip
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a
+  id="tooltip-anchor-show"
+  data-tooltip-content="hover on me will keep the tooltip"
+  data-tooltip-delay-show={3000}
+> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-show" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor
+    id="tooltip-anchor-show"
+    data-tooltip-content="hover on me will keep the tooltip"
+    data-tooltip-delay-show={3000}
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor-show" />
+</div>

package/docs/docs/examples/events.mdx

@@ -0,0 +1,85 @@
+---
+sidebar_position: 1
+---
+
+# Events
+
+Events available in ReactTooltip component.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Using `hover`
+
+This is the default of ReactTooltip events options.
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor"> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor" content="Hello World!" events={['hover']} />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor" content="Hello World!" events={['hover']} />
+</div>
+
+### Using `click`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor-click"> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-click" content="Hello World!" events={['click']} />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor-click">◕‿‿◕</TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor-click" content="Hello World!" events={['click']} />
+</div>
+
+### Using `hover` and `click`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor-hover-click"> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-hover-click" content="Hello World!" events={['hover', 'click']} />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor-hover-click">◕‿‿◕</TooltipAnchor>
+  <Tooltip
+    anchorId="tooltip-anchor-hover-click"
+    content="Hello World!"
+    events={['hover', 'click']}
+  />
+</div>

package/docs/docs/examples/get-content.mdx

@@ -0,0 +1,58 @@
+---
+sidebar_position: 1
+---
+
+# GetContent
+
+Get content param in ReactTooltip component.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Using `getContent` prop
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor"> ◕‿‿◕ </a>
+<Tooltip
+  anchorId="tooltip-anchor"
+  content="Hello World from"
+  place="left"
+  getContent={(value) => `${value} manipuled message`}
+/>
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
+  <Tooltip
+    anchorId="tooltip-anchor"
+    content="Hello World from"
+    getContent={(value) => `${value} manipuled message`}
+  />
+</div>

package/docs/docs/examples/html.mdx

@@ -0,0 +1,75 @@
+---
+sidebar_position: 1
+---
+
+# HTML
+
+HTML content in ReactTooltip component.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+### Using `html`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a id="tooltip-anchor"> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor" html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip" place="left" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
+  <Tooltip
+    anchorId="tooltip-anchor"
+    html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
+  />
+</div>
+
+### Using `data-tooltip-html`
+
+```jsx
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+<a
+  id="tooltip-anchor-data-html"
+  data-tooltip-html="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
+> ◕‿‿◕ </a>
+<Tooltip anchorId="tooltip-anchor-data-html" />
+```
+
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor
+    id="tooltip-anchor-html"
+    data-tooltip-html="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
+  >
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip anchorId="tooltip-anchor-html" />
+</div>