├── README.md ├── bloated.html ├── box.html ├── comic.html ├── css ├── demo.css ├── normalize.css ├── tooltip-bloated.css ├── tooltip-box.css ├── tooltip-classic.css ├── tooltip-comic.css ├── tooltip-curved.css ├── tooltip-flip.css ├── tooltip-line.css ├── tooltip-round.css └── tooltip-sharp.css ├── curved.html ├── flip.html ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── font-awesome-4.2.0 │ ├── css │ └── font-awesome.min.css │ └── fonts │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff ├── img ├── Euclid.png ├── Quasar.png ├── map.jpg ├── related │ ├── DotNavigationStyles-300x162.png │ └── NotificationStyles-300x162.png ├── shape1.svg ├── shape2.svg ├── shape3.svg ├── tooltip1.svg ├── tooltip2.svg ├── tooltip3.svg ├── user1.png ├── user2.png ├── user3.png └── user4.png ├── index.html ├── line.html ├── round.html └── sharp.html /README.md: -------------------------------------------------------------------------------- 1 | Tooltip Styles Inspiration 2 | ========= 3 | 4 | Various hover tooltip styles, shapes and effects for your inspiration. 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=20496) 7 | 8 | [Demo](http://tympanus.net/Development/TooltipStylesInspiration/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | User avatars from [Random User Generator](http://randomuser.me/), copyrighted under a [Creative Commons BY-NC-SA 2.0](http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en) license. These photos were hand picked from Greg Peverill-Conti's [1,000 faces project](http://www.flickr.com/photos/gregpc/). 15 | 16 | Background map image from [Google Maps](http://maps.google.com). 17 | 18 | Quasar Image HE 1104-1805 by [NASA, ESA and J.A. Muñoz (University of Valencia)](http://www.spacetelescope.org/images/heic1116a/). 19 | 20 | [© Codrops 2014](http://www.codrops.com) -------------------------------------------------------------------------------- /bloated.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Bloated 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 | 23 |
24 | Previous Demo 25 | Back to the Codrops Article 26 |
27 |
28 |
29 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

30 | 41 |
42 | 51 | 52 | 63 |
64 |
65 | 66 | -------------------------------------------------------------------------------- /box.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Box 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 |
21 | 22 |
23 | Previous Demo 24 | Back to the Codrops Article 25 |
26 |
27 |
28 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

29 | 40 |
41 |
42 |

Tesseract, finite but unbounded take root and flourish, EuclidEuclid, also known as Euclid of Alexandria, was a Greek mathematician, often referred to as the "Father of Geometry". He was active in Alexandria during the reign of Ptolemy I. Wikipedia rogue laws of physics, star stuff harvesting star light, encyclopaedia galactica are creatures of the cosmos the only home we've ever known ship of the imagination prime number quasarQuasars are believed to be powered by accretion of material into supermassive black holes in the nuclei of distant galaxies, making these luminous versions of the general... Wikipedia courage of our questions.

43 |

Colonies. Jean-François Champollion, billions upon billions descended from astronomers the sky calls to us! Made in the interiors of collapsing stars, billions upon billions radio telescope paroxysm of global death not a sunrise but a galaxyrise, gathered by gravity permanence of the stars?

44 |

Image credit Quasar HE 1104-1805 by NASA, ESA and J.A. Muñoz (University of Valencia)

45 |
46 | 47 | 58 |
59 |
60 | 61 | -------------------------------------------------------------------------------- /comic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Comic 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 | 23 |
24 | Previous Demo 25 | Back to the Codrops Article 26 |
27 |
28 |
29 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

30 | 41 |
42 |
43 |
44 | user2

Jerry Greenfield

45 | That design needs some brighter colors... 46 |
47 | 48 | 50 | 52 | 54 | 60 | 61 |
62 |
63 |
64 | user3

Caroline Wild

65 | Today we have an interesting typographic challenge... 66 |
67 | 68 | 69 | 70 |
71 |
72 |
73 |

Note that the transform-origin in percentages for the SVG path does not work correctly in Firefox.

74 | 75 | 86 |

Images from Random User Generator, copyrighted under a Creative Commons BY-NC-SA 2.0 license. These photos were hand picked from Greg Peverill-Conti's 1,000 faces project.

87 |
88 |
89 | 90 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Raleway:200,300,400,700); 2 | 3 | @font-face { 4 | font-weight: normal; 5 | font-style: normal; 6 | font-family: 'codropsicons'; 7 | src:url('../fonts/codropsicons/codropsicons.eot'); 8 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 9 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 10 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 11 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 12 | } 13 | 14 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 15 | .clearfix:before, .clearfix:after { content: ''; display: table; } 16 | .clearfix:after { clear: both; } 17 | 18 | body, html, .container { 19 | height: 100%; 20 | } 21 | 22 | body { 23 | background: #fff; 24 | color: #74777b; 25 | font-weight: 500; 26 | font-size: 1em; 27 | font-family: 'Raleway', Arial, sans-serif; 28 | } 29 | 30 | a { 31 | color: #2fa0ec; 32 | text-decoration: none; 33 | outline: none; 34 | } 35 | 36 | a:hover, a:focus { 37 | color: #74777b; 38 | } 39 | 40 | .color-1 { 41 | background: #434d55; 42 | color: #eee; 43 | } 44 | 45 | .color-2 { 46 | background: #47c9af; 47 | color: #fff; 48 | } 49 | 50 | .color-2 a { 51 | color: rgba(0,0,0,0.3); 52 | } 53 | 54 | .color-2 a:hover, 55 | .color-2 a:focus { 56 | color: #fff; 57 | } 58 | 59 | .color-3 { 60 | color: #fff; 61 | background: #566473; 62 | } 63 | 64 | .color-3 a { 65 | color: rgba(58,77,97,0.8); 66 | } 67 | 68 | .color-3 a:hover, 69 | .color-3 a:focus { 70 | color: #fff; 71 | } 72 | 73 | .color-3 .container { 74 | background: url(../img/map.jpg) no-repeat 50% 50%; 75 | background-size: cover; 76 | min-height: 1000px; 77 | } 78 | 79 | .color-4 { 80 | color: rgba(102,49,54,0.8); 81 | background: #dd5864; 82 | } 83 | 84 | .color-4 a { 85 | color: rgba(255,255,255,0.9); 86 | } 87 | 88 | .color-4 a:hover, 89 | .color-4 a:focus { 90 | color: #fff; 91 | } 92 | 93 | .color-5 { 94 | background: #e4eaea; 95 | } 96 | 97 | .color-5 .codrops-demos a { 98 | color: #e35583; 99 | } 100 | 101 | .color-6 { 102 | background: #ffdab9; 103 | } 104 | 105 | .color-6 a { 106 | color: #e74c3c; 107 | } 108 | 109 | .color-6 a:hover, 110 | .color-6 a:focus { 111 | color: #74777b; 112 | } 113 | 114 | .color-7 { 115 | color: #fff; 116 | background: #f08080; 117 | } 118 | 119 | .color-7 a { 120 | color: #fffaf0; 121 | } 122 | 123 | .color-7 a:hover, 124 | .color-7 a:focus { 125 | color: #fff; 126 | } 127 | 128 | .color-8 { 129 | color: #fff; 130 | background: #2f3238; 131 | } 132 | 133 | .color-8 a { 134 | color: #ddd; 135 | } 136 | 137 | .color-8 a:hover, 138 | .color-8 a:focus { 139 | color: #fff; 140 | } 141 | 142 | .content { 143 | padding: 0 1em; 144 | margin: 0 auto; 145 | text-align: center; 146 | } 147 | 148 | /* Header */ 149 | .codrops-header { 150 | padding: 1em 0 3em; 151 | letter-spacing: -1px; 152 | } 153 | 154 | .codrops-header h1 { 155 | font-weight: 800; 156 | font-size: 4.5em; 157 | line-height: 1; 158 | } 159 | 160 | .codrops-header h1 span { 161 | display: block; 162 | font-size: 50%; 163 | font-weight: 200; 164 | padding-top: 0.325em; 165 | opacity: 0.6; 166 | } 167 | 168 | /* To Navigation Style */ 169 | .codrops-top { 170 | width: 100%; 171 | text-transform: uppercase; 172 | font-weight: 700; 173 | font-size: 0.69em; 174 | line-height: 2.2; 175 | } 176 | 177 | .codrops-top a { 178 | display: inline-block; 179 | padding: 1em 2em; 180 | text-decoration: none; 181 | letter-spacing: 1px; 182 | } 183 | 184 | .codrops-top span.right { 185 | float: right; 186 | } 187 | 188 | .codrops-top span.right a { 189 | display: block; 190 | float: left; 191 | } 192 | 193 | .codrops-icon:before { 194 | margin: 0 4px; 195 | text-transform: none; 196 | font-weight: normal; 197 | font-style: normal; 198 | font-variant: normal; 199 | font-family: 'codropsicons'; 200 | line-height: 1; 201 | speak: none; 202 | -webkit-font-smoothing: antialiased; 203 | } 204 | 205 | .codrops-icon-drop:before { 206 | content: "\e001"; 207 | } 208 | 209 | .codrops-icon-prev:before { 210 | content: "\e004"; 211 | } 212 | 213 | /* Codrops demo links */ 214 | .codrops-demos { 215 | margin: 0 auto; 216 | } 217 | 218 | .codrops-demos a { 219 | font-weight: 700; 220 | text-transform: uppercase; 221 | letter-spacing: 1px; 222 | padding: 0.25em 0; 223 | margin: 5px 10px; 224 | display: inline-block; 225 | font-size: 0.85em; 226 | } 227 | 228 | .codrops-demos a.current-demo { 229 | opacity: 0.5; 230 | } 231 | 232 | /* Related demos */ 233 | .related { 234 | text-align: center; 235 | padding: 8em 0; 236 | clear: both; 237 | } 238 | 239 | .related > a { 240 | width: calc(100% - 20px); 241 | max-width: 340px; 242 | border: 1px solid rgba(0,0,0,0.3); 243 | color: rgba(0,0,0,0.3); 244 | display: inline-block; 245 | text-align: center; 246 | border-radius: 4px; 247 | margin: 20px 10px; 248 | padding: 25px; 249 | } 250 | 251 | .related a img { 252 | max-width: 100%; 253 | opacity: 0.8; 254 | } 255 | 256 | .related a:hover img, 257 | .related a:active img { 258 | opacity: 1; 259 | } 260 | 261 | .related a h3 { 262 | margin: 0; 263 | padding: 0.5em 0 0.3em; 264 | max-width: 300px; 265 | text-align: left; 266 | } 267 | 268 | /* Dummy elements */ 269 | .dummy { 270 | text-align: left; 271 | padding: 1em; 272 | min-height: 300px; 273 | margin: 0 auto; 274 | font-weight: 300; 275 | } 276 | 277 | .dummy-text { 278 | max-width: 1000px; 279 | font-size: 1.65em; 280 | } 281 | 282 | .info { 283 | margin: 0 auto; 284 | text-align: center; 285 | max-width: 600px; 286 | font-size: 13px; 287 | padding: 2em 0; 288 | } 289 | 290 | .dummy-text p { 291 | margin-top: 0; 292 | line-height: 1.8; 293 | text-align: justify; 294 | } 295 | 296 | .dummy-text h3 { 297 | font-weight: 700; 298 | text-transform: uppercase; 299 | letter-spacing: 2px; 300 | font-size: 1em; 301 | margin: 2em 0 1em; 302 | } 303 | 304 | .dummy-menu { 305 | max-width: 100%; 306 | padding: 4em 1em; 307 | } 308 | 309 | .dummy-menu ul, 310 | .dummy-team ul { 311 | list-style: none; 312 | text-align: center; 313 | padding: 0; 314 | margin: 0 0 3em; 315 | } 316 | 317 | .dummy-menu ul li { 318 | display: inline-block; 319 | position: relative; 320 | margin: 0 1em; 321 | font-size: 1.5em; 322 | } 323 | 324 | .dummy-menu ul li a { 325 | display: inline-block; 326 | font-weight: 700; 327 | padding: 0.15em 0.25em 0; 328 | -webkit-transition: color 0.3s; 329 | transition: color 0.3s; 330 | } 331 | 332 | .dummy-menu-icons ul li { 333 | width: 2em; 334 | height: 2em; 335 | font-size: 2em; 336 | line-height: 1.75; 337 | } 338 | 339 | .dummy-image { 340 | position: relative; 341 | } 342 | 343 | .dummy blockquote { 344 | font-family: 'Kalam', cursive; 345 | font-size: 2.5em; 346 | max-width: 700px; 347 | text-align: center; 348 | margin: 0 auto; 349 | } 350 | 351 | .dummy blockquote footer { 352 | font-size: 0.5em; 353 | } 354 | 355 | .dummy blockquote footer::before { 356 | content: '—'; 357 | } 358 | 359 | .dummy-avatar { 360 | margin-top: 7em; 361 | text-align: center; 362 | } 363 | 364 | .dummy-avatar > div { 365 | display: inline-block; 366 | margin: 0 1em; 367 | } 368 | 369 | .dummy-avatar a { 370 | margin: 0 auto; 371 | display: block; 372 | text-align: center; 373 | -webkit-transition: color 0.3s; 374 | transition: color 0.3s; 375 | } 376 | 377 | .dummy-avatar a img { 378 | border-radius: 50%; 379 | } 380 | 381 | .dummy-avatar a h4 { 382 | margin: 0.25em 0; 383 | line-height: 1; 384 | font-size: 1.75em; 385 | font-weight: 400; 386 | } 387 | 388 | @media screen and (max-width: 27em) { 389 | .codrops-icon { 390 | font-size: 1.5em; 391 | } 392 | .codrops-icon span { 393 | display: none; 394 | } 395 | } -------------------------------------------------------------------------------- /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;} -------------------------------------------------------------------------------- /css/tooltip-bloated.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Kalam); 2 | 3 | .tooltip { 4 | display: inline; 5 | position: relative; 6 | z-index: 999; 7 | } 8 | 9 | .tooltip-content { 10 | position: absolute; 11 | background: url(../img/shape1.svg) no-repeat center bottom; 12 | background-size: 100% 100%; 13 | z-index: 9999; 14 | width: 200px; 15 | bottom: 100%; 16 | left: 50%; 17 | margin-left: -100px; 18 | padding: 50px 30px; 19 | text-align: center; 20 | color: #fff; 21 | opacity: 0; 22 | cursor: default; 23 | font-size: 0.55em; 24 | line-height: 1.4; 25 | pointer-events: none; 26 | font-family: 'Kalam', cursive; 27 | -webkit-transform: scale3d(0.1,0.2,1); 28 | transform: scale3d(0.1,0.2,1); 29 | -webkit-transform-origin: 50% 120%; 30 | transform-origin: 50% 120%; 31 | -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; 32 | transition: opacity 0.4s, transform 0.4s; 33 | -webkit-transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1); 34 | transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1); 35 | } 36 | 37 | .tooltip:hover .tooltip-content { 38 | opacity: 1; 39 | pointer-events: auto; 40 | -webkit-transform: scale3d(1,1,1); 41 | transform: scale3d(1,1,1); 42 | } 43 | 44 | /* Arrow */ 45 | 46 | .tooltip-content::after { 47 | content: ''; 48 | position: absolute; 49 | width: 16px; 50 | height: 16px; 51 | left: 50%; 52 | margin-left: -8px; 53 | top: 100%; 54 | background: #00AEEF; 55 | -webkit-transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg); 56 | transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg); 57 | } 58 | -------------------------------------------------------------------------------- /css/tooltip-box.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Indie+Flower); 2 | 3 | .tooltip { 4 | display: inline; 5 | position: relative; 6 | z-index: 999; 7 | } 8 | 9 | /* Trigger text */ 10 | 11 | .tooltip-item { 12 | color: #2fa0ec; 13 | cursor: pointer; 14 | z-index: 100; 15 | position: relative; 16 | display: inline-block; 17 | font-weight: 700; 18 | -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s; 19 | transition: background-color 0.3s, color 0.3s, transform 0.3s; 20 | } 21 | 22 | .tooltip:hover .tooltip-item { 23 | color: #fff; 24 | -webkit-transform: translate3d(0,-0.5em,0); 25 | transform: translate3d(0,-0.5em,0); 26 | } 27 | 28 | /* Tooltip */ 29 | 30 | .tooltip-content { 31 | position: absolute; 32 | z-index: 99; 33 | width: 360px; 34 | left: 50%; 35 | margin-left: -180px; 36 | bottom: -5px; 37 | text-align: left; 38 | background: #2fa0ec; 39 | opacity: 0; 40 | font-size: 0.75em; 41 | line-height: 1.5; 42 | padding: 1.5em; 43 | color: #fff; 44 | border-bottom: 65px solid #2a3035; 45 | cursor: default; 46 | pointer-events: none; 47 | border-radius: 5px; 48 | font-family: 'Indie Flower', cursive; 49 | -webkit-transform: translate3d(0,-0.5em,0); 50 | transform: translate3d(0,-0.5em,0); 51 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 52 | transition: opacity 0.3s, transform 0.3s; 53 | } 54 | 55 | .tooltip-content a { 56 | color: #32434f; 57 | } 58 | 59 | .tooltip-text { 60 | opacity: 0; 61 | -webkit-transform: translate3d(0,1.5em,0); 62 | transform: translate3d(0,1.5em,0); 63 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 64 | transition: opacity 0.3s, transform 0.3s; 65 | } 66 | 67 | .tooltip:hover .tooltip-content, 68 | .tooltip:hover .tooltip-text { 69 | pointer-events: auto; 70 | opacity: 1; 71 | -webkit-transform: translate3d(0,0,0); 72 | transform: translate3d(0,0,0); 73 | } 74 | 75 | -------------------------------------------------------------------------------- /css/tooltip-classic.css: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | display: inline; 3 | position: relative; 4 | z-index: 999; 5 | } 6 | 7 | /* Trigger text */ 8 | 9 | .tooltip-item { 10 | background: rgba(0,0,0,0.3); 11 | cursor: pointer; 12 | display: inline-block; 13 | font-weight: 700; 14 | padding: 0 10px; 15 | } 16 | 17 | /* Gap filler */ 18 | 19 | .tooltip-item::after { 20 | content: ''; 21 | position: absolute; 22 | width: 360px; 23 | height: 20px; 24 | bottom: 100%; 25 | left: 50%; 26 | pointer-events: none; 27 | -webkit-transform: translateX(-50%); 28 | transform: translateX(-50%); 29 | } 30 | 31 | .tooltip:hover .tooltip-item::after { 32 | pointer-events: auto; 33 | } 34 | 35 | /* Tooltip */ 36 | 37 | .tooltip-content { 38 | position: absolute; 39 | z-index: 9999; 40 | width: 360px; 41 | left: 50%; 42 | margin: 0 0 20px -180px; 43 | bottom: 100%; 44 | text-align: left; 45 | font-size: 0.765em; 46 | line-height: 1.4; 47 | box-shadow: -5px -5px 15px rgba(48,54,61,0.2); 48 | background: #2a3035; 49 | opacity: 0; 50 | cursor: default; 51 | pointer-events: none; 52 | } 53 | 54 | .tooltip-effect-1 .tooltip-content { 55 | -webkit-transform: translate3d(0,-10px,0); 56 | transform: translate3d(0,-10px,0); 57 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 58 | transition: opacity 0.3s, transform 0.3s; 59 | } 60 | 61 | .tooltip-effect-2 .tooltip-content { 62 | -webkit-transform-origin: 50% calc(100% + 10px); 63 | transform-origin: 50% calc(100% + 10px); 64 | -webkit-transform: perspective(1000px) rotate3d(1,0,0,45deg); 65 | transform: perspective(1000px) rotate3d(1,0,0,45deg); 66 | -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; 67 | transition: opacity 0.2s, transform 0.2s; 68 | } 69 | 70 | .tooltip-effect-3 .tooltip-content { 71 | -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg); 72 | transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg); 73 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 74 | transition: opacity 0.3s, transform 0.3s; 75 | } 76 | 77 | .tooltip-effect-4 .tooltip-content { 78 | -webkit-transform-origin: 50% 100%; 79 | transform-origin: 50% 100%; 80 | -webkit-transform: scale3d(0.7,0.3,1); 81 | transform: scale3d(0.7,0.3,1); 82 | -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; 83 | transition: opacity 0.2s, transform 0.2s; 84 | } 85 | 86 | .tooltip-effect-5 .tooltip-content { 87 | width: 180px; 88 | margin-left: -90px; 89 | -webkit-transform-origin: 50% calc(100% + 6em); 90 | transform-origin: 50% calc(100% + 6em); 91 | -webkit-transform: rotate3d(0,0,1,15deg); 92 | transform: rotate3d(0,0,1,15deg); 93 | -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; 94 | transition: opacity 0.2s, transform 0.2s; 95 | -webkit-transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39); 96 | transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39); 97 | } 98 | 99 | .tooltip:hover .tooltip-content { 100 | pointer-events: auto; 101 | opacity: 1; 102 | -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); 103 | transform: translate3d(0,0,0) rotate3d(0,0,0,0); 104 | } 105 | 106 | .tooltip.tooltip-effect-2:hover .tooltip-content { 107 | -webkit-transform: perspective(1000px) rotate3d(1,0,0,0deg); 108 | transform: perspective(1000px) rotate3d(1,0,0,0deg); 109 | } 110 | 111 | /* Arrow */ 112 | 113 | .tooltip-content::after { 114 | content: ''; 115 | top: 100%; 116 | left: 50%; 117 | border: solid transparent; 118 | height: 0; 119 | width: 0; 120 | position: absolute; 121 | pointer-events: none; 122 | border-color: transparent; 123 | border-top-color: #2a3035; 124 | border-width: 10px; 125 | margin-left: -10px; 126 | } 127 | 128 | /* Tooltip content*/ 129 | 130 | .tooltip-content img { 131 | position: relative; 132 | height: 170px; 133 | display: block; 134 | float: left; 135 | margin-right: 1em; 136 | } 137 | 138 | .tooltip-text { 139 | font-size: 0.68em; 140 | line-height: 1.35; 141 | display: block; 142 | padding: 1.31em 1.21em 1.21em 0; 143 | color: #fff; 144 | } 145 | 146 | .tooltip-effect-5 .tooltip-text { 147 | padding: 1.4em; 148 | } 149 | 150 | .tooltip-text a { 151 | font-weight: bold; 152 | } 153 | -------------------------------------------------------------------------------- /css/tooltip-comic.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Bangers); 2 | 3 | .tooltip { 4 | position: relative; 5 | width: 210px; 6 | margin: 0 auto; 7 | font-family: 'Bangers', cursive; 8 | } 9 | 10 | .tooltip-content { 11 | position: absolute; 12 | line-height: 1.2; 13 | pointer-events: none; 14 | text-align: center; 15 | z-index: 100; 16 | opacity: 0; 17 | padding: 1.75em; 18 | font-size: 1.05em; 19 | bottom: 100%; 20 | } 21 | 22 | .tooltip-effect-1 .tooltip-content { 23 | width: 180px; 24 | right: 83%; 25 | margin: 0 0 20px 0; 26 | -webkit-transform: scale3d(0,0,1); 27 | transform: scale3d(0,0,1); 28 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 29 | transition: opacity 0.3s, transform 0.3s; 30 | } 31 | 32 | .tooltip-effect-2 .tooltip-content { 33 | width: 220px; 34 | left: 50%; 35 | margin: 0 0 40px -110px; 36 | -webkit-transform: translate3d(0,-10px,0); 37 | transform: translate3d(0,-10px,0); 38 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 39 | transition: opacity 0.3s, transform 0.3s; 40 | } 41 | 42 | .tooltip-effect-1:hover .tooltip-content { 43 | opacity: 1; 44 | -webkit-transform: scale3d(1,1,1); 45 | transform: scale3d(1,1,1); 46 | -webkit-transition-delay: 0.15s; 47 | transition-delay: 0.15s; 48 | } 49 | 50 | .tooltip-effect-2:hover .tooltip-content { 51 | opacity: 1; 52 | -webkit-transform: translate3d(0,0,0); 53 | transform: translate3d(0,0,0); 54 | -webkit-transition-delay: 0.2s; 55 | transition-delay: 0.2s; 56 | } 57 | 58 | /* Shape */ 59 | .tooltip-shape { 60 | position: absolute; 61 | width: 220px; 62 | height: 165px; 63 | pointer-events: none; 64 | } 65 | 66 | .tooltip-effect-1 .tooltip-shape { 67 | top: 0; 68 | right: 65%; 69 | -webkit-transform: translate3d(0,-90%,0); 70 | transform: translate3d(0,-90%,0); 71 | } 72 | 73 | .tooltip-effect-2 .tooltip-shape { 74 | bottom: 100%; 75 | left: 50%; 76 | margin: 0 0 0 -110px; 77 | } 78 | 79 | .tooltip:hover .tooltip-shape { 80 | pointer-events: auto; 81 | } 82 | 83 | .tooltip-shape svg { 84 | stroke: #e74c3c; 85 | stroke-width: 2; 86 | } 87 | 88 | .tooltip-effect-1 .tooltip-shape svg path { 89 | fill: #fff; 90 | opacity: 0; 91 | -webkit-transform: scale3d(0,0,1); 92 | transform: scale3d(0,0,1); 93 | -webkit-transform-origin: 50% 50%; 94 | transform-origin: 50% 50%; 95 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 96 | transition: opacity 0.3s, transform 0.3s; 97 | } 98 | 99 | .tooltip-effect-1:hover .tooltip-shape svg path { 100 | opacity: 1; 101 | -webkit-transform: scale3d(1,1,1); 102 | transform: scale3d(1,1,1); 103 | } 104 | 105 | .tooltip-effect-1:hover .tooltip-shape svg path#path2 { 106 | -webkit-transition-delay: 0.07s; 107 | transition-delay: 0.07s; 108 | } 109 | 110 | .tooltip-effect-1:hover .tooltip-shape svg path#path3 { 111 | -webkit-transition-delay: 0.14s; 112 | transition-delay: 0.14s; 113 | } 114 | 115 | .tooltip-effect-1:hover .tooltip-shape svg path#path4 { 116 | -webkit-transition-delay: 0.21s; 117 | transition-delay: 0.21s; 118 | } 119 | 120 | .tooltip-effect-2 .tooltip-shape svg polygon { 121 | fill: transparent; 122 | stroke-dasharray: 580; 123 | stroke-dashoffset: 580; 124 | } 125 | 126 | .tooltip-effect-2:hover .tooltip-shape svg polygon { 127 | stroke-dashoffset: 0; 128 | fill: #fff; 129 | -webkit-transition: stroke-dashoffset 0.8s, fill 0.8s; 130 | transition: stroke-dashoffset 0.8s, fill 0.8s; 131 | } -------------------------------------------------------------------------------- /css/tooltip-curved.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Gochi+Hand); 2 | .tooltip { 3 | position: absolute; 4 | z-index: 999; 5 | width: 2.2em; 6 | height: 2.2em; 7 | cursor: pointer; 8 | } 9 | 10 | /* Trigger item */ 11 | 12 | .tooltip-item { 13 | width: 30px; 14 | height: 30px; 15 | left: 50%; 16 | top: 50%; 17 | margin: -15px 0 0 -15px; 18 | position: absolute; 19 | border-radius: 50%; 20 | border: 2px solid #e35583; 21 | -webkit-animation: pulse 0.6s infinite alternate; 22 | animation: pulse 0.6s infinite alternate; 23 | } 24 | 25 | @-webkit-keyframes pulse { 26 | from { -webkit-transform: scale3d(0.5,0.5,1); } 27 | to { -webkit-transform: scale3d(1,1,1); } 28 | } 29 | 30 | @keyframes pulse { 31 | from { -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); } 32 | to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } 33 | } 34 | 35 | .tooltip:hover .tooltip-item { 36 | border-color: #fff; 37 | } 38 | 39 | .tooltip:first-child { 40 | top: 20%; 41 | left: 20%; 42 | } 43 | 44 | .tooltip:nth-child(2) { 45 | top: 50%; 46 | left: 10%; 47 | } 48 | 49 | .tooltip:nth-child(3) { 50 | top: 40%; 51 | left: 50%; 52 | } 53 | 54 | .tooltip:nth-child(4) { 55 | top: 70%; 56 | left: 70%; 57 | } 58 | 59 | /* Tooltip */ 60 | 61 | .tooltip-content { 62 | position: absolute; 63 | background: #e35583; 64 | z-index: 9999; 65 | width: 200px; 66 | bottom: 50%; 67 | margin-bottom: -1em; 68 | padding: 20px; 69 | border-radius: 20px; 70 | font-size: 1.1em; 71 | text-align: center; 72 | color: #fff; 73 | opacity: 0; 74 | cursor: default; 75 | pointer-events: none; 76 | font-family: 'Gochi Hand', cursive; 77 | -webkit-font-smoothing: antialiased; 78 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 79 | transition: opacity 0.3s, transform 0.3s; 80 | } 81 | 82 | .tooltip-west .tooltip-content { 83 | left: 4em; 84 | -webkit-transform-origin: -2em 50%; 85 | transform-origin: -2em 50%; 86 | -webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg); 87 | transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg); 88 | } 89 | 90 | .tooltip-east .tooltip-content { 91 | right: 4em; 92 | -webkit-transform-origin: calc(100% + 2em) 50%; 93 | transform-origin: calc(100% + 2em) 50%; 94 | -webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg); 95 | transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg); 96 | } 97 | 98 | .tooltip:hover .tooltip-content { 99 | opacity: 1; 100 | -webkit-transform: translate3d(0,50%,0) rotate3d(0,0,0,0); 101 | transform: translate3d(0,50%,0) rotate3d(0,0,0,0); 102 | pointer-events: auto; 103 | } 104 | 105 | /* Gap "bridge" and arrow */ 106 | 107 | .tooltip-content::before, 108 | .tooltip-content::after { 109 | content: ''; 110 | position: absolute; 111 | } 112 | 113 | .tooltip-content::before { 114 | height: 100%; 115 | width: 3em; 116 | } 117 | 118 | .tooltip-content::after { 119 | width: 2em; 120 | height: 2em; 121 | top: 50%; 122 | margin: -1em 0 0; 123 | background: url(../img/tooltip2.svg) no-repeat center center; 124 | background-size: 100%; 125 | } 126 | 127 | .tooltip-west .tooltip-content::before, 128 | .tooltip-west .tooltip-content::after { 129 | right: 99%; /* because of FF, otherwise we have a gap */ 130 | } 131 | 132 | .tooltip-east .tooltip-content::before, 133 | .tooltip-east .tooltip-content::after { 134 | left: 99%; /* because of FF, otherwise we have a gap */ 135 | } 136 | 137 | .tooltip-east .tooltip-content::after { 138 | -webkit-transform: scale3d(-1,1,1); 139 | transform: scale3d(-1,1,1); 140 | } -------------------------------------------------------------------------------- /css/tooltip-flip.css: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | display: inline; 3 | position: relative; 4 | z-index: 999; 5 | } 6 | 7 | /* Gap filler */ 8 | .tooltip::after { 9 | content: ''; 10 | position: absolute; 11 | width: 100%; 12 | height: 20px; 13 | bottom: 100%; 14 | pointer-events: none; 15 | left: 50%; 16 | -webkit-transform: translateX(-50%); 17 | transform: translateX(-50%); 18 | } 19 | 20 | .tooltip:hover::after { 21 | pointer-events: auto; 22 | } 23 | 24 | /* Tooltip */ 25 | 26 | .tooltip-content { 27 | position: absolute; 28 | z-index: 9999; 29 | width: 160px; 30 | height: 80px; 31 | left: 50%; 32 | margin-left: -80px; 33 | bottom: 100%; 34 | text-align: center; 35 | color: #fff; 36 | opacity: 0; 37 | margin-bottom: 20px; 38 | cursor: default; 39 | pointer-events: none; 40 | -webkit-backface-visibility: hidden; 41 | backface-visibility: hidden; 42 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 43 | transition: opacity 0.3s, transform 0.3s; 44 | } 45 | 46 | .tooltip-effect-1 .tooltip-content { 47 | -webkit-transform: translate3d(0,10px,0); 48 | transform: translate3d(0,10px,0); 49 | } 50 | 51 | .tooltip-effect-2 .tooltip-content { 52 | -webkit-transform: translate3d(0,-10px,0); 53 | transform: translate3d(0,-10px,0); 54 | } 55 | 56 | .tooltip-effect-3 .tooltip-content { 57 | -webkit-transform: translate3d(0,10px,0) rotate3d(0,0,1,5deg); 58 | transform: translate3d(0,10px,0) rotate3d(0,0,1,5deg); 59 | } 60 | 61 | .tooltip:hover .tooltip-content { 62 | opacity: 1; 63 | pointer-events: auto; 64 | -webkit-transform: translate3d(0,0,0); 65 | transform: translate3d(0,0,0); 66 | } 67 | 68 | .tooltip-content > span { 69 | float: left; 70 | width: 50%; 71 | height: 100%; 72 | position: relative; 73 | -webkit-backface-visibility: hidden; 74 | backface-visibility: hidden; 75 | -webkit-transition: -webkit-transform 0.3s; 76 | transition: transform 0.3s; 77 | } 78 | 79 | .tooltip-content > span img { 80 | display: block; 81 | max-width: 60px; 82 | margin: 10px; 83 | } 84 | 85 | .tooltip-front { 86 | background: #f0f0f0; 87 | -webkit-transform-origin: 100% 50%; 88 | transform-origin: 100% 50%; 89 | -webkit-transform: perspective(1000px) rotate3d(0,1,0,-90deg); 90 | transform: perspective(1000px) rotate3d(0,1,0,-90deg); 91 | } 92 | 93 | .tooltip-back { 94 | background: #e64b50; 95 | font-size: 0.5em; 96 | padding: 2.2em 1em 0; 97 | -webkit-transform-origin: 0% 50%; 98 | transform-origin: 0% 50%; 99 | -webkit-transform: perspective(1000px) rotate3d(0,1,0,90deg); 100 | transform: perspective(1000px) rotate3d(0,1,0,90deg); 101 | } 102 | 103 | .tooltip:hover .tooltip-content > span { 104 | -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg); 105 | transform: perspective(1000px) rotate3d(0,1,0,0deg); 106 | } 107 | 108 | /* Arrow */ 109 | .tooltip-content .tooltip-front::after, 110 | .tooltip-content .tooltip-back::after { 111 | content: ''; 112 | position: absolute; 113 | top: 100%; 114 | width: 0; 115 | height: 0; 116 | } 117 | 118 | .tooltip-content .tooltip-front::after { 119 | right: 0; 120 | border-top: 10px solid #f0f0f0; 121 | border-left: 10px solid transparent; 122 | } 123 | 124 | .tooltip-content .tooltip-back::after { 125 | left: 0; 126 | border-top: 10px solid #e64b50; 127 | border-right: 10px solid transparent; 128 | } -------------------------------------------------------------------------------- /css/tooltip-line.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Satisfy); 2 | .tooltip { 3 | display: inline; 4 | position: relative; 5 | z-index: 999; 6 | } 7 | 8 | /* Gap filler */ 9 | .tooltip::after { 10 | content: ''; 11 | position: absolute; 12 | width: 100%; 13 | height: 20px; 14 | bottom: 100%; 15 | left: 50%; 16 | pointer-events: none; 17 | -webkit-transform: translateX(-50%); 18 | transform: translateX(-50%); 19 | } 20 | 21 | .tooltip:hover::after { 22 | pointer-events: auto; 23 | } 24 | 25 | /* Tooltip */ 26 | 27 | .tooltip-content { 28 | position: absolute; 29 | z-index: 9999; 30 | width: 300px; 31 | left: 50%; 32 | bottom: 100%; 33 | font-size: 20px; 34 | line-height: 1.4; 35 | text-align: center; 36 | font-weight: 400; 37 | color: #fffaf0; 38 | background: transparent; 39 | opacity: 0; 40 | margin: 0 0 20px -150px; 41 | cursor: default; 42 | pointer-events: none; 43 | font-family: 'Satisfy', cursive; 44 | -webkit-font-smoothing: antialiased; 45 | -webkit-transition: opacity 0.3s 0.3s; 46 | transition: opacity 0.3s 0.3s; 47 | } 48 | 49 | .tooltip:hover .tooltip-content { 50 | opacity: 1; 51 | pointer-events: auto; 52 | -webkit-transition-delay: 0s; 53 | transition-delay: 0s; 54 | } 55 | 56 | .tooltip-content span { 57 | display: block; 58 | } 59 | 60 | .tooltip-text { 61 | border-bottom: 10px solid #fffaf0; 62 | overflow: hidden; 63 | -webkit-transform: scale3d(0,1,1); 64 | transform: scale3d(0,1,1); 65 | -webkit-transition: -webkit-transform 0.3s 0.3s; 66 | transition: transform 0.3s 0.3s; 67 | } 68 | 69 | .tooltip:hover .tooltip-text { 70 | -webkit-transition-delay: 0s; 71 | transition-delay: 0s; 72 | -webkit-transform: scale3d(1,1,1); 73 | transform: scale3d(1,1,1); 74 | } 75 | 76 | .tooltip-inner { 77 | background: rgba(85,61,61,0.95); 78 | padding: 40px; 79 | -webkit-transform: translate3d(0,100%,0); 80 | transform: translate3d(0,100%,0); 81 | webkit-transition: -webkit-transform 0.3s; 82 | transition: transform 0.3s; 83 | } 84 | 85 | .tooltip:hover .tooltip-inner { 86 | -webkit-transition-delay: 0.3s; 87 | transition-delay: 0.3s; 88 | -webkit-transform: translate3d(0,0,0); 89 | transform: translate3d(0,0,0); 90 | } 91 | 92 | /* Arrow */ 93 | 94 | .tooltip-content::after { 95 | content: ''; 96 | bottom: -20px; 97 | left: 50%; 98 | border: solid transparent; 99 | height: 0; 100 | width: 0; 101 | position: absolute; 102 | pointer-events: none; 103 | border-color: transparent; 104 | border-top-color: #fffaf0; 105 | border-width: 10px; 106 | margin-left: -10px; 107 | } -------------------------------------------------------------------------------- /css/tooltip-round.css: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | display: inline; 3 | position: relative; 4 | z-index: 999; 5 | } 6 | 7 | /* Tooltip */ 8 | 9 | .tooltip-content { 10 | position: absolute; 11 | z-index: 9999; 12 | width: 80px; 13 | height: 80px; 14 | padding-top: 25px; 15 | left: 50%; 16 | margin-left: -40px; 17 | bottom: 100%; 18 | border-radius: 50%; 19 | text-align: center; 20 | background: #fff; 21 | color: #47c9af; 22 | opacity: 0; 23 | margin-bottom: 20px; 24 | cursor: default; 25 | pointer-events: none; 26 | } 27 | 28 | .tooltip-content i { 29 | opacity: 0; 30 | } 31 | 32 | .tooltip:hover .tooltip-content, 33 | .tooltip:hover .tooltip-content i { 34 | opacity: 1; 35 | } 36 | 37 | .tooltip-effect-1 .tooltip-content { 38 | -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); 39 | transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); 40 | -webkit-transform-origin: 50% 100%; 41 | transform-origin: 50% 100%; 42 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 43 | transition: opacity 0.3s, transform 0.3s; 44 | } 45 | 46 | .tooltip-effect-1 .tooltip-content i { 47 | -webkit-transform: scale3d(0,0,1); 48 | transform: scale3d(0,0,1); 49 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 50 | transition: opacity 0.3s, transform 0.3s; 51 | } 52 | 53 | .tooltip-effect-2 .tooltip-content { 54 | -webkit-transform: translate3d(0,10px,0); 55 | transform: translate3d(0,10px,0); 56 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 57 | transition: opacity 0.3s, transform 0.3s; 58 | } 59 | 60 | .tooltip-effect-2 .tooltip-content i { 61 | -webkit-transform: translate3d(0,15px,0); 62 | transform: translate3d(0,15px,0); 63 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 64 | transition: opacity 0.3s, transform 0.3s; 65 | } 66 | 67 | .tooltip-effect-3 .tooltip-content { 68 | -webkit-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg); 69 | transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg); 70 | -webkit-transform-origin: 50% 100%; 71 | transform-origin: 50% 100%; 72 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 73 | transition: opacity 0.3s, transform 0.3s; 74 | } 75 | 76 | .tooltip-effect-3 .tooltip-content i { 77 | -webkit-transform: scale3d(0,0,1); 78 | transform: scale3d(0,0,1); 79 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 80 | transition: opacity 0.3s, transform 0.3s; 81 | } 82 | 83 | .tooltip-effect-4 .tooltip-content { 84 | -webkit-transform: translate3d(0,-20px,0); 85 | transform: translate3d(0,-20px,0); 86 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 87 | transition: opacity 0.3s, transform 0.3s; 88 | } 89 | 90 | .tooltip-effect-4 .tooltip-content i { 91 | -webkit-transform: translate3d(0,20px,0); 92 | transform: translate3d(0,20px,0); 93 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 94 | transition: opacity 0.3s, transform 0.3s; 95 | } 96 | 97 | .tooltip-effect-5 .tooltip-content { 98 | -webkit-transform: scale3d(0,0,1); 99 | transform: scale3d(0,0,1); 100 | -webkit-transform-origin: 50% 100%; 101 | transform-origin: 50% 100%; 102 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 103 | transition: opacity 0.3s, transform 0.3s; 104 | } 105 | 106 | .tooltip-effect-5 .tooltip-content i { 107 | -webkit-transform: translate3d(0,20px,0); 108 | transform: translate3d(0,20px,0); 109 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 110 | transition: opacity 0.3s, transform 0.3s; 111 | } 112 | 113 | .tooltip:hover .tooltip-content, 114 | .tooltip:hover .tooltip-content i { 115 | pointer-events: auto; 116 | -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); 117 | transform: translate3d(0,0,0) scale3d(1,1,1); 118 | } 119 | 120 | .tooltip-effect-1:hover .tooltip-content i { 121 | -webkit-transform: rotate3d(1,1,1,0); 122 | transform: rotate3d(1,1,1,0); 123 | } 124 | 125 | /* Arrow */ 126 | 127 | .tooltip-content::after { 128 | content: ''; 129 | position: absolute; 130 | top: 100%; 131 | left: 50%; 132 | margin: -7px 0 0 -15px; 133 | width: 30px; 134 | height: 20px; 135 | background: url(../img/tooltip1.svg) no-repeat center center; 136 | background-size: 100%; 137 | 138 | } -------------------------------------------------------------------------------- /css/tooltip-sharp.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Kalam:700,400); 2 | .tooltip { 3 | position: relative; 4 | z-index: 999; 5 | } 6 | 7 | /* Trigger text */ 8 | 9 | .tooltip-item { 10 | font-weight: bold; 11 | cursor: pointer; 12 | } 13 | 14 | .tooltip-content { 15 | position: absolute; 16 | font-size: 16px; 17 | background: #fff; 18 | z-index: 9999; 19 | width: 280px; 20 | bottom: 100%; 21 | left: 50%; 22 | margin: 0 0 105px -140px; 23 | padding: 25px; 24 | text-align: left; 25 | border-radius: 10px/50%; 26 | color: #dd5864; 27 | opacity: 0; 28 | cursor: default; 29 | pointer-events: none; 30 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 31 | transition: opacity 0.3s, transform 0.3s; 32 | } 33 | 34 | .tooltip-turnright .tooltip-content { 35 | -webkit-transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg); 36 | transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg); 37 | } 38 | 39 | .tooltip-turnleft .tooltip-content { 40 | -webkit-transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg); 41 | transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg); 42 | } 43 | 44 | .tooltip:hover .tooltip-content { 45 | opacity: 1; 46 | pointer-events: auto; 47 | -webkit-transform: translate3d(0,0,0); 48 | transform: translate3d(0,0,0); 49 | } 50 | 51 | /* Arrow */ 52 | 53 | .tooltip-content::after { 54 | content: ''; 55 | position: absolute; 56 | width: 60px; 57 | height: 120px; 58 | top: 100%; 59 | background: url(../img/tooltip3.svg) no-repeat center center; 60 | background-size: 100%; 61 | -webkit-transform-origin: 50% 0; 62 | transform-origin: 50% 0; 63 | -webkit-transition: -webkit-transform 0.3s; 64 | transition: transform 0.3s; 65 | } 66 | 67 | .tooltip-turnright .tooltip-content::after { 68 | left: 25%; 69 | -webkit-transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0); 70 | transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0); 71 | } 72 | 73 | .tooltip-turnleft .tooltip-content::after { 74 | right: 25%; 75 | -webkit-transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0); 76 | transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0); 77 | } 78 | 79 | .tooltip-turnright:hover .tooltip-content::after { 80 | -webkit-transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0); 81 | transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0); 82 | } 83 | 84 | .tooltip-turnleft:hover .tooltip-content::after { 85 | -webkit-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0); 86 | transform: rotate3d(1,1,1,0) translate3d(0,-5px,0); 87 | } -------------------------------------------------------------------------------- /curved.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Curved 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 | 23 |
24 | Previous Demo 25 | Back to the Codrops Article 26 |
27 |
28 |
29 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

30 | 41 |
42 |
43 |
44 |
45 | 46 | Did you know that you can travel from A to B? 47 |
48 |
49 | 50 | There are train stations in almost every city! 51 |
52 |
53 | 54 | Staying home for the weekend again? Seriously? 55 |
56 |
57 | 58 | Life is really short, you know? Get out there! 59 |
60 |
61 |
62 |
63 |
64 | 65 | 76 | 77 | -------------------------------------------------------------------------------- /flip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Flip 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 | 23 |
24 | Previous Demo 25 | Back to the Codrops Article 26 |
27 |
28 |
29 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

30 | 41 |
42 | 70 | 71 | 72 | 83 |

Images from Random User Generator, copyrighted under a Creative Commons BY-NC-SA 2.0 license. These photos were hand picked from Greg Peverill-Conti's 1,000 faces project.

84 |
85 |
86 | 87 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"} -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /img/Euclid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/Euclid.png -------------------------------------------------------------------------------- /img/Quasar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/Quasar.png -------------------------------------------------------------------------------- /img/map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/map.jpg -------------------------------------------------------------------------------- /img/related/DotNavigationStyles-300x162.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/related/DotNavigationStyles-300x162.png -------------------------------------------------------------------------------- /img/related/NotificationStyles-300x162.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/related/NotificationStyles-300x162.png -------------------------------------------------------------------------------- /img/shape1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | -------------------------------------------------------------------------------- /img/shape2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /img/shape3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /img/tooltip1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /img/tooltip2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /img/tooltip3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /img/user1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/user1.png -------------------------------------------------------------------------------- /img/user2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/user2.png -------------------------------------------------------------------------------- /img/user3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/user3.png -------------------------------------------------------------------------------- /img/user4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TooltipStylesInspiration/0396ae3aa8092098947b642a62605f3f8a2b3a67/img/user4.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Classic 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 |
21 | 22 |
23 | Previous Demo 24 | Back to the Codrops Article 25 |
26 |
27 |
28 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

29 | 40 |
41 |
42 |

Tesseract, finite but unbounded take root and flourish, EuclidEuclid, also known as Euclid of Alexandria, was a Greek mathematician, often referred to as the "Father of Geometry". He was active in Alexandria during the reign of Ptolemy I. Wikipedia rogue laws of physics, star stuff harvesting star light, encyclopaedia galactica are creatures of the cosmos the only home we've ever known ship of the imagination prime number quasarQuasars are believed to be powered by accretion of material into supermassive black holes in the nuclei of distant galaxies, making these luminous versions of the general... Wikipedia courage of our questions.

43 |

Kindling the energy shown in Orion's sword, rich in heavy atoms shores of the cosmic ocean kindling the energy EuclidEuclid, also known as Euclid of Alexandria, was a Greek mathematician, often referred to as the "Father of Geometry". He was active in Alexandria during the reign of Ptolemy I. Wikipedia hidden in matter. Emerged into consciousness paroxysm of global death? Shores of the cosmic ocean. Globular star cluster a still more glorious dawn awaits. Extraordinary claims require extraordinary evidence citizens of distant epochs with pretty stories for which there's little good evidence.

44 |

Prime number quasarQuasars are believed to be powered by accretion of material into supermassive black holes in the nuclei of distant galaxies, making these luminous versions of the general... Wikipedia courage of our questions kindling the energy EuclidEuclid, also known as Euclid of Alexandria, was a Greek mathematician, often referred to as the "Father of Geometry". He was active in Alexandria during the reign of Ptolemy I. Wikipedia shown in Orion's sword. Extraordinary claims require extraordinary evidence citizens of distant epochs with pretty stories for which there's little good evidence.

45 |

Image credit Quasar HE 1104-1805 by NASA, ESA and J.A. Muñoz (University of Valencia)

46 |
47 | 48 | 59 |
60 |
61 | 62 | -------------------------------------------------------------------------------- /line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Flag 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 | 23 |
24 | Previous Demo 25 | Back to the Codrops Article 26 |
27 |
28 |
29 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

30 | 41 |
42 | 49 | 50 | 61 |
62 |
63 | 64 | -------------------------------------------------------------------------------- /round.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Round 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 | 23 |
24 | Previous Demo 25 | Back to the Codrops Article 26 |
27 |
28 |
29 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

30 | 41 |
42 |
43 | 50 |
51 | 52 | 63 |
64 |
65 | 66 | -------------------------------------------------------------------------------- /sharp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip Styles Inspiration | Sharp 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 | 23 |
24 | Previous Demo 25 | Back to the Codrops Article 26 |
27 |
28 |
29 |

Tooltip Styles Shape & effect inspiration for the modern hover tooltip

30 | 41 |
42 |
43 |
44 |

A man of my spiritual[spir·it·u·al] affecting the human spirit or soul as opposed to material or physical things intensity does not eat corpses[corpse] dead body, body, carcass, skeleton, remains, mortal remains, rotten bacon.

45 |
George Bernard ShawGeorge Bernard Shaw (26 July 1856 – 2 November 1950) was an Irish playwright and a co-founder of the London School of Economics.
46 |
47 |
48 | 49 | 60 |
61 |
62 | 63 | --------------------------------------------------------------------------------