├── .gitignore ├── README.md ├── css ├── component.css ├── demo.css └── normalize.css ├── favicon.ico ├── img └── related │ ├── ElasticProgress.jpg │ └── TooltipStyles.jpg ├── index.html └── js ├── anime.min.js ├── charming.min.js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tooltip Animations 2 | 3 | Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform. 4 | 5 | ![Tooltip Animations](https://tympanus.net/codrops/wp-content/uploads/2017/05/TooltipAnimations.png) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=31283) 8 | 9 | [Demo](http://tympanus.net/Development/TooltipAnimations/) 10 | 11 | ## Credits 12 | 13 | - [Anime.js](https://github.com/juliangarnier/anime) by Julian Garnier 14 | - [Charming.js](https://github.com/yuanqing/charming) by Yuan Qing 15 | 16 | ## License 17 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 18 | 19 | ## Misc 20 | 21 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 22 | 23 | [© Codrops 2017](http://www.codrops.com) 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | position: relative; 3 | display: inline-block; 4 | } 5 | 6 | .tooltip__trigger { 7 | cursor: pointer; 8 | position: relative; 9 | } 10 | 11 | .tooltip__trigger-text { 12 | display: block; 13 | padding: 0.85em; 14 | pointer-events: none; 15 | } 16 | 17 | .tooltip__base { 18 | position: absolute; 19 | bottom: 2em; 20 | left: 50%; 21 | margin-left: -150px; 22 | width: 300px; 23 | height: 200px; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | opacity: 0; 28 | pointer-events: none; 29 | } 30 | 31 | .tooltip__content { 32 | color: #4a4a4a; 33 | display: flex; 34 | position: relative; 35 | align-items: center; 36 | justify-content: center; 37 | width: 65%; 38 | padding: 0 1em; 39 | opacity: 0; 40 | font-size: 0.85em; 41 | } 42 | 43 | .tooltip__shape, 44 | .tooltip__deco { 45 | position: absolute; 46 | width: 100%; 47 | height: 100%; 48 | top: 0; 49 | left: 0; 50 | } 51 | 52 | .tooltip__shape { 53 | fill: #141514; 54 | } 55 | 56 | /* Indivudual styles */ 57 | 58 | /* Cora */ 59 | .tooltip--cora .tooltip__base{ 60 | transform-origin: 50% 100%; 61 | } 62 | 63 | .tooltip--cora .tooltip__content { 64 | margin-bottom: 1em; 65 | } 66 | 67 | /* Smaug */ 68 | .tooltip--smaug .tooltip__base { 69 | bottom: -0.5em; 70 | transform-origin: 50% 100%; 71 | } 72 | 73 | .tooltip--smaug .tooltip__content { 74 | padding: 0; 75 | } 76 | 77 | /* Dori */ 78 | .tooltip--dori .tooltip__base { 79 | bottom: -0.5em; 80 | } 81 | 82 | .tooltip--dori .tooltip__content { 83 | margin: 0 0 1em; 84 | } 85 | 86 | /* Walda */ 87 | .tooltip--walda .tooltip__base { 88 | left: 0; 89 | bottom: 0.75em; 90 | position: absolute; 91 | margin-left: 0; 92 | width: 250px; 93 | height: 100px; 94 | padding: 0 0 0 0.25em; 95 | } 96 | 97 | .tooltip--walda .tooltip__trigger-text { 98 | padding: 1em; 99 | } 100 | 101 | .tooltip--walda .tooltip__content { 102 | margin: 0; 103 | width: 100%; 104 | height: 100%; 105 | align-items: flex-start; 106 | text-align: left; 107 | font-size: 0.85em; 108 | line-height: 2; 109 | opacity: 1; 110 | justify-content: flex-start; 111 | } 112 | 113 | .tooltip--walda .tooltip__letters span { 114 | display: inline-block; 115 | white-space: pre; 116 | opacity: 0; 117 | } 118 | 119 | .tooltip--walda .tooltip__deco { 120 | width: 4px; 121 | height: 100%; 122 | background: #141514; 123 | transform-origin: 50% 100%; 124 | } 125 | 126 | /* Gram */ 127 | .tooltip--gram .tooltip__base { 128 | bottom: -0.5em; 129 | } 130 | 131 | /* Narvi */ 132 | .path-narvi { 133 | transform-origin: 200px 150px; 134 | } 135 | 136 | .tooltip--narvi .tooltip__content { 137 | width: 80%; 138 | } 139 | 140 | /* Amras */ 141 | .path-amras-1 { 142 | transform-origin: 115px 111px; 143 | } 144 | 145 | .path-amras-2 { 146 | transform-origin: 204px 107px; 147 | } 148 | 149 | .path-amras-3 { 150 | transform-origin: 279px 66px; 151 | } 152 | 153 | .path-amras-4 { 154 | transform-origin: 320px 99px; 155 | } 156 | 157 | .path-amras-5 { 158 | transform-origin: 137px 199px; 159 | } 160 | 161 | .path-amras-6 { 162 | transform-origin: 222px 217px; 163 | } 164 | 165 | .path-amras-7 { 166 | transform-origin: 80px 168px; 167 | } 168 | 169 | .path-amras-8 { 170 | transform-origin: 296px 211px; 171 | } 172 | 173 | .path-amras-9 { 174 | transform-origin: 310px 167px; 175 | } 176 | 177 | /* Hador */ 178 | .tooltip--hador .tooltip__base { 179 | bottom: 2.25em; 180 | margin-left: -115px; 181 | } 182 | 183 | .path-hador-1 { 184 | transform-origin: 148px 284px; 185 | } 186 | 187 | .path-hador-2 { 188 | transform-origin: 160px 268px; 189 | } 190 | 191 | .path-hador-3 { 192 | transform-origin: 171px 246px; 193 | } 194 | 195 | .path-hador-4 { 196 | transform-origin: 200px 120px; 197 | } 198 | 199 | .tooltip--hador .tooltip__content { 200 | width: 50%; 201 | margin: 0 0 2.5em; 202 | } 203 | 204 | /* Malva */ 205 | .tooltip--malva .tooltip__content { 206 | width: 50%; 207 | } 208 | 209 | /* Sadoc */ 210 | .tooltip--sadoc .tooltip__base { 211 | bottom: 2.5em; 212 | } 213 | 214 | .tooltip--sadoc .tooltip__shape path { 215 | fill: #1d1f1e; 216 | stroke: #5a5c5b; 217 | stroke-width: 3px; 218 | } 219 | 220 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Overpass Mono', monospace; 10 | color: #666; 11 | background: #1d1f1e; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | color: #6fbb95; 17 | outline: none; 18 | } 19 | 20 | a:hover, 21 | a:focus { 22 | color: #fff; 23 | } 24 | 25 | .hidden { 26 | position: absolute; 27 | overflow: hidden; 28 | width: 0; 29 | height: 0; 30 | pointer-events: none; 31 | } 32 | 33 | /* Icons */ 34 | .icon { 35 | display: block; 36 | width: 1.5em; 37 | height: 1.5em; 38 | margin: 0 auto; 39 | fill: currentColor; 40 | } 41 | 42 | /* Header */ 43 | .codrops-header { 44 | display: flex; 45 | flex-direction: row; 46 | flex-wrap: wrap; 47 | align-items: center; 48 | width: 100%; 49 | padding: 1.5em 1.5em 4em; 50 | text-align: left; 51 | } 52 | 53 | .codrops-header__title { 54 | font-size: 1.15em; 55 | margin: 0; 56 | padding: 0 0.5em; 57 | } 58 | 59 | .github { 60 | font-size: 0.85em; 61 | font-weight: bold; 62 | } 63 | 64 | .codrops-header__tagline { 65 | font-size: 0.85em; 66 | width: 100%; 67 | margin: 0 0 0.5em; 68 | color: #989898; 69 | } 70 | 71 | .codrops-header__tagline::before { 72 | content: '> '; 73 | } 74 | 75 | /* Top Navigation Style */ 76 | .codrops-links { 77 | position: relative; 78 | display: flex; 79 | justify-content: center; 80 | text-align: center; 81 | white-space: nowrap; 82 | } 83 | 84 | .codrops-links::after { 85 | content: ''; 86 | position: absolute; 87 | top: 20%; 88 | left: 50%; 89 | width: 1px; 90 | height: 60%; 91 | background: #b0adad; 92 | transform: rotate3d(0, 0, 1, 22.5deg); 93 | } 94 | 95 | .codrops-icon { 96 | display: inline-block; 97 | margin: 0.25em 0 0.25em 0.25em; 98 | padding: 0.35em 0 0.35em 0.35em; 99 | } 100 | 101 | .codrops-icon:first-child { 102 | margin: 0.25em 0.25em 0.25em 0; 103 | padding: 0.35em 0.35em 0.35em 0; 104 | } 105 | 106 | /* Grid */ 107 | .grid { 108 | display: grid; 109 | max-width: 1100px; 110 | margin: 0 auto; 111 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 112 | grid-auto-rows: 260px; 113 | } 114 | 115 | .grid__item { 116 | padding: 1em; 117 | text-align: center; 118 | display: grid; 119 | align-items: center; 120 | justify-items: center; 121 | } 122 | 123 | /* Content */ 124 | .content { 125 | padding: 5em 0 3em; 126 | -webkit-touch-callout: none; 127 | -ms-user-select: none; 128 | -webkit-user-select: none; 129 | -moz-user-select: none; 130 | user-select: none; 131 | } 132 | 133 | /* Related demos */ 134 | .content--related { 135 | text-align: center; 136 | font-size: 0.85em; 137 | padding: 3em 1em 6em; 138 | } 139 | 140 | .media-item { 141 | display: inline-block; 142 | padding: 1em; 143 | vertical-align: top; 144 | transition: color 0.3s; 145 | } 146 | 147 | .media-item__img { 148 | max-width: 100%; 149 | opacity: 0.8; 150 | transition: opacity 0.3s; 151 | } 152 | 153 | .media-item:hover .media-item__img, 154 | .media-item:focus .media-item__img { 155 | opacity: 1; 156 | } 157 | 158 | .media-item__title { 159 | font-size: 1em; 160 | margin: 0; 161 | padding: 0.5em; 162 | } 163 | 164 | @media screen and (max-width: 40em) { 165 | .codrops-header { 166 | display: block; 167 | text-align: center; 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipAnimations/7d002add564cc6b5c3da7be907c91f83b8004fb0/favicon.ico -------------------------------------------------------------------------------- /img/related/ElasticProgress.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipAnimations/7d002add564cc6b5c3da7be907c91f83b8004fb0/img/related/ElasticProgress.jpg -------------------------------------------------------------------------------- /img/related/TooltipStyles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipAnimations/7d002add564cc6b5c3da7be907c91f83b8004fb0/img/related/TooltipStyles.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tooltip Animations | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 28 |
29 |
30 |
31 | 32 | 33 |
34 |

Tooltip Animations

35 |

Some ideas for tooltip shapes and animations

36 | /Github 37 |
38 |
39 |
40 |
41 |
42 | 45 |
46 | 47 | 48 | 49 |
Be yourself; everyone else is already taken.
50 |
51 |
52 |
53 |
54 |
55 | 58 |
59 | 60 | 61 | 62 |
Make love, not war!
63 |
64 |
65 |
66 |
67 |
68 | 71 |
72 | 73 | 74 | 75 |
It does not do to dwell on dreams and forget to live.
76 |
77 |
78 |
79 |
80 |
81 | 84 |
85 | 86 | 87 | 88 |
If you judge people, you have no time to love them.
89 |
90 |
91 |
92 |
93 |
94 | 97 |
98 | 99 | 100 | 101 |
You can only be afraid of what you think you know.
102 |
103 |
104 |
105 |
106 |
107 | 110 |
111 | 112 | 113 | 114 |
Logic will get you from A to Z; imagination will get you everywhere.
115 |
116 |
117 |
118 |
119 |
120 | 123 |
124 |
125 |
126 | A day without sunshine
is like, you know, night. 127 |
128 |
129 |
130 |
131 |
132 |
133 | 136 |
137 | 138 | 139 | 140 |
Life isn't about finding yourself. Life is about creating yourself.
141 |
142 |
143 |
144 |
145 |
146 | 149 |
150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 |
Real learning comes about when the competitive spirit has ceased.
162 |
163 |
164 |
165 |
166 |
167 | 170 |
171 | 172 | 173 | 174 | 175 | 176 | 177 |
Acquiring knowledge is a form of imitation.
178 |
179 |
180 |
181 |
182 |
183 | 186 |
187 | 188 | 189 | 190 |
Never go to bed mad. Stay up and fight!
191 |
192 |
193 |
194 |
195 |
196 | 199 |
200 | 201 | 202 | 203 |
We don't see things as they are, we see them as we are.
204 |
205 |
206 |
207 |
208 |
209 | 210 |
211 |

If you enjoyed this demo you might also like:

212 | 213 | 214 |

Tooltip Styles

215 | 216 | 217 | 218 |

Elastic Progress

219 | 220 |
221 |
222 | 223 | 224 | 225 | 226 | 227 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2017 Julian Garnier 3 | Released under the MIT license 4 | */ 5 | var $jscomp$this=this; 6 | (function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){function u(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function r(a){return a.reduce(function(a,c){return a.concat(g.arr(c)?r(c):c)},[])}function v(a){if(g.arr(a))return a;g.str(a)&&(a=u(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function E(a,b){return a.some(function(a){return a===b})} 7 | function z(a){var b={},c;for(c in a)b[c]=a[c];return b}function F(a,b){var c=z(a),d;for(d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function A(a,b){var c=z(a),d;for(d in b)c[d]=g.und(a[d])?b[d]:a[d];return c}function R(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,h){return b+b+c+c+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}function S(a){function b(a,b,c){0> 8 | c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var c=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(c[1])/360;var d=parseInt(c[2])/100,c=parseInt(c[3])/100;if(0==d)d=c=a=c;else{var e=.5>c?c*(1+d):c+d-c*d,k=2*c-e,d=b(k,e,a+1/3),c=b(k,e,a);a=b(k,e,a-1/3)}return"rgb("+255*d+","+255*c+","+255*a+")"}function w(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function T(a){if(-1k&&q=m&&(f.began=!0,e("begin")),e("run")):(q<=k&&0!==O&&(d(0),p&&g()),q>=h&&O!==h&&(d(h),p||g()));a>=h&&(f.remaining?(t=n,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),P(),Q=b(),f.completed||(f.completed=!0,e("complete"))),l=0);if(f.children)for(a=f.children,h=0;h=b&& 22 | 0<=d&&1>=d){var g=new Float32Array(11);if(b!==c||d!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,d);return function(h){if(b===c&&d===e)return h;if(0===h)return 0;if(1===h)return 1;for(var k=0,l=1;10!==l&&g[l]<=h;++l)k+=.1;--l;var l=k+(h-g[l])/(g[l+1]-g[l])*.1,n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(.001<=n){for(k=0;4>k;++k){n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(0===n)break;var m=a(l,b,d)-h,l=l-m/n}h=l}else if(0===n)h=l;else{var l=k,k=k+.1,f=0;do m=l+(k-l)/2,n=a(m,b,d)-h,0++f);h=m}return a(h,c,e)}}}}(),M=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),c={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1], 24 | [.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},d={linear:x(.25,.25,.75,.75)},e={},k;for(k in c)e.type=k,c[e.type].forEach(function(a){return function(c,e){d["ease"+a.type+b[e]]=g.fnc(c)?c:x.apply($jscomp$this,c)}}(e)),e={type:e.type};return d}(),ha={css:function(a,b,c){return a.style[b]= 25 | c},attribute:function(a,b,c){return a.setAttribute(b,c)},object:function(a,b,c){return a[b]=c},transform:function(a,b,c,d,e){d[e]||(d[e]=[]);d[e].push(b+"("+c+")")}},p=[],y=0,ia=function(){function a(){y=requestAnimationFrame(b)}function b(b){var c=p.length;if(c){for(var e=0;ed&&(b.duration=a.duration);b.children.push(a)});return b};return b};m.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return m}); -------------------------------------------------------------------------------- /js/charming.min.js: -------------------------------------------------------------------------------- 1 | !function(e){"undefined"==typeof module?this.charming=e:module.exports=e}(function(e,n){"use strict";n=n||{};var t=n.tagName||"span",o=null!=n.classPrefix?n.classPrefix:"char",r=1,a=function(e){for(var n=e.parentNode,a=e.nodeValue,c=a.length,l=-1;++l 1 ? Array.from(this.DOM.shape.querySelectorAll('path')) : this.DOM.shape.querySelector('path'); 1026 | } 1027 | this.DOM.deco = this.DOM.base.querySelector('.tooltip__deco'); 1028 | this.DOM.content = this.DOM.base.querySelector('.tooltip__content'); 1029 | 1030 | this.DOM.letters = this.DOM.content.querySelector('.tooltip__letters'); 1031 | if( this.DOM.letters ) { 1032 | // Create spans for each letter. 1033 | charming(this.DOM.letters); 1034 | // Redefine content. 1035 | this.DOM.content = this.DOM.letters.querySelectorAll('span'); 1036 | } 1037 | this.initEvents(); 1038 | } 1039 | initEvents() { 1040 | this.mouseenterFn = () => { 1041 | this.mouseTimeout = setTimeout(() => { 1042 | this.isShown = true; 1043 | this.show(); 1044 | }, 75); 1045 | } 1046 | this.mouseleaveFn = () => { 1047 | clearTimeout(this.mouseTimeout); 1048 | if( this.isShown ) { 1049 | this.isShown = false; 1050 | this.hide(); 1051 | } 1052 | } 1053 | this.DOM.trigger.addEventListener('mouseenter', this.mouseenterFn); 1054 | this.DOM.trigger.addEventListener('mouseleave', this.mouseleaveFn); 1055 | this.DOM.trigger.addEventListener('touchstart', this.mouseenterFn); 1056 | this.DOM.trigger.addEventListener('touchend', this.mouseleaveFn); 1057 | } 1058 | show() { 1059 | this.animate('in'); 1060 | } 1061 | hide() { 1062 | this.animate('out'); 1063 | } 1064 | animate(dir) { 1065 | if ( config[this.type][dir].base ) { 1066 | anime.remove(this.DOM.base); 1067 | let baseAnimOpts = {targets: this.DOM.base}; 1068 | anime(Object.assign(baseAnimOpts, config[this.type][dir].base)); 1069 | } 1070 | if ( config[this.type][dir].shape ) { 1071 | anime.remove(this.DOM.shape); 1072 | let shapeAnimOpts = {targets: this.DOM.shape}; 1073 | anime(Object.assign(shapeAnimOpts, config[this.type][dir].shape)); 1074 | } 1075 | if ( config[this.type][dir].path ) { 1076 | anime.remove(this.DOM.path); 1077 | let shapeAnimOpts = {targets: this.DOM.path}; 1078 | anime(Object.assign(shapeAnimOpts, config[this.type][dir].path)); 1079 | } 1080 | if ( config[this.type][dir].content ) { 1081 | anime.remove(this.DOM.content); 1082 | let contentAnimOpts = {targets: this.DOM.content}; 1083 | anime(Object.assign(contentAnimOpts, config[this.type][dir].content)); 1084 | } 1085 | if ( config[this.type][dir].trigger ) { 1086 | anime.remove(this.DOM.triggerSpan); 1087 | let triggerAnimOpts = {targets: this.DOM.triggerSpan}; 1088 | anime(Object.assign(triggerAnimOpts, config[this.type][dir].trigger)); 1089 | } 1090 | if ( config[this.type][dir].deco ) { 1091 | anime.remove(this.DOM.deco); 1092 | let decoAnimOpts = {targets: this.DOM.deco}; 1093 | anime(Object.assign(decoAnimOpts, config[this.type][dir].deco)); 1094 | } 1095 | } 1096 | destroy() { 1097 | this.DOM.trigger.removeEventListener('mouseenter', this.mouseenterFn); 1098 | this.DOM.trigger.removeEventListener('mouseleave', this.mouseleaveFn); 1099 | this.DOM.trigger.removeEventListener('touchstart', this.mouseenterFn); 1100 | this.DOM.trigger.removeEventListener('touchend', this.mouseleaveFn); 1101 | } 1102 | } 1103 | 1104 | const init = (() => tooltips.forEach(t => new Tooltip(t)))(); 1105 | }; --------------------------------------------------------------------------------