├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
    └── prism.js
├── src
    ├── Examples.js
    ├── Select.js
    ├── ToolTipController.js
    ├── Tooltips
    │   ├── ToolTip.js
    │   └── ToolTipAdvanced.js
    ├── index.js
    └── styles
    │   ├── Tooltip.styl
    │   ├── base.styl
    │   ├── examples.styl
    │   ├── main.css
    │   ├── main.styl
    │   └── prism.css
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Dogacan Bilgili
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React-Tooltip-Controller
  2 | 
  3 |  This is a feature-rich React component for controlling tooltips. Not only for tooltips, but you can use it for various interaction requirements.
  4 | 
  5 |  It seamlessly integrates into your markup without breaking it.
  6 | 
  7 |  Visit the [examples page](https://dbilgili.github.io/React-Tooltip-Controller/) to discover the functionalities.
  8 | 
  9 | 
 10 |  | Basic Tooltip | Animated Tooltip | Advanced Tooltip |
 11 |  |---|---|---|
 12 |  | ![screen7](https://user-images.githubusercontent.com/22943912/48679619-e6849000-eb92-11e8-99e7-35e147b5fcc1.gif) | ![screen8](https://user-images.githubusercontent.com/22943912/48679620-e6849000-eb92-11e8-8a8b-0499ff333046.gif) | ![screen6](https://user-images.githubusercontent.com/22943912/48679621-e6849000-eb92-11e8-8e9a-a8d709b96f82.gif) |
 13 | 
 14 | 
 15 | #### Highlights
 16 | - Supports `click`, `hover`, `hover-hold` and `hover-interact` detections.
 17 | - Each tooltip can be animated individually.
 18 | - Set whether the tooltip closes when clicked on it.
 19 | - Close the tooltip manually by assigning a variable.
 20 | - Retrieve the state of the tooltip (whether open or not).
 21 | - Set a timeout to automatically close the tooltip.
 22 | - Position the tooltip relative to the triggering element.
 23 | - Automatically center the tooltip along the X axis for dynamically sized elements.
 24 | 
 25 | ## Installing
 26 | 
 27 | `npm install react-tooltip-controller`
 28 | 
 29 | After installing the module, import the following components:
 30 | 
 31 | ```javascript
 32 | import {ToolTipController, Select} from 'react-tooltip-controller'
 33 | ```
 34 | 
 35 | ## Basic Usage
 36 | 
 37 | ```html
 38 | <ToolTipController
 39 |   detect="click"
 40 |   offsetY="center"
 41 |   offsetY={20}>
 42 | 
 43 |   // Selects the element controlling the tooltip
 44 |   <Select>
 45 |     <button>Click me</button>
 46 |   </Select>
 47 | 
 48 |   // Custom tooltip component
 49 |   <TooltipComponent/>
 50 | 
 51 | </ToolTipController>
 52 | ```
 53 | 
 54 | Anything, but `<Select>` component, wrapped by `<ToolTipController>` is portalled to the bottom of the `<body>` tag in the DOM.
 55 | 
 56 | You can either wrap a component or JSX Markup with `<ToolTipController>`.
 57 | 
 58 | By wrapping the `<button>` with `<Select>` component, `<TooltipComponent/>` is attached to `<button>` and set to be triggered by a `click` event.
 59 | 
 60 | By default, the tooltip wrapped is positioned relative to the left-bottom of the selected element.
 61 | 
 62 | ## Properties Table
 63 | 
 64 | | Props      | Description                                                                                                                                                                | Possible Values                        | Default | Data Type            |
 65 | |------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|---------|-----------------|
 66 | | id         | Assigns an ID number to the tooltip container class to be able to distinguish between multiple tooltips. Required for CSS animations on tooltip                                                                                                | E.g. `"1"`, `"2"`                          | null    | String          |
 67 | | detect     | Determines how to trigger the tooltip. Note that `timeOut` prop should be defined in order to use the `"hover-interact”` option                                                                                                                                      | `"click"`,<br/>`"hover"`,<br/>`"hover-hold"`,<br/>`"hover-interact”`         | `"click"` | String          |
 68 | | closeOnClick | Determines whether the tooltip closes when clicked on it                                                                                                                     | `true`, `false`                            | `true`    | Boolean         |
 69 | | triggerClose | A Boolean value of `true` closes the tooltip manually                                                                                                                      | Boolean variable                            |-    | Boolean         |
 70 | | returnState | Returns the state of the tooltip - If it’s open or not | Function | - | Function
 71 | | timeOut    | Determines if the tooltip closes automatically after a certain amount of time in milliseconds                                                                              | positive integers                      | null    | Integer         |
 72 | | offsetX    | Determines the offset along the X axis relative to left bottom of the element                                                                                              | positive/negative integers             | 0       | Integer         |
 73 | | offsetY    | Determines the offset along the Y axis relative to left bottom of the element. If set to `"center"`, automatically aligns to middle of the triggering element | positive/negative integers or `"center"` | 0       | Integer, String |
 74 | | animation  | Determines the name of the animation class                                                                                                                                 | -                                      | null    | String          |
 75 | | duration   | Determines the duration of the animation in units of milliseconds(ms) or seconds(s)                                                                                     | E.g. `"500ms"` or `"0.5s"`                 | null    | String          |
 76 | | timing     | Determines the timing function of the animation. You can use standard CSS timing functions such as `"linear"`, `"ease"` or can define a specific Cubic Bezier curve            | E.g. `"linear"` or `"ease"`                | null    | String          |
 77 | | properties | Determines the properties to be animated. Can be a string or an array of strings                                                                                                 | E.g. `"all"` or `["opacity", "transform"]` | [ ]      | String, Array   |
 78 | 
 79 | _Note: Hover events act as a click event on touch devices._
 80 | 
 81 | ## Examples
 82 | 
 83 | ### Minimal Example
 84 | 
 85 | ```javascript
 86 | import React, { Component } from 'react'
 87 | import {ToolTipController, Select} from 'react-tooltip-controller'
 88 | 
 89 | const ToolTip = () =>
 90 |   <div className="toolTip">
 91 |     Tooltip
 92 |   </div>
 93 | 
 94 | class Example extends Component {
 95 | 
 96 |   render() {
 97 |     return (
 98 |       <div className="App">
 99 | 
100 |         <ToolTipController
101 |           detect="hover">
102 | 
103 |           <Select>
104 |             <button>Hello There</button>
105 |           </Select>
106 | 
107 |           <ToolTip/>
108 | 
109 |         </ToolTipController>
110 | 
111 |       </div>
112 | 
113 |     )
114 |   }
115 | }
116 | 
117 | export default Example
118 | 
119 | ```
120 | 
121 | ### Animation Example
122 | 
123 | __Stylus File__
124 | ```css
125 | .react-tooltip-1
126 |   opacity: 0
127 |   transform: translateY(10px)
128 |   &.fadeIn
129 |     opacity: 1
130 |     transform: translateY(0)
131 | ```
132 | 
133 | __JSX file__
134 | ```javascript
135 | import React, { Component } from 'react'
136 | import {ToolTipController, Select} from 'react-tooltip-controller'
137 | import './styles/animation.css'
138 | 
139 | const ToolTip = () =>
140 |   <div className="toolTip">
141 |     Tooltip
142 |   </div>
143 | 
144 | class Example extends Component {
145 | 
146 |   render() {
147 |     return (
148 |       <div className="App">
149 | 
150 |         <ToolTipController
151 |           id="1"
152 |           detect="hover"
153 |           animation="fadeIn"
154 |           duration=".3s"
155 |           timing="ease"
156 |           properties={["opacity", "transform"]}>
157 | 
158 |           <Select>
159 |             <button>Hello There</button>
160 |           </Select>
161 | 
162 |           <ToolTip/>
163 | 
164 |         </ToolTipController>
165 | 
166 |       </div>
167 | 
168 |     )
169 |   }
170 | }
171 | 
172 | export default Example
173 | ```
174 | 
175 | Note that `react-tooltip` is a built-in class name and since the `id` prop is set to `"1"`, it is referred with the specific class name of `react-tooltip-1`.
176 | 
177 | Always set the `id` prop for the animated tooltips in order to prevent any class name conflicts.
178 | 
179 | __Side note:__ _If you don't set the `properties` prop, all the properties for the tooltip animates. This results in position animations when the browser is resized._
180 | 
181 | ### Use of `triggerClose` prop
182 | 
183 | ```javascript
184 | import React, { Component } from 'react'
185 | import {ToolTipController, Select} from 'react-tooltip-controller'
186 | 
187 | const ToolTip = (props) =>
188 |   <div className="toolTip">
189 |     Tooltip
190 |     <button onClick={null}></button>
191 |     <button onClick={props.closeTriggerFunction}></button>
192 |   </div>
193 | 
194 | class Example extends Component {
195 | 
196 |   state = {
197 |     trigger: false
198 |   }
199 | 
200 |   close = () => {
201 |     this.setState({trigger: true})
202 |   }
203 | 
204 |   render() {
205 |     return (
206 |       <div className="App">
207 | 
208 |         <ToolTipController
209 |           detect="click"
210 |           closeOnClick={false}
211 |           triggerClose={this.state.trigger}>
212 | 
213 |           <Select>
214 |             <button>Hello There</button>
215 |           </Select>
216 | 
217 |           <ToolTip closeTriggerFunction={this.close}/>
218 | 
219 |         </ToolTipController>
220 | 
221 |       </div>
222 | 
223 |     )
224 |   }
225 | }
226 | 
227 | export default Example
228 | ```
229 | 
230 | By using the `triggerClose` prop, the tooltip can be closed manually. To do so, variable passed to `triggerClose` prop should be set to `true`.
231 | 
232 | This example demonstrates how to close the tooltip by setting the state of the triggering variable to `true`. To prevent the other click events on the tooltip from closing it, `closeOnClick` is set to `false`. Note that clicking outside of the tooltip closes it independent of the `triggerClose` prop.
233 | 
234 | ### Use of `returnState` prop
235 | 
236 | ```javascript
237 | import React, { Component } from 'react'
238 | import {ToolTipController, Select} from 'react-tooltip-controller'
239 | 
240 | const ToolTip = (props) =>
241 |   <div className="toolTip">
242 |     Tooltip
243 |   </div>
244 | 
245 | class Example extends Component {
246 | 
247 |   state = {
248 |     tooltipState: false
249 |   }
250 | 
251 |   getTooltipState = (data) => {
252 |     this.setState({tooltipState: data})
253 |   }
254 | 
255 |   render() {
256 |     return (
257 |       <div className="App">
258 | 
259 |         <ToolTipController
260 |           select="btn"
261 |           detect="hover"
262 |           returnState={this.getTooltipState}>
263 | 
264 |           <Select>
265 |             <button>Hello There</button>
266 |           </Select>
267 | 
268 |           <ToolTip/>
269 | 
270 |         </ToolTipController>
271 | 
272 |       </div>
273 | 
274 |     )
275 |   }
276 | }
277 | 
278 | export default Example
279 | ```
280 | 
281 | You can pass a function as a prop through `returnState` in order to get the state of the tooltip, whether it's open or not.
282 | 
283 | ### License
284 | 
285 | MIT License
286 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "React-Tooltip-Controller",
 3 |   "homepage": "https://dbilgili.github.io/React-Tooltip-Controller",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@material-ui/core": "^3.5.1",
 8 |     "immer": "^1.7.4",
 9 |     "react": "^16.6.3",
10 |     "react-dom": "^16.6.3",
11 |     "react-scripts": "2.1.1"
12 |   },
13 |   "scripts": {
14 |     "start": "react-scripts-with-stylus start src/styles/main.styl",
15 |     "build": "react-scripts-with-stylus build src/styles/main.styl",
16 |     "test": "react-scripts test --env=jsdom",
17 |     "eject": "react-scripts eject",
18 |     "predeploy": "npm run build",
19 |     "deploy": "gh-pages -d build"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": "react-app"
23 |   },
24 |   "browserslist": [
25 |     ">0.2%",
26 |     "not dead",
27 |     "not ie <= 11",
28 |     "not op_mini all"
29 |   ],
30 |   "devDependencies": {
31 |     "create-react-app-stylus": "^1.1.1",
32 |     "gh-pages": "^2.0.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dbilgili/React-Tooltip-Controller/0c8407b7480601acc46cd4b4829a4a341bd15d8c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |     <meta name="theme-color" content="#000000">
 8 | 
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
10 | 
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 | 
13 |     <title>React-Tooltip-Controller | Examples Page</title>
14 |   </head>
15 |   <body>
16 |     <div id="root"></div>
17 |     <script src="./prism.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/public/prism.js:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.15.0
2 | https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+clike+javascript+jsx+stylus */
3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e,t){var r=n.util.type(e);switch(t=t||{},r){case"Object":if(t[n.util.objId(e)])return t[n.util.objId(e)];var a={};t[n.util.objId(e)]=a;for(var l in e)e.hasOwnProperty(l)&&(a[l]=n.util.clone(e[l],t));return a;case"Array":if(t[n.util.objId(e)])return t[n.util.objId(e)];var a=[];return t[n.util.objId(e)]=a,e.forEach(function(e,r){a[r]=n.util.clone(e,t)}),a}return e}},languages:{extend:function(e,t){var r=n.util.clone(n.languages[e]);for(var a in t)r[a]=t[a];return r},insertBefore:function(e,t,r,a){a=a||n.languages;var l=a[e];if(2==arguments.length){r=arguments[1];for(var i in r)r.hasOwnProperty(i)&&(l[i]=r[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==t)for(var i in r)r.hasOwnProperty(i)&&(o[i]=r[i]);o[s]=l[s]}var u=a[e];return a[e]=o,n.languages.DFS(n.languages,function(t,n){n===u&&t!=e&&(this[t]=o)}),o},DFS:function(e,t,r,a){a=a||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],r||l),"Object"!==n.util.type(e[l])||a[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||a[n.util.objId(e[l])]||(a[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,a)):(a[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,a)))}},plugins:{},highlightAll:function(e,t){n.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,r){var a={callback:r,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",a);for(var l,i=a.elements||e.querySelectorAll(a.selector),o=0;l=i[o++];)n.highlightElement(l,t===!0,a.callback)},highlightElement:function(t,r,a){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1].toLowerCase(),i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,t.parentNode&&(o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l));var s=t.textContent,u={element:t,language:l,grammar:i,code:s};if(n.hooks.run("before-sanity-check",u),!u.code||!u.grammar)return u.code&&(n.hooks.run("before-highlight",u),u.element.textContent=u.code,n.hooks.run("after-highlight",u)),n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),r&&_self.Worker){var g=new Worker(n.filename);g.onmessage=function(e){u.highlightedCode=e.data,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,n.hooks.run("after-highlight",u),n.hooks.run("complete",u),a&&a.call(u.element)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=n.highlight(u.code,u.grammar,u.language),n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,n.hooks.run("after-highlight",u),n.hooks.run("complete",u),a&&a.call(t)},highlight:function(e,t,a){var l={code:e,grammar:t,language:a};return n.hooks.run("before-tokenize",l),l.tokens=n.tokenize(l.code,l.grammar),n.hooks.run("after-tokenize",l),r.stringify(n.util.encode(l.tokens),l.language)},matchGrammar:function(e,t,r,a,l,i,o){var s=n.Token;for(var u in r)if(r.hasOwnProperty(u)&&r[u]){if(u==o)return;var g=r[u];g="Array"===n.util.type(g)?g:[g];for(var c=0;c<g.length;++c){var h=g[c],f=h.inside,d=!!h.lookbehind,m=!!h.greedy,p=0,y=h.alias;if(m&&!h.pattern.global){var v=h.pattern.toString().match(/[imuy]*$/)[0];h.pattern=RegExp(h.pattern.source,v+"g")}h=h.pattern||h;for(var b=a,k=l;b<t.length;k+=t[b].length,++b){var w=t[b];if(t.length>e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){h.lastIndex=k;var _=h.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,x=k,O=t.length;O>A&&(P>x||!t[A].type&&!t[A-1].greedy);++A)x+=t[A].length,j>=x&&(++b,k=x);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,x),_.index-=k}else{h.lastIndex=0;var _=h.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),C=[b,I];N&&(++b,k+=N.length,C.push(N));var E=new s(u,f?n.tokenize(_,f):_,y,_,m);if(C.push(E),S&&C.push(S),Array.prototype.splice.apply(t,C),1!=I&&n.matchGrammar(e,t,r,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
4 | Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
6 | Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},/\b(?:as|async|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/],number:/\b(?:(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+)n?|\d+n|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\(|\.(?:apply|bind|call)\()/,operator:/-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;
7 | !function(t){var n=t.util.clone(t.languages.javascript);t.languages.jsx=t.languages.extend("markup",n),t.languages.jsx.tag.pattern=/<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?)?>/i,t.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/i,t.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i,t.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*$/,t.languages.insertBefore("inside","attr-name",{spread:{pattern:/\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,inside:{punctuation:/\.{3}|[{}.]/,"attr-value":/\w+/}}},t.languages.jsx.tag),t.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,inside:{"script-punctuation":{pattern:/^=(?={)/,alias:"punctuation"},rest:t.languages.jsx},alias:"language-javascript"}},t.languages.jsx.tag);var e=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(e).join(""):""},a=function(n){for(var s=[],g=0;g<n.length;g++){var i=n[g],o=!1;if("string"!=typeof i&&("tag"===i.type&&i.content[0]&&"tag"===i.content[0].type?"</"===i.content[0].content[0].content?s.length>0&&s[s.length-1].tagName===e(i.content[0].content[1])&&s.pop():"/>"===i.content[i.content.length-1].content||s.push({tagName:e(i.content[0].content[1]),openedBraces:0}):s.length>0&&"punctuation"===i.type&&"{"===i.content?s[s.length-1].openedBraces++:s.length>0&&s[s.length-1].openedBraces>0&&"punctuation"===i.type&&"}"===i.content?s[s.length-1].openedBraces--:o=!0),(o||"string"==typeof i)&&s.length>0&&0===s[s.length-1].openedBraces){var p=e(i);g<n.length-1&&("string"==typeof n[g+1]||"plain-text"===n[g+1].type)&&(p+=e(n[g+1]),n.splice(g+1,1)),g>0&&("string"==typeof n[g-1]||"plain-text"===n[g-1].type)&&(p=e(n[g-1])+p,n.splice(g-1,1),g--),n[g]=new t.Token("plain-text",p,null,p)}i.content&&"string"!=typeof i.content&&a(i.content)}};t.hooks.add("after-tokenize",function(t){("jsx"===t.language||"tsx"===t.language)&&a(t.tokens)})}(Prism);
8 | !function(n){var t={url:/url\((["']?).*?\1\)/i,string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:if|else|for|return|unless)(?=\s+|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,number:/\b\d+(?:\.\d+)?%?/,"boolean":/\b(?:true|false)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.+|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],punctuation:/[{}()\[\];:,]/};t.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^{|}$/,alias:"punctuation"},rest:t}},t.func={pattern:/[\w-]+\([^)]*\).*/,inside:{"function":/^[^(]+/,rest:t}},n.languages.stylus={comment:{pattern:/(^|[^\\])(\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},"atrule-declaration":{pattern:/(^\s*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:t}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:(?:\{[^}]*\}|.+)|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:t}},statement:{pattern:/(^[ \t]*)(?:if|else|for|return|unless)[ \t]+.+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:t}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)[^{\r\n]*(?:;|[^{\r\n,](?=$)(?!(\r?\n|\r)(?:\{|\2[ \t]+)))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:t.interpolation}},rest:t}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t]+)))/m,lookbehind:!0,inside:{interpolation:t.interpolation,punctuation:/[{},]/}},func:t.func,string:t.string,interpolation:t.interpolation,punctuation:/[{}()\[\];:.]/}}(Prism);
9 | 


--------------------------------------------------------------------------------
/src/Examples.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import ToolTipController from './ToolTipController'
  3 | import Select from './Select'
  4 | import ToolTip from './Tooltips/ToolTip'
  5 | import ToolTipAdvanced from './Tooltips/ToolTipAdvanced'
  6 | import Button from '@material-ui/core/Button'
  7 | import './styles/prism.css'
  8 | 
  9 | class Examples extends React.Component{
 10 | 
 11 |   state={
 12 |     tooltipState: false,
 13 |     tooltipState2: false,
 14 |     trigger: false
 15 |   }
 16 | 
 17 |   getTooltipState = (data) => {
 18 |     this.setState({tooltipState: data})
 19 |   }
 20 | 
 21 |   getOtherTooltipState = (data) => {
 22 |     this.setState({tooltipState2: data})
 23 |   }
 24 | 
 25 |   close = () => {
 26 |     this.setState({trigger: true})
 27 |   }
 28 | 
 29 |   componentDidUpdate(prevProp, prevState){
 30 |     if(prevState.tooltipState2 !== this.state.tooltipState2){
 31 |       this.setState({trigger: false})
 32 |     }
 33 | 
 34 |   }
 35 | 
 36 |   render(){
 37 |     return(
 38 |       <div className="Examples">
 39 | 
 40 |         <h1>React-Tooltip-Controller | Examples Page</h1>
 41 |         <div className="links">
 42 |           <a href="https://github.com/dbilgili/React-Tooltip-Controller" target="_blank"  rel="noopener noreferrer">GitHub</a>
 43 |           <a href="https://www.npmjs.com/package/react-tooltip-controller" target="_blank"  rel="noopener noreferrer">NPM</a>
 44 |         </div>
 45 | 
 46 |         <div className="example1 example">
 47 | 
 48 |           <pre><code className="language-jsx">{`
 49 |             <ToolTipController
 50 |               detect="click"
 51 |               offsetX="centre"
 52 |               offsetY={20}>
 53 |               <Select>
 54 |                 <Button variant="outlined">Click me</Button>
 55 |               </Select>
 56 |               <ToolTip/>
 57 |             </ToolTipController>
 58 |           `}</code></pre>
 59 | 
 60 |           <ToolTipController
 61 |             detect="click"
 62 |             offsetX="centre"
 63 |             offsetY={20}>
 64 |             <Select>
 65 |               <Button variant="outlined">Click me</Button>
 66 |             </Select>
 67 |             <ToolTip/>
 68 |           </ToolTipController>
 69 |         </div>
 70 | 
 71 |         <hr/>
 72 | 
 73 |         <div className="example2 example">
 74 | 
 75 |           <pre><code className="language-jsx">{`
 76 |             <ToolTipController
 77 |               detect="hover"
 78 |               offsetX="centre"
 79 |               offsetY={20}>
 80 |               <Select>
 81 |                 <Button variant="outlined">Hover over me</Button>
 82 |               </Select>
 83 |               <ToolTip/>
 84 |             </ToolTipController>
 85 |           `}</code></pre>
 86 | 
 87 |           <ToolTipController
 88 |             detect="hover"
 89 |             offsetX="centre"
 90 |             offsetY={20}>
 91 |             <Select>
 92 |               <Button variant="outlined">Hover over me</Button>
 93 |             </Select>
 94 |             <ToolTip/>
 95 |           </ToolTipController>
 96 |         </div>
 97 | 
 98 |         <hr/>
 99 | 
100 |         <div className="example3 example">
101 | 
102 |           <pre><code className="language-jsx">{`
103 |             <ToolTipController
104 |               detect="hover-hold"
105 |               offsetX="centre"
106 |               offsetY={20}>
107 |               <Select>
108 |                 <Button variant="outlined">Hover over me</Button>
109 |               </Select>
110 |               <ToolTip/>
111 |             </ToolTipController>
112 |           `}</code></pre>
113 | 
114 |           <div>
115 |             <div>
116 |               <p>Button won't close when the cursor is moved out</p>
117 |             </div>
118 | 
119 |             <ToolTipController
120 |               detect="hover-hold"
121 |               offsetX="centre"
122 |               offsetY={20}>
123 |               <Select>
124 |                 <Button variant="outlined">Hover over me</Button>
125 |               </Select>
126 |               <ToolTip/>
127 |             </ToolTipController>
128 |           </div>
129 |         </div>
130 | 
131 |         <hr/>
132 | 
133 |         <div className="example4 example">
134 | 
135 |           <pre><code className="language-jsx">{`
136 |             <ToolTipController
137 |               detect="hover-interact"
138 |               closeOnClick={false}
139 |               timeOut={200}
140 |               offsetX="centre"
141 |               offsetY={20}>
142 |               <Select>
143 |                 <Button variant="outlined">Hover over me</Button>
144 |               </Select>
145 |               <ToolTip/>
146 |             </ToolTipController>
147 |           `}</code></pre>
148 | 
149 |           <div>
150 |             <p>
151 |               The cursor can be moved over the tooltip before it closes
152 |               <br/>This option should be used with <span className="md">timeOut</span> prop
153 |             </p>
154 |             <ToolTipController
155 |               detect="hover-interact"
156 |               closeOnClick={false}
157 |               timeOut={200}
158 |               offsetX="centre"
159 |               offsetY={20}>
160 |               <Select>
161 |                 <Button variant="outlined">Hover over me</Button>
162 |               </Select>
163 |               <ToolTip/>
164 |             </ToolTipController>
165 |           </div>
166 |         </div>
167 | 
168 |         <hr/>
169 | 
170 |         <div className="example5 example">
171 | 
172 |           <pre className="margin-right"><code className="language-jsx">{`
173 |             <ToolTipController
174 |               id="5"
175 |               detect="hover"
176 |               offsetX="centre"
177 |               offsetY={20}
178 |               animation="fadeIn"
179 |               duration="200ms"
180 |               timing="ease"
181 |               properties={["opacity", "transform"]}>
182 |               <Select>
183 |                 <Button variant="outlined">Hover over me</Button>
184 |               </Select>
185 |               <ToolTip/>
186 |             </ToolTipController>
187 |           `}</code></pre>
188 | 
189 |           <pre className="margin-right"><code className="language-stylus">{`
190 |             .react-tooltip-5
191 |               opacity: 0
192 |               transform: translateY(10px)
193 |               &.fadeIn
194 |                 opacity: 1
195 |                 transform: translateY(0)
196 |           `}</code></pre>
197 | 
198 |           <div>
199 |             <p>Tooltip has an animation class</p>
200 |             <ToolTipController
201 |               id="5"
202 |               detect="hover"
203 |               offsetX="centre"
204 |               offsetY={20}
205 |               animation="fadeIn"
206 |               duration="200ms"
207 |               timing="ease"
208 |               properties={["opacity", "transform"]}>
209 |               <Select>
210 |                 <Button variant="outlined">Hover over me</Button>
211 |               </Select>
212 |               <ToolTip/>
213 |             </ToolTipController>
214 |           </div>
215 |         </div>
216 | 
217 |         <hr/>
218 | 
219 |         <div className="example6 example">
220 | 
221 |           <pre><code className="language-jsx">{`
222 |             <ToolTipController
223 |               detect="click"
224 |               offsetX="centre"
225 |               offsetY={20}
226 |               timeOut={1000}>
227 |               <Select>
228 |                 <Button variant="outlined">Click me</Button>
229 |               </Select>
230 |               <ToolTip/>
231 |             </ToolTipController>
232 |           `}</code></pre>
233 | 
234 |           <div>
235 |             <p>Tooltip will disapear after 1000ms</p>
236 |             <ToolTipController
237 |               detect="click"
238 |               offsetX="centre"
239 |               offsetY={20}
240 |               timeOut={1000}>
241 |               <Select>
242 |                 <Button variant="outlined">Click me</Button>
243 |               </Select>
244 |               <ToolTip/>
245 |             </ToolTipController>
246 |           </div>
247 |         </div>
248 | 
249 |         <hr/>
250 | 
251 |         <div className="example7 example">
252 | 
253 |           <pre><code className="language-jsx">{`
254 |             <ToolTipController
255 |               detect="click"
256 |               offsetX="centre"
257 |               offsetY={20}
258 |               closeOnClick={false}>
259 |               <Select>
260 |                 <Button variant="outlined">Click me</Button>
261 |               </Select>
262 |               <ToolTipAdvanced/>
263 |             </ToolTipController>
264 |           `}</code></pre>
265 | 
266 |           <div>
267 |             <p>Tooltip is interactable (Does not close when clicked on)</p>
268 |             <ToolTipController
269 |               detect="click"
270 |               offsetX="centre"
271 |               offsetY={20}
272 |               closeOnClick={false}>
273 |               <Select>
274 |                 <Button variant="outlined">Click me</Button>
275 |               </Select>
276 |               <ToolTipAdvanced/>
277 |             </ToolTipController>
278 |           </div>
279 | 
280 | 
281 |         </div>
282 | 
283 |         <hr/>
284 | 
285 |         <div className="example8 example">
286 | 
287 |           <pre className="margin-right"><code className="language-jsx">{`
288 |             <ToolTipController
289 |               detect="click"
290 |               offsetX="centre"
291 |               offsetY={20}
292 |               closeOnClick={false}
293 |               returnState={this.getTooltipState}>
294 |               <Select>
295 |                 <Button variant="outlined">Click me</Button>
296 |               </Select>
297 |               <ToolTipAdvanced/>
298 |             </ToolTipController>
299 |           `}</code></pre>
300 | 
301 |           <pre className="margin-right"><code className="language-javascript">{`
302 |             state={
303 |               tooltipState: false
304 |             }
305 | 
306 |             getTooltipState = (data) => {
307 |               this.setState({tooltipState: data})
308 |             }
309 |           `}</code></pre>
310 | 
311 |           <div>
312 |             <p>Tooltip State: {this.state.tooltipState.toString()}</p>
313 |             <ToolTipController
314 |               detect="click"
315 |               offsetX="centre"
316 |               offsetY={20}
317 |               closeOnClick={false}
318 |               returnState={this.getTooltipState}>
319 |               <Select>
320 |                 <Button variant="outlined">Click me</Button>
321 |               </Select>
322 |               <ToolTipAdvanced/>
323 |             </ToolTipController>
324 |           </div>
325 | 
326 |         </div>
327 | 
328 |         <hr/>
329 | 
330 |         <div className="example9 example">
331 | 
332 |           <pre className="margin-right"><code className="language-jsx">{`
333 |             <ToolTipController
334 |               detect="click"
335 |               offsetX="centre"
336 |               offsetY={20}
337 |               closeOnClick={false}
338 |               triggerClose={this.state.trigger}
339 |               returnState={this.getOtherTooltipState}>
340 |               <Select>
341 |                 <Button variant="outlined">Click me</Button>
342 |               </Select>
343 |               <ToolTipAdvanced close={this.close}/>
344 |             </ToolTipController>
345 |           `}</code></pre>
346 | 
347 |           <pre className="margin-right"><code className="language-javascript">{`
348 |             state={
349 |               trigger: false
350 |             }
351 | 
352 |             close = () => {
353 |               this.setState({trigger: true})
354 |             }
355 |           `}</code></pre>
356 | 
357 |           <div>
358 |             <p>Button in the tooltip triggers the close action</p>
359 |             <ToolTipController
360 |               detect="click"
361 |               offsetX="centre"
362 |               offsetY={20}
363 |               closeOnClick={false}
364 |               triggerClose={this.state.trigger}
365 |               returnState={this.getOtherTooltipState}>
366 |               <Select>
367 |                 <Button variant="outlined">Click me</Button>
368 |               </Select>
369 |               <ToolTipAdvanced close={this.close}/>
370 |             </ToolTipController>
371 |           </div>
372 | 
373 |         </div>
374 | 
375 |       </div>
376 |     )
377 |   }
378 | }
379 | 
380 | export default Examples
381 | 


--------------------------------------------------------------------------------
/src/Select.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | class Select extends React.Component{
 5 |   static displayName = 'Select'
 6 | 
 7 |   constructor(props) {
 8 |     super(props)
 9 |     this.selector = React.createRef()
10 |   }
11 | 
12 |   componentDidMount(){
13 |     this.resize()
14 |     window.addEventListener('resize', this.resize)
15 |   }
16 | 
17 |   componentWillUnmount(){
18 |     window.removeEventListener('resize', this.resize)
19 |   }
20 | 
21 |   componentDidUpdate(){
22 |     this.resize()
23 |   }
24 | 
25 |   resize = () => {
26 |     this.props.resize(this.getElementBounding(), this.refs.selector)
27 |   }
28 | 
29 |   getElementBounding = () => {
30 |     const rect = ReactDOM.findDOMNode(this.selector.current).getBoundingClientRect()
31 |     return {left: rect.left, top: rect.top, height: rect.height, width: rect.width}
32 |   }
33 | 
34 |   render(){
35 |     const { detect, openMenu, closeMenu, timeOutFunc, children } = this.props
36 |     if(detect === "click"){
37 |       return React.cloneElement(children, {ref: this.selector, onClick: openMenu, onTouchEnd: openMenu})
38 |     }
39 |     else if(detect === 'hover'){
40 |       return React.cloneElement(children, {ref: this.selector, onMouseEnter: openMenu, onMouseLeave: closeMenu, onTouchEnd: openMenu})
41 |     }
42 |     else if(detect === 'hover-hold'){
43 |       return React.cloneElement(children, {ref: this.selector, onMouseEnter: openMenu, onTouchEnd: openMenu})
44 |     }
45 |     else if(detect === 'hover-interact'){
46 |       return React.cloneElement(children, {ref: this.selector, onMouseEnter: openMenu, onMouseLeave: timeOutFunc, onTouchEnd: openMenu})
47 |     }
48 |     return null
49 |   }
50 | }
51 | 
52 | export default Select
53 | 


--------------------------------------------------------------------------------
/src/ToolTipController.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import produce from 'immer'
  3 | import ReactDOM from 'react-dom'
  4 | 
  5 | class ToolTipController extends React.PureComponent{
  6 |   constructor(props) {
  7 |     super(props)
  8 |     this.tooltip = React.createRef()
  9 |   }
 10 | 
 11 |   static defaultProps = {
 12 |     offsetX: 0,
 13 |     offsetY: 0,
 14 |     detect: "click",
 15 |     closeOnClick: true,
 16 |     timeOut: null,
 17 |     animation: "",
 18 |     duration: "",
 19 |     timing: "",
 20 |     properties: [],
 21 |     returnState: null,
 22 |     id: ""
 23 | 
 24 |   }
 25 |   state = {
 26 |     divStyle: {
 27 |       position: "absolute",
 28 |       top: 0,
 29 |       left: 0,
 30 |       transitionDuration: this.props.duration,
 31 |       transitionTimingFunction: this.props.timing,
 32 |       transitionProperty: this.props.properties
 33 |     },
 34 |     isOpen: false,
 35 |     animate: false,
 36 |     timeOutID: null,
 37 |     tooltipWidth: 0,
 38 |     trigger: this.props.triggerClose
 39 |   }
 40 | 
 41 |   openMenu = (e) => {
 42 |     e.preventDefault()
 43 |     if(!this.state.animate){
 44 | 
 45 |       //Set timeout for menu to close automatically
 46 |       if(this.props.timeOut !== null && this.props.detect !== "hover-interact"){
 47 |         const timeOutID = setTimeout(() => this.closeMenu(), this.props.timeOut)
 48 |         this.setState({timeOutID})
 49 |       }
 50 | 
 51 |       if(this.props.returnState !== null){
 52 |         // Return menu status
 53 |         this.setState({isOpen: true},() => this.props.returnState(this.state.isOpen))
 54 |       }
 55 |       else{
 56 |         // Just open the menu
 57 |         this.setState({isOpen: true})
 58 | 
 59 |       }
 60 | 
 61 |       //Turn on the animation > adds the specific animation class
 62 |       if(this.props.animation !== ""){
 63 |         setTimeout(() => {
 64 |           this.setState({animate: true})
 65 |           //Add the pointer events from all the active DIVs
 66 |           this.tooltip.current.style.pointerEvents = "auto"
 67 |         },0)
 68 |       }
 69 |     }
 70 |   }
 71 | 
 72 |   closeMenu = () => {
 73 |     // Clear time out
 74 |     if(this.props.timeOut !== null && this.props.detect !== "hover-interact"){
 75 |       clearTimeout(this.state.timeOutID)
 76 |     }
 77 |     //Turn off the animation > removes the specific animation class
 78 |     if(this.state.isOpen){
 79 |       if(this.props.animation !== ""){
 80 |         // Return menu status
 81 |         if(this.props.returnState !== null){
 82 |           this.setState({animate: false}, () => this.props.returnState(this.state.animate))
 83 |         }
 84 |         else{
 85 |           this.setState({animate: false})
 86 |         }
 87 |         //Remove pointer events from all the active DIVs
 88 |         this.tooltip.current.style.pointerEvents = "none"
 89 |       }
 90 |       else{
 91 |         if(this.props.returnState !== null){
 92 |           this.setState({isOpen: false}, () => this.props.returnState(this.state.isOpen))
 93 |         }
 94 |         else{
 95 |           this.setState({isOpen: false})
 96 |         }
 97 |       }
 98 |     }
 99 |   }
100 | 
101 |   timeOutFunc = () => {
102 |     const timeOutID = setTimeout(() => this.closeMenu(), this.props.timeOut)
103 |     this.setState({timeOutID})
104 |   }
105 | 
106 |   clearTimeoutFunc = () => {
107 |     clearTimeout(this.state.timeOutID)
108 |   }
109 | 
110 |   resize = (getElementBounding, selector) => {
111 |     const {offsetX, offsetY} = this.props
112 | 
113 |     if(offsetX === "center" || offsetX === "centre"){
114 |       this.setState(produce(draft => {
115 |         draft.divStyle.left = getElementBounding.left + (getElementBounding.width - this.state.tooltipWidth)/2
116 |         draft.divStyle.top = getElementBounding.top + getElementBounding.height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0)
117 |       }))
118 |     }
119 |     else{
120 |       this.setState(produce(draft => {
121 |         draft.divStyle.left = getElementBounding.left + offsetX
122 |         draft.divStyle.top = getElementBounding.top + getElementBounding.height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0)
123 |       }))
124 |     }
125 |   }
126 | 
127 |   componentDidUpdate(prevProp, prevState){
128 |     if(this.state.isOpen){
129 |       this.setState({tooltipWidth: this.tooltip.current.getBoundingClientRect().width})
130 |     }
131 | 
132 |     if(prevProp.triggerClose !== this.props.triggerClose){
133 |       this.closeMenu()
134 |     }
135 | 
136 |     setTimeout(() => {
137 |       if(this.props.animation !== ""){
138 |         if(this.state.animate){
139 |           window.addEventListener('click', this.closeMenu)
140 |           window.addEventListener('touchend', this.closeMenu)
141 |         }
142 |         else{
143 |           window.removeEventListener('click', this.closeMenu)
144 |           window.removeEventListener('touchend', this.closeMenu)
145 |         }
146 |       }
147 |       else{
148 |         if(this.state.isOpen){
149 |           window.addEventListener('click', this.closeMenu)
150 |           window.addEventListener('touchend', this.closeMenu)
151 |         }
152 |         else{
153 |           window.removeEventListener('click', this.closeMenu)
154 |           window.removeEventListener('touchend', this.closeMenu)
155 |         }
156 |       }
157 |     },0)
158 |   }
159 | 
160 |   componentWillUnmount() {
161 |     window.removeEventListener('click', this.closeMenu)
162 |     window.removeEventListener('touchstart', this.closeMenu)
163 | 
164 |   }
165 | 
166 |   static getDerivedStateFromProps(nextProps, prevState){
167 |     if(nextProps.triggerClose !== prevState.trigger){
168 |       return { trigger: nextProps.triggerClose }
169 |     }
170 |     else{
171 |       return false
172 |     }
173 |   }
174 | 
175 |   render(){
176 |     const{id, children, animation, closeOnClick, detect} = this.props
177 |     const{isOpen, animate, divStyle} = this.state
178 | 
179 |     const inputChildren = React.Children.map(children, (child, index) => {
180 |       if(child.type.displayName === "Select"){
181 |         return React.cloneElement(child, {detect, openMenu: this.openMenu, closeMenu: this.closeMenu, timeOutFunc: this.timeOutFunc, resize: this.resize})
182 |       }
183 |       else{
184 |         return(
185 |           isOpen && ReactDOM.createPortal(
186 |             <span
187 |               ref={this.tooltip}
188 |               className={animate ? `react-tooltip-absolute-container react-tooltip-${id} ${animation}` : `react-tooltip-absolute-container react-tooltip-${id}`}
189 |               style={divStyle}
190 |               onClick={closeOnClick ? null : e => e.stopPropagation()}
191 |               onTouchEnd={e => e.stopPropagation()}
192 |               onMouseEnter={detect === "hover-interact" ? this.clearTimeoutFunc : undefined}
193 |               onMouseLeave={detect === "hover-interact" ? this.closeMenu : undefined}>
194 |               {React.cloneElement(child)}
195 |             </span>
196 |           , document.body)
197 |         )
198 |       }
199 |     })
200 |     return inputChildren
201 |   }
202 | }
203 | 
204 | export default ToolTipController;
205 | 


--------------------------------------------------------------------------------
/src/Tooltips/ToolTip.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import '../styles/main.css'
 3 | 
 4 | const ToolTip = (props) =>
 5 |   <div className="ToolTip">
 6 |     Tooltip
 7 |   </div>
 8 | 
 9 | 
10 | export default ToolTip
11 | 


--------------------------------------------------------------------------------
/src/Tooltips/ToolTipAdvanced.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import FormControl from '@material-ui/core/FormControl'
 3 | import FormControlLabel from '@material-ui/core/FormControlLabel';
 4 | import FormLabel from '@material-ui/core/FormLabel'
 5 | import RadioGroup from '@material-ui/core/RadioGroup'
 6 | import Radio from '@material-ui/core/Radio'
 7 | import Button from '@material-ui/core/Button'
 8 | import '../styles/main.css'
 9 | 
10 | class ToolTipAdvanced extends React.Component{
11 | 
12 |   state = {
13 |     radio: "Radio 1",
14 |   }
15 | 
16 |   handleRadio = event => {
17 |     this.setState({ radio: event.target.value });
18 |   }
19 | 
20 |   render(){
21 |     return(
22 |       <div className="ToolTip advanced">
23 |         <FormControl className="radio-buttons">
24 |           <FormLabel component="legend">Radio Buttons</FormLabel>
25 |           <RadioGroup
26 |             value={this.state.radio}
27 |             onChange={this.handleRadio}>
28 |             <FormControlLabel value="Radio 1" control={<Radio />} label="Radio 1" />
29 |             <FormControlLabel value="Radio 2" control={<Radio />} label="Radio 2" />
30 |             <FormControlLabel value="Radio 3" control={<Radio />} label="Radio 3" />
31 |           </RadioGroup>
32 |         </FormControl>
33 | 
34 |         <Button variant="outlined" onClick={this.props.close}>Button</Button>
35 |       </div>
36 |     )
37 |   }
38 | }
39 | 
40 | export default ToolTipAdvanced
41 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Examples from './Examples'
4 | 
5 | 
6 | ReactDOM.render(<Examples />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/styles/Tooltip.styl:
--------------------------------------------------------------------------------
 1 | .ToolTip
 2 |   display: flex
 3 |   justify-content: center
 4 |   align-items: center
 5 |   color: rgb(255, 107, 0)
 6 |   width: 130px
 7 |   height: 50px
 8 |   background-color: white
 9 |   position: relative
10 |   box-shadow: 0px 3px 4px 0px rgba(235,235,235,1)
11 |   border-radius: 3px
12 | 
13 |   &::before
14 |     content:''
15 |     position: absolute
16 |     left: 58px
17 |     top: -10px
18 |     height: 20px
19 |     width: 20px
20 |     background-color: white
21 |     transform: rotate(45deg)
22 | 
23 |   &.advanced
24 |     display: block
25 |     height: initial
26 |     padding: 20px
27 | 
28 |     &::before
29 |       left: 75px
30 | 


--------------------------------------------------------------------------------
/src/styles/base.styl:
--------------------------------------------------------------------------------
1 | body
2 |   background-color: #F5F6FA
3 |   margin: 0
4 |   padding: 0
5 |   font-family: 'Roboto', sans-serif
6 | 


--------------------------------------------------------------------------------
/src/styles/examples.styl:
--------------------------------------------------------------------------------
 1 | .Examples
 2 |   margin-bottom: 200px
 3 | 
 4 |   h1
 5 |     text-align: center
 6 |     margin-top: 50px
 7 | 
 8 |   .links
 9 |     display: flex
10 |     justify-content: center
11 |     margin-bottom: 50px
12 | 
13 |     a
14 |       color: rgb(154, 154, 154)
15 |       &:hover
16 |         color: rgb(115, 115, 115)
17 |       &:first-of-type
18 |         margin-right: 20px
19 | 
20 |   .example
21 |     display: flex
22 |     margin-left: 20px
23 |     align-items: center
24 | 
25 |     pre
26 |       &:nth-child(1)
27 |         margin-right: 100px
28 | 
29 | pre > code
30 |     white-space: pre
31 |     margin-left: -7.00em
32 |     display: block
33 |     font-size: 0.9rem
34 | 
35 | 
36 | .md
37 |   border 1px grey solid
38 |   border-radius: 4px
39 |   padding-left: 4px
40 |   padding-right: 4px
41 |   background-color: rgb(235, 235, 235)
42 | 
43 | .margin-right
44 |   margin-right: 20px !important
45 | 
46 | .react-tooltip-5
47 |   opacity: 0
48 |   transform: translateY(10px)
49 |   &.fadeIn
50 |     opacity: 1
51 |     transform: translateY(0)
52 | 


--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #f5f6fa;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   font-family: 'Roboto', sans-serif;
 6 | }
 7 | .ToolTip {
 8 |   display: flex;
 9 |   justify-content: center;
10 |   align-items: center;
11 |   color: #ff6b00;
12 |   width: 130px;
13 |   height: 50px;
14 |   background-color: #fff;
15 |   position: relative;
16 |   box-shadow: 0px 3px 4px 0px #ebebeb;
17 |   border-radius: 3px;
18 | }
19 | .ToolTip::before {
20 |   content: '';
21 |   position: absolute;
22 |   left: 58px;
23 |   top: -10px;
24 |   height: 20px;
25 |   width: 20px;
26 |   background-color: #fff;
27 |   transform: rotate(45deg);
28 | }
29 | .ToolTip.advanced {
30 |   display: block;
31 |   height: initial;
32 |   padding: 20px;
33 | }
34 | .ToolTip.advanced::before {
35 |   left: 75px;
36 | }
37 | .Examples {
38 |   margin-bottom: 200px;
39 | }
40 | .Examples h1 {
41 |   text-align: center;
42 |   margin-top: 50px;
43 | }
44 | .Examples .links {
45 |   display: flex;
46 |   justify-content: center;
47 |   margin-bottom: 50px;
48 | }
49 | .Examples .links a {
50 |   color: #9a9a9a;
51 | }
52 | .Examples .links a:hover {
53 |   color: #737373;
54 | }
55 | .Examples .links a:first-of-type {
56 |   margin-right: 20px;
57 | }
58 | .Examples .example {
59 |   display: flex;
60 |   margin-left: 20px;
61 |   align-items: center;
62 | }
63 | .Examples .example pre:nth-child(1) {
64 |   margin-right: 100px;
65 | }
66 | pre > code {
67 |   white-space: pre;
68 |   margin-left: -7em;
69 |   display: block;
70 |   font-size: 0.9rem;
71 | }
72 | .md {
73 |   border: 1px #808080 solid;
74 |   border-radius: 4px;
75 |   padding-left: 4px;
76 |   padding-right: 4px;
77 |   background-color: #ebebeb;
78 | }
79 | .margin-right {
80 |   margin-right: 20px !important;
81 | }
82 | .react-tooltip-5 {
83 |   opacity: 0;
84 |   transform: translateY(10px);
85 | }
86 | .react-tooltip-5.fadeIn {
87 |   opacity: 1;
88 |   transform: translateY(0);
89 | }
90 | 


--------------------------------------------------------------------------------
/src/styles/main.styl:
--------------------------------------------------------------------------------
1 | @import "base"
2 | @import "Tooltip"
3 | @import "examples"
4 | 


--------------------------------------------------------------------------------
/src/styles/prism.css:
--------------------------------------------------------------------------------
  1 | /* PrismJS 1.15.0
  2 | https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
  3 | /**
  4 |  * okaidia theme for JavaScript, CSS and HTML
  5 |  * Loosely based on Monokai textmate theme by http://www.monokai.nl/
  6 |  * @author ocodia
  7 |  */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	color: #f8f8f2;
 12 | 	background: none;
 13 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 14 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 	word-wrap: normal;
 20 | 	line-height: 1.5;
 21 | 
 22 | 	-moz-tab-size: 2;
 23 | 	-o-tab-size: 2;
 24 | 	tab-size: 2;
 25 | 
 26 | 	-webkit-hyphens: none;
 27 | 	-moz-hyphens: none;
 28 | 	-ms-hyphens: none;
 29 | 	hyphens: none;
 30 | }
 31 | 
 32 | /* Code blocks */
 33 | pre[class*="language-"] {
 34 | 	padding: 1em;
 35 | 	margin: .5em 0;
 36 | 	overflow: auto;
 37 | 	border-radius: 0.3em;
 38 | }
 39 | 
 40 | :not(pre) > code[class*="language-"],
 41 | pre[class*="language-"] {
 42 | 	background: #272822;
 43 | }
 44 | 
 45 | /* Inline code */
 46 | :not(pre) > code[class*="language-"] {
 47 | 	padding: .1em;
 48 | 	border-radius: .3em;
 49 | 	white-space: normal;
 50 | }
 51 | 
 52 | .token.comment,
 53 | .token.prolog,
 54 | .token.doctype,
 55 | .token.cdata {
 56 | 	color: slategray;
 57 | }
 58 | 
 59 | .token.punctuation {
 60 | 	color: #f8f8f2;
 61 | }
 62 | 
 63 | .namespace {
 64 | 	opacity: .7;
 65 | }
 66 | 
 67 | .token.property,
 68 | .token.tag,
 69 | .token.constant,
 70 | .token.symbol,
 71 | .token.deleted {
 72 | 	color: #f92672;
 73 | }
 74 | 
 75 | .token.boolean,
 76 | .token.number {
 77 | 	color: #ae81ff;
 78 | }
 79 | 
 80 | .token.selector,
 81 | .token.attr-name,
 82 | .token.string,
 83 | .token.char,
 84 | .token.builtin,
 85 | .token.inserted {
 86 | 	color: #a6e22e;
 87 | }
 88 | 
 89 | .token.operator,
 90 | .token.entity,
 91 | .token.url,
 92 | .language-css .token.string,
 93 | .style .token.string,
 94 | .token.variable {
 95 | 	color: #f8f8f2;
 96 | }
 97 | 
 98 | .token.atrule,
 99 | .token.attr-value,
100 | .token.function,
101 | .token.class-name {
102 | 	color: #e6db74;
103 | }
104 | 
105 | .token.keyword {
106 | 	color: #66d9ef;
107 | }
108 | 
109 | .token.regex,
110 | .token.important {
111 | 	color: #fd971f;
112 | }
113 | 
114 | .token.important,
115 | .token.bold {
116 | 	font-weight: bold;
117 | }
118 | .token.italic {
119 | 	font-style: italic;
120 | }
121 | 
122 | .token.entity {
123 | 	cursor: help;
124 | }
125 | 


--------------------------------------------------------------------------------