├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── Icon ├── bower.json ├── demo ├── css │ ├── demo.css │ ├── demo.less │ ├── demo.min.css │ └── simpletooltip.min.css ├── fonts │ ├── brushscriptstd-webfont.eot │ ├── brushscriptstd-webfont.svg │ ├── brushscriptstd-webfont.ttf │ └── brushscriptstd-webfont.woff ├── images │ ├── box-design.png │ ├── download-background.png │ ├── github-logo.png │ ├── github-mark.png │ ├── jquery-logo.png │ ├── jquery-mark.png │ ├── jquery.png │ ├── landmarkup-icon.png │ ├── simpletooltip-logo-small.png │ ├── simpletooltip-logo.png │ ├── themesample-darkgray.png │ ├── themesample-lightgray.png │ ├── themesample-pastelblue.png │ └── themesample-seablue.png ├── index.html └── js │ ├── affix.min.js │ ├── jquery.min.js │ ├── modernizr.simpletooltip.min.js │ ├── scrollspy.min.js │ └── simpletooltip.min.js ├── dist ├── css │ ├── simpletooltip.css │ └── simpletooltip.min.css └── js │ ├── simpletooltip.js │ └── simpletooltip.min.js ├── package.json ├── readme.md ├── simple-tooltip.jquery.json └── src ├── css └── simpletooltip.less └── js └── simpletooltip.js /.gitignore: -------------------------------------------------------------------------------- 1 | # osx noise 2 | .DS_Store 3 | profile 4 | icons 5 | Icon 6 | 7 | # svn & cvs 8 | .svn 9 | CV 10 | 11 | # Extra noise 12 | .settings/* 13 | .buildpath 14 | .project 15 | nbproject 16 | deploy.sh 17 | *.psd 18 | 19 | # node 20 | /node_modules 21 | /bower_components -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "camelcase": false, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "immed": false, 6 | "indent": 4, 7 | "latedef": true, 8 | "newcap": true, 9 | "noarg": true, 10 | "undef": true, 11 | "eqnull": true, 12 | "sub": true, 13 | "boss": true, 14 | "node": true, 15 | "browser": true, 16 | "jquery": true, 17 | "globals": { 18 | "_": true, 19 | "$": true, 20 | "jQuery": true 21 | } 22 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | meta: { 6 | version: '<%= pkg.version %>', 7 | banner: 8 | '/**\n' + 9 | ' * <%= pkg.description %>\n' + 10 | ' * v<%= pkg.version %>\n' + 11 | ' *\n' + 12 | ' * <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>\n' + 13 | ' * Distributed under <%= pkg.license %> license\n' + 14 | ' *\n' + 15 | ' * <%= pkg.homepage %>\n' + 16 | ' */\n\n' 17 | }, 18 | less: { 19 | dev: { 20 | options: { 21 | cleancss: false 22 | }, 23 | files: { 24 | 'dist/css/simpletooltip.css': 'src/css/simpletooltip.less', 25 | 'demo/css/demo.css': 'demo/css/demo.less' 26 | } 27 | }, 28 | production: { 29 | options: { 30 | cleancss: true 31 | }, 32 | files: { 33 | 'dist/css/simpletooltip.min.css': 'src/css/simpletooltip.less', 34 | 'demo/css/simpletooltip.min.css': 'src/css/simpletooltip.less', 35 | 'demo/css/demo.min.css': 'demo/css/demo.less' 36 | } 37 | } 38 | }, 39 | jshint: { 40 | options: { 41 | jshintrc: '.jshintrc' 42 | }, 43 | files: ['Gruntfile.js', 'src/js/simpletooltip.js', 'test/**/*.js'] 44 | }, 45 | uglify: { 46 | options: { 47 | banner: '<%= meta.banner %>', 48 | }, 49 | bundle: { 50 | options: { 51 | beautify: true, 52 | compress: false 53 | }, 54 | files: { 55 | 'dist/js/simpletooltip.js': ['src/js/simpletooltip.js'], 56 | } 57 | }, 58 | min: { 59 | files: { 60 | 'dist/js/simpletooltip.min.js': ['src/js/simpletooltip.js'], 61 | 'demo/js/simpletooltip.min.js': ['src/js/simpletooltip.js'], 62 | 'demo/js/scrollspy.min.js': ['bower_components/bootstrap/js/scrollspy.js'], 63 | 'demo/js/affix.min.js': ['bower_components/bootstrap/js/affix.js'] 64 | } 65 | } 66 | }, 67 | watch: { 68 | gruntfile: { 69 | files: ['package.json', 'Gruntfile.js', 'src/js/simpletooltip.js'], 70 | tasks: ['jshint', 'uglify'] 71 | }, 72 | css: { 73 | files: ['src/css/*.less', 'demo/css/*.less'], 74 | tasks: ['less'] 75 | } 76 | } 77 | }); 78 | 79 | grunt.loadNpmTasks('grunt-contrib-less'); 80 | grunt.loadNpmTasks('grunt-contrib-jshint'); 81 | grunt.loadNpmTasks('grunt-contrib-uglify'); 82 | grunt.loadNpmTasks('grunt-contrib-watch'); 83 | 84 | grunt.registerTask('default', ['less', 'jshint', 'uglify', 'watch']); 85 | }; -------------------------------------------------------------------------------- /Icon : -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/Icon -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simpletooltip", 3 | "version": "1.3.0", 4 | "private": false, 5 | "ignore": [ 6 | "**/.*", 7 | "node_modules" 8 | ], 9 | "dependencies": { 10 | "clearless": "latest", 11 | "bootstrap": "~3.1.1", 12 | "lesshat": "~3.0.0", 13 | "jquery": "~1.11.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo/css/demo.css: -------------------------------------------------------------------------------- 1 | /* Custom Fonts: Brush Script Std Medium 2 | -------------------------------------------------------------- */ 3 | @font-face { 4 | font-family: 'BrushScriptStdMedium'; 5 | src: url('../fonts/brushscriptstd-webfont.eot'); 6 | src: url('../fonts/brushscriptstd-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/brushscriptstd-webfont.woff') format('woff'), url('../fonts/brushscriptstd-webfont.ttf') format('truetype'), url('../fonts/brushscriptstd-webfont.svg#webfont7NIqi73V') format('svg'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | /* Variables 11 | -------------------------------------------------------------- */ 12 | /* Libraries: CodeKit Framework imported from Clearless (https://github.com/clearleft/clearless) 13 | -------------------------------------------------------------- */ 14 | /* =Reset 15 | -------------------------------------------------------------- */ 16 | /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */ 17 | html, 18 | body, 19 | div, 20 | span, 21 | applet, 22 | object, 23 | iframe, 24 | h1, 25 | h2, 26 | h3, 27 | h4, 28 | h5, 29 | h6, 30 | p, 31 | blockquote, 32 | pre, 33 | a, 34 | abbr, 35 | acronym, 36 | address, 37 | big, 38 | cite, 39 | code, 40 | del, 41 | dfn, 42 | em, 43 | img, 44 | ins, 45 | kbd, 46 | q, 47 | s, 48 | samp, 49 | small, 50 | strike, 51 | strong, 52 | sub, 53 | sup, 54 | tt, 55 | var, 56 | b, 57 | u, 58 | i, 59 | center, 60 | dl, 61 | dt, 62 | dd, 63 | ol, 64 | ul, 65 | li, 66 | fieldset, 67 | form, 68 | label, 69 | legend, 70 | table, 71 | caption, 72 | tbody, 73 | tfoot, 74 | thead, 75 | tr, 76 | th, 77 | td, 78 | article, 79 | aside, 80 | canvas, 81 | details, 82 | embed, 83 | figure, 84 | figcaption, 85 | footer, 86 | header, 87 | hgroup, 88 | menu, 89 | nav, 90 | output, 91 | ruby, 92 | section, 93 | summary, 94 | time, 95 | mark, 96 | audio, 97 | video { 98 | margin: 0; 99 | padding: 0; 100 | border: 0; 101 | font-size: 100%; 102 | font: inherit; 103 | vertical-align: baseline; 104 | } 105 | article, 106 | aside, 107 | details, 108 | figcaption, 109 | figure, 110 | footer, 111 | header, 112 | hgroup, 113 | menu, 114 | nav, 115 | section { 116 | display: block; 117 | } 118 | body { 119 | line-height: 1; 120 | } 121 | ol, 122 | ul { 123 | list-style: none; 124 | } 125 | blockquote, 126 | q { 127 | quotes: none; 128 | } 129 | blockquote:before, 130 | blockquote:after, 131 | q:before, 132 | q:after { 133 | content: ''; 134 | content: none; 135 | } 136 | table { 137 | border-collapse: collapse; 138 | border-spacing: 0; 139 | } 140 | /* General Styles 141 | -------------------------------------------------------------- */ 142 | html { 143 | height: 100%; 144 | min-height: 100%; 145 | background: #bfc9d5; 146 | } 147 | body { 148 | height: auto; 149 | color: #555; 150 | font: italic 13px/1.2em Georgia, Times, Serif; 151 | background: #bfc9d5; 152 | background-color: #e5e9ee; 153 | background-repeat: repeat-x; 154 | background-image: -khtml-gradient(linear, left top, left bottom, from(#bfc9d5), to(#e5e9ee)); 155 | /* Konqueror */ 156 | background-image: -moz-linear-gradient(#bfc9d5, #e5e9ee); 157 | /* FF 3.6+ */ 158 | background-image: -ms-linear-gradient(#bfc9d5, #e5e9ee); 159 | /* IE10 */ 160 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfc9d5), color-stop(100%, #e5e9ee)); 161 | /* Safari 4+, Chrome 2+ */ 162 | background-image: -webkit-linear-gradient(#bfc9d5, #e5e9ee); 163 | /* Safari 5.1+, Chrome 10+ */ 164 | background-image: -o-linear-gradient(#bfc9d5, #e5e9ee); 165 | /* Opera 11.10 */ 166 | background-image: -ms-linear-gradient(top, #bfc9d5 0%, #e5e9ee 100%); 167 | /* IE10+ */ 168 | background-image: linear-gradient(#bfc9d5, #e5e9ee); 169 | /* the standard */ 170 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfc9d5', endColorstr='#e5e9ee', GradientType=0); 171 | /* IE6 & IE7 */ 172 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfc9d5', endColorstr='#e5e9ee', GradientType=0)"; 173 | /* IE8+ */ 174 | } 175 | h1, 176 | h2, 177 | h3, 178 | h4 { 179 | display: inline-block; 180 | font-family: BrushScriptStdMedium; 181 | font-style: normal; 182 | font-size: 3.8em; 183 | line-height: 1em; 184 | margin-bottom: 25px; 185 | text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.7); 186 | color: white; 187 | } 188 | @media only screen and (max-width: 480px) { 189 | h1, 190 | h2, 191 | h3, 192 | h4 { 193 | font-size: 3em; 194 | } 195 | } 196 | * { 197 | outline: none !important; 198 | } 199 | a:link, 200 | a:active, 201 | a:visited { 202 | color: #409100; 203 | } 204 | a:hover { 205 | color: #cc8400; 206 | } 207 | h2 a:link, 208 | h2 a:active, 209 | h2 a:hover, 210 | h2 a:visited { 211 | text-decoration: none; 212 | color: #6f9d31; 213 | } 214 | h3 { 215 | font: bolder 1.7em/1em Helvetica, Arial, sans-serif; 216 | text-shadow: none; 217 | color: #777; 218 | } 219 | p, 220 | li { 221 | margin-left: 0; 222 | margin-right: 0; 223 | font-size: 1.2em; 224 | line-height: 1.5em; 225 | } 226 | p, 227 | code, 228 | .example, 229 | .download { 230 | margin-bottom: 25px; 231 | } 232 | code, 233 | .example, 234 | .download { 235 | font-style: normal; 236 | font-family: 'Consolas', 'Lucida Console', 'Courier' !important; 237 | position: relative; 238 | display: block; 239 | padding: 20px; 240 | background-color: #dfdbc3; 241 | color: #6e614d; 242 | overflow: hidden; 243 | border: dashed 1px #88795f; 244 | -webkit-border-radius: 0.5em; 245 | -moz-border-radius: 0.5em; 246 | border-radius: 0.5em; 247 | } 248 | code { 249 | color: #6e614d; 250 | font-family: 'Consolas', 'Lucida Console', 'Courier' !important; 251 | text-shadow: none; 252 | } 253 | kdb { 254 | display: inline-block; 255 | font: normal 1em/1em 'Consolas', 'Lucida Console', 'Courier' !important; 256 | padding: 1px 4px; 257 | line-height: 1em; 258 | color: #6D7988; 259 | -webkit-border-radius: 4px; 260 | -moz-border-radius: 4px; 261 | border-radius: 4px; 262 | border: solid 1px #bbb; 263 | background-color: #E8F3F6; 264 | } 265 | p kdb { 266 | font-size: 13px !important; 267 | } 268 | .example { 269 | background-color: #E8F3F6; 270 | border-color: #8488a6; 271 | } 272 | .example p { 273 | margin: 0; 274 | margin-bottom: 25px; 275 | } 276 | .download { 277 | font: normal 1em/1.2em Georgia, Times, Serif !important; 278 | background-image: url(../images/download-background.png); 279 | } 280 | .download p { 281 | margin-bottom: 10px; 282 | } 283 | em { 284 | font-style: italic; 285 | color: #0085bc; 286 | } 287 | strong { 288 | font-weight: bold; 289 | font-style: italic; 290 | } 291 | /*------------ buttons --------------*/ 292 | .button, 293 | .button:link { 294 | display: inline-block; 295 | zoom: 1; 296 | /* zoom and *display = ie7 hack for display:inline-block */ 297 | *display: inline; 298 | vertical-align: baseline; 299 | margin: 0 2px; 300 | margin-bottom: 10px; 301 | outline: none; 302 | cursor: pointer; 303 | text-align: center; 304 | text-decoration: none; 305 | font: 2.2em/0.3em BrushScriptStdMedium, Helvetica, Arial, sans-serif; 306 | padding: .5em 2em .55em; 307 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); 308 | -webkit-border-radius: 0.3em; 309 | -moz-border-radius: 0.3em; 310 | border-radius: 0.3em; 311 | } 312 | .button:hover { 313 | text-decoration: none; 314 | } 315 | .button:active { 316 | position: relative; 317 | top: 1px; 318 | } 319 | a.button:link, 320 | a.button:active, 321 | a.button:visited { 322 | color: white; 323 | } 324 | /* blue */ 325 | .blue, 326 | .blue:visited { 327 | border: solid 1px #4E9AB9; 328 | background: #53AFD6; 329 | } 330 | .blue:hover { 331 | background: #509FC0; 332 | } 333 | .blue:active { 334 | color: white; 335 | } 336 | /* green */ 337 | .green, 338 | .green:visited { 339 | border: solid 1px #7EA15D; 340 | background: #8AB065; 341 | } 342 | .green:hover { 343 | background: #7E9F5F; 344 | } 345 | .green:active { 346 | color: white; 347 | } 348 | /* Structure Styles 349 | -------------------------------------------------------------- */ 350 | #header { 351 | height: 150px; 352 | background-color: #6d7988; 353 | color: #eaeaea; 354 | margin-bottom: 40px; 355 | } 356 | .wrapper, 357 | #content { 358 | width: 80%; 359 | max-width: 960px; 360 | margin: 0 auto; 361 | height: 200px; 362 | } 363 | #header h1 { 364 | display: inline-block; 365 | margin-top: 60px; 366 | padding-right: 5px; 367 | padding-left: 90px; 368 | font-size: 4.2em; 369 | color: #e8f3f6; 370 | line-height: 1.5em; 371 | text-shadow: 1px 3px 1px rgba(0, 0, 0, 0.2); 372 | background: url(../images/simpletooltip-logo.png) no-repeat 0 10px; 373 | } 374 | @media only screen and (max-width: 480px) { 375 | #header h1 { 376 | font-size: 3.5em; 377 | line-height: 1.8em; 378 | } 379 | } 380 | #header a.social { 381 | display: block; 382 | width: auto; 383 | height: auto; 384 | overflow: hidden; 385 | float: right; 386 | margin: 85px 0 0 15px; 387 | } 388 | @media only screen and (max-width: 680px) { 389 | #header a.social { 390 | display: none; 391 | } 392 | } 393 | #content { 394 | position: relative; 395 | height: auto; 396 | overflow: auto; 397 | } 398 | #downloadpanel { 399 | position: absolute; 400 | top: 10px; 401 | right: 3px; 402 | width: 210px; 403 | height: auto; 404 | padding: 20px; 405 | -webkit-border-radius: .6em; 406 | -moz-border-radius: .6em; 407 | border-radius: .6em; 408 | background-color: rgba(232, 243, 246, 0.8); 409 | overflow: hidden; 410 | } 411 | @media only screen and (max-width: 768px) { 412 | #downloadpanel { 413 | display: none; 414 | } 415 | } 416 | #downloadpanel .button { 417 | padding: .5em 0px; 418 | width: 200px; 419 | } 420 | #downloadpanel p { 421 | color: #444; 422 | font: normal 1em/1.3em Helevetica, Arial, Sans-serif; 423 | margin: 5px; 424 | margin-bottom: 10px; 425 | text-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px; 426 | } 427 | #downloadpanel .button.blue { 428 | margin-bottom: 0; 429 | } 430 | /*------------- content -------------*/ 431 | #menu { 432 | position: absolute; 433 | top: 0; 434 | left: 0; 435 | right: 0; 436 | z-index: 50; 437 | background: #6d7988; 438 | overflow: hidden; 439 | height: 0 !important; 440 | } 441 | #menu.affix { 442 | position: fixed; 443 | display: block; 444 | height: 50px !important; 445 | } 446 | @media only screen and (max-width: 480px) { 447 | #menu { 448 | display: none !important; 449 | } 450 | } 451 | #menu .wrapper { 452 | height: 100%; 453 | } 454 | @media only screen and (max-width: 768px) { 455 | #menu .wrapper { 456 | width: 100%; 457 | } 458 | } 459 | #menu ul { 460 | position: relative; 461 | width: 100%; 462 | height: 100%; 463 | margin: 0; 464 | display: table; 465 | } 466 | #menu ul:before { 467 | content: ''; 468 | display: block; 469 | position: absolute; 470 | background: url('../images/simpletooltip-logo-small.png') no-repeat; 471 | width: 50px; 472 | height: 40px; 473 | top: 6px; 474 | left: -55px; 475 | } 476 | #menu ul li { 477 | display: table-cell; 478 | height: 100%; 479 | margin: 0; 480 | } 481 | #menu ul li a { 482 | height: 100%; 483 | text-align: center; 484 | color: #e8f3f6; 485 | text-decoration: none; 486 | font: normal 1.1em/2.8em Helvetica, Arial, Sans-serif; 487 | text-shadow: 0 0 1px rgba(0, 0, 0, 0.8); 488 | display: block; 489 | position: relative; 490 | width: auto; 491 | } 492 | #menu ul li a:hover { 493 | color: #70d5ff; 494 | } 495 | @media only screen and (max-width: 620px) { 496 | #menu ul li a { 497 | font-size: 0.9em; 498 | line-height: 3.3em; 499 | } 500 | } 501 | #menu ul li.active a { 502 | background-color: #56606c; 503 | } 504 | #menu ul li.active a:hover { 505 | color: #e8f3f6; 506 | } 507 | section { 508 | position: relative; 509 | overflow: hidden; 510 | margin-bottom: 40px; 511 | } 512 | .icon-markup h2 { 513 | display: block; 514 | } 515 | .icon-markup img { 516 | float: left; 517 | opacity: .5; 518 | margin: 0 10px 5px 0; 519 | } 520 | blockquote { 521 | color: #919191; 522 | text-shadow: none; 523 | float: right; 524 | width: 480px; 525 | font: italic bold 1.8em/1.3em Georgia, Times, Serif; 526 | } 527 | ul { 528 | margin: 0 20px; 529 | } 530 | ul li { 531 | list-style-position: inside; 532 | list-style-type: disc; 533 | } 534 | ol { 535 | margin-bottom: 30px; 536 | } 537 | ol li { 538 | margin-left: 25px; 539 | list-style-type: decimal; 540 | } 541 | #features h2 { 542 | float: left; 543 | } 544 | #features ul { 545 | color: #777; 546 | float: left; 547 | white-space: nowrap; 548 | clear: left; 549 | margin: 0 10px; 550 | font: bold 1.3em/1.35em Helvetica, Arial, Sans-serif; 551 | } 552 | #features ul li { 553 | list-style-type: none; 554 | line-height: 1em; 555 | margin-bottom: 9px; 556 | } 557 | #features ul li::before { 558 | content: "•"; 559 | margin-right: 8px; 560 | } 561 | @media only screen and (min-width: 768px) and (max-width: 950px) { 562 | #features ul { 563 | white-space: inherit; 564 | margin-right: 250px; 565 | } 566 | } 567 | p:last-child, 568 | * > p:last-child { 569 | margin-bottom: 0; 570 | } 571 | /*------------- tables -------------*/ 572 | .datasheet { 573 | width: 100%; 574 | font: normal 1em/1.8em Helvetica, Arial, Sans-serif; 575 | border-collapse: collapse; 576 | vertical-align: middle; 577 | border-spacing: 0; 578 | margin-bottom: 30px; 579 | } 580 | .datasheet strong { 581 | font-style: normal; 582 | } 583 | .datasheet th, 584 | .datasheet td { 585 | text-align: left; 586 | padding: 6px 8px; 587 | vertical-align: middle; 588 | border-left: solid 1px #bbb; 589 | } 590 | .datasheet th:first-child, 591 | .datasheet td:first-child { 592 | border-left: none; 593 | } 594 | .datasheet tr:last-child td { 595 | border-bottom: none; 596 | } 597 | .datasheet th.description, 598 | .datasheet td.description { 599 | width: 35%; 600 | } 601 | .datasheet th.values, 602 | .datasheet td.values { 603 | width: 55%; 604 | } 605 | .datasheet th { 606 | text-align: center; 607 | font: italic 14px/1.8em Georgia, Times, Serif; 608 | font-weight: bold; 609 | } 610 | .datasheet tbody tr:nth-child(odd) { 611 | background-color: rgba(255, 255, 255, 0.3); 612 | } 613 | /* -------- examples ------- */ 614 | .example.grid { 615 | padding-bottom: 0; 616 | } 617 | .example.grid > img, 618 | .example.grid > .small-area { 619 | margin-right: 20px; 620 | margin-bottom: 20px; 621 | } 622 | .example .small-area { 623 | float: left; 624 | width: 100px; 625 | height: 100px; 626 | font: bold 1em/8em Helvetica, Arial, Sans-serif; 627 | text-align: center; 628 | color: #6d7988; 629 | background: #fff; 630 | overflow: hidden; 631 | } 632 | .example .small-area.last-child, 633 | .example .small-area:last-child { 634 | margin-right: 0; 635 | } 636 | .example h1 { 637 | display: inline-block; 638 | font: bold 2em/1em Helvetica, Arial, Sans-serif; 639 | text-shadow: none; 640 | color: #666; 641 | margin: 0; 642 | } 643 | .example img { 644 | float: left; 645 | margin-right: 16px; 646 | } 647 | /* -------- footer ------- */ 648 | footer { 649 | height: auto; 650 | font: normal 1em/1.2em Helvetica, Arial, Sans-serif; 651 | color: white; 652 | background-color: #756e64; 653 | text-shadow: none; 654 | } 655 | footer .wrapper { 656 | height: auto; 657 | padding: 20px 0; 658 | padding-bottom: 40px; 659 | } 660 | footer section { 661 | position: relative; 662 | } 663 | footer section:last-child { 664 | margin-bottom: 0; 665 | } 666 | footer section .social { 667 | display: block; 668 | float: right; 669 | position: relative; 670 | clear: both; 671 | top: -5px; 672 | padding: .2em 2em .2em !important; 673 | margin-bottom: 15px !important; 674 | } 675 | footer section .social.github img { 676 | position: relative; 677 | top: -1px; 678 | } 679 | footer section .social.jquery img { 680 | position: relative; 681 | top: 2px; 682 | } 683 | @media only screen and (max-width: 680px) { 684 | footer section .social { 685 | float: none; 686 | display: inline-block; 687 | top: 0; 688 | margin-bottom: 30px !important; 689 | } 690 | } 691 | @media only screen and (max-width: 520px) { 692 | footer section .social { 693 | padding: .2em 1em .2em !important; 694 | } 695 | } 696 | @media only screen and (max-width: 680px) { 697 | footer section { 698 | text-align: center; 699 | } 700 | } 701 | footer a:link, 702 | footer a:active, 703 | footer a:visited { 704 | text-shadow: none; 705 | text-decoration: none; 706 | color: #56ceff; 707 | } 708 | footer a:hover { 709 | color: #ffb733; 710 | } 711 | footer h2 { 712 | width: 100%; 713 | font-size: 4.2em; 714 | line-height: 1.5em; 715 | margin-bottom: 15px; 716 | text-shadow: none; 717 | } 718 | footer h2 a:link, 719 | footer h2 a:active, 720 | footer h2 a:visited, 721 | footer h2 a:hover { 722 | color: #e8f3f6; 723 | text-shadow: 1px 3px 1px rgba(0, 0, 0, 0.2); 724 | } 725 | footer p { 726 | color: #e8f3f6; 727 | margin-bottom: 8px; 728 | } 729 | -------------------------------------------------------------------------------- /demo/css/demo.less: -------------------------------------------------------------------------------- 1 | 2 | /* Custom Fonts: Brush Script Std Medium 3 | -------------------------------------------------------------- */ 4 | @font-face { 5 | font-family: 'BrushScriptStdMedium'; 6 | src: url('../fonts/brushscriptstd-webfont.eot'); 7 | src: url('../fonts/brushscriptstd-webfont.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/brushscriptstd-webfont.woff') format('woff'), 9 | url('../fonts/brushscriptstd-webfont.ttf') format('truetype'), 10 | url('../fonts/brushscriptstd-webfont.svg#webfont7NIqi73V') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | 16 | /* Variables 17 | -------------------------------------------------------------- */ 18 | 19 | @title-color: #6f9d31; 20 | @link-color: darken(#4baa00, 5%); 21 | @code-text-color: #6e614d; 22 | @link-color-hover: darken(orange, 10%); 23 | 24 | @using-ieclasses: true; // whether or not the markup has html5-boilerplate style IE classes in it or not 25 | @using-modernizr: true; // whether or not modernizer feature-detection classes are being used 26 | @disable-filters: false; // whether or not to disable MS-specific 'filter' properties (can make IE slow!) 27 | 28 | 29 | /* Libraries: CodeKit Framework imported from Clearless (https://github.com/clearleft/clearless) 30 | -------------------------------------------------------------- */ 31 | 32 | @import "/bower_components/clearless/mixins/helpers.less"; 33 | @import "/bower_components/clearless/mixins/resets.less"; 34 | 35 | 36 | /* =Reset 37 | -------------------------------------------------------------- */ 38 | .reset(); 39 | 40 | 41 | /* General Styles 42 | -------------------------------------------------------------- */ 43 | 44 | html { 45 | height: 100%; 46 | min-height: 100%; 47 | background: #bfc9d5; 48 | } 49 | 50 | body { 51 | height: auto; 52 | color: #555; 53 | font: italic 13px/1.2em Georgia, Times, Serif; 54 | background: #bfc9d5; 55 | #gradient > .vertical(#bfc9d5, #e5e9ee); 56 | } 57 | 58 | h1,h2,h3,h4 { 59 | display: inline-block; 60 | font-family: BrushScriptStdMedium; 61 | font-style: normal; 62 | font-size: 3.8em; 63 | line-height: 1em; 64 | margin-bottom: 25px; 65 | text-shadow: -1px -1px 0 rgba(0, 0 , 0, 0.5), 66 | 1px 1px 0 rgba(255, 255, 255, 0.7); 67 | color: white; 68 | 69 | @media only screen and (max-width: 480px) { 70 | font-size: 3em; 71 | } 72 | } 73 | 74 | * { 75 | outline: none !important; 76 | } 77 | 78 | a { 79 | 80 | &:link, 81 | &:active, 82 | &:visited { 83 | color: @link-color; 84 | } 85 | 86 | &:hover { 87 | color: @link-color-hover; 88 | } 89 | } 90 | 91 | h2 { 92 | a:link, 93 | a:active, 94 | a:hover, 95 | a:visited { 96 | text-decoration: none; 97 | color: @title-color; 98 | } 99 | } 100 | 101 | h3 { 102 | font: bolder 1.7em/1em Helvetica, Arial, sans-serif; 103 | text-shadow: none; 104 | color: #777; 105 | } 106 | 107 | p, li { 108 | margin-left: 0; 109 | margin-right: 0; 110 | font-size: 1.2em; 111 | line-height: 1.5em; 112 | } 113 | 114 | p, 115 | code, 116 | .example, 117 | .download { 118 | margin-bottom: 25px; 119 | } 120 | 121 | code, 122 | .example, 123 | .download { 124 | font-style: normal; 125 | font-family: 'Consolas', 'Lucida Console', 'Courier' !important; 126 | position: relative; 127 | display: block; 128 | padding: 20px; 129 | background-color: #dfdbc3; 130 | color: #6e614d; 131 | overflow: hidden; 132 | border: dashed 1px #88795f; 133 | .border-radius(.5em); 134 | } 135 | 136 | code { 137 | color: @code-text-color; 138 | font-family: 'Consolas', 'Lucida Console', 'Courier' !important; 139 | text-shadow: none; 140 | } 141 | 142 | kdb { 143 | display: inline-block; 144 | font: normal 1em/1em 'Consolas', 'Lucida Console', 'Courier' !important; 145 | padding: 1px 4px; 146 | line-height: 1em; 147 | color: #6D7988; 148 | .border-radius(4px); 149 | border: solid 1px #bbb; 150 | background-color: #E8F3F6; 151 | 152 | p & { 153 | font-size: 13px !important; 154 | } 155 | } 156 | 157 | .example { 158 | background-color: #E8F3F6; 159 | border-color: #8488a6; 160 | 161 | p { 162 | margin: 0; 163 | margin-bottom: 25px; 164 | } 165 | } 166 | 167 | .download { 168 | font: normal 1em/1.2em Georgia, Times, Serif !important; 169 | background-image: url(../images/download-background.png); 170 | } 171 | 172 | .download p { 173 | margin-bottom: 10px; 174 | } 175 | 176 | em { 177 | font-style: italic; 178 | color: #0085bc; 179 | } 180 | 181 | strong { 182 | font-weight: bold; 183 | font-style: italic; 184 | } 185 | 186 | /*------------ buttons --------------*/ 187 | 188 | .button, 189 | .button:link { 190 | 191 | display: inline-block; 192 | zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 193 | *display: inline; 194 | vertical-align: baseline; 195 | margin: 0 2px; 196 | margin-bottom: 10px; 197 | outline: none; 198 | cursor: pointer; 199 | text-align: center; 200 | text-decoration: none; 201 | font: 2.2em/.3em BrushScriptStdMedium, Helvetica, Arial, sans-serif; 202 | padding: .5em 2em .55em; 203 | text-shadow: 0 1px 1px fadeout(black, 70%); 204 | .border-radius(.3em) 205 | } 206 | 207 | .button:hover { 208 | text-decoration: none; 209 | } 210 | 211 | .button:active { 212 | position: relative; 213 | top: 1px; 214 | } 215 | 216 | a.button { 217 | &:link, 218 | &:active, 219 | &:visited { 220 | color: white; 221 | } 222 | } 223 | 224 | 225 | /* blue */ 226 | 227 | 228 | .blue, 229 | .blue:visited { 230 | border: solid 1px #4E9AB9; 231 | background: #53AFD6; 232 | } 233 | .blue:hover { 234 | background: #509FC0; 235 | } 236 | .blue:active { 237 | color: white; 238 | } 239 | 240 | 241 | /* green */ 242 | 243 | .green, 244 | .green:visited { 245 | border: solid 1px #7EA15D; 246 | background: #8AB065; 247 | } 248 | .green:hover { 249 | background: #7E9F5F; 250 | } 251 | .green:active { 252 | color: white; 253 | } 254 | 255 | /* Structure Styles 256 | -------------------------------------------------------------- */ 257 | 258 | #header { 259 | height: 150px; 260 | background-color: #6d7988; 261 | color: #eaeaea; 262 | margin-bottom: 40px; 263 | } 264 | 265 | .wrapper, 266 | #content { 267 | width: 80%; 268 | max-width: 960px; 269 | margin: 0 auto; 270 | height: 200px; 271 | } 272 | 273 | #header h1 { 274 | display: inline-block; 275 | margin-top: 60px; 276 | padding-right: 5px; 277 | padding-left: 90px; 278 | font-size: 4.2em; 279 | color: #e8f3f6; 280 | line-height: 1.5em; 281 | text-shadow: 1px 3px 1px rgba(0,0,0,.2); 282 | background: url(../images/simpletooltip-logo.png) no-repeat 0 10px; 283 | 284 | @media only screen and (max-width: 480px) { 285 | font-size: 3.5em; 286 | line-height: 1.8em; 287 | } 288 | } 289 | 290 | #header a.social { 291 | display: block; 292 | width: auto; 293 | height: auto; 294 | overflow: hidden; 295 | float: right; 296 | margin: 85px 0 0 15px; 297 | 298 | @media only screen and (max-width: 680px) { 299 | display: none; 300 | } 301 | } 302 | 303 | #content { 304 | position: relative; 305 | height: auto; 306 | overflow: auto; 307 | } 308 | 309 | #downloadpanel { 310 | position: absolute; 311 | top: 10px; 312 | right: 3px; 313 | width: 210px; 314 | height: auto; 315 | padding: 20px; 316 | -webkit-border-radius: .6em; 317 | -moz-border-radius: .6em; 318 | border-radius: .6em; 319 | background-color: fadeout(#e8f3f6, 20%); 320 | overflow: hidden; 321 | 322 | @media only screen and (max-width: 768px) { 323 | display: none; 324 | } 325 | } 326 | 327 | #downloadpanel .button { 328 | padding: .5em 0px; 329 | width: 200px; 330 | } 331 | 332 | #downloadpanel p { 333 | color: #444; 334 | font: normal 1em/1.3em Helevetica, Arial, Sans-serif; 335 | margin: 5px; 336 | margin-bottom: 10px; 337 | 338 | text-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px; 339 | } 340 | 341 | #downloadpanel .button.blue { 342 | margin-bottom: 0; 343 | } 344 | 345 | /*------------- content -------------*/ 346 | 347 | #menu { 348 | position: absolute; 349 | top: 0; 350 | left: 0; 351 | right: 0; 352 | z-index: 50; 353 | background: #6d7988; 354 | overflow: hidden; 355 | height: 0 !important; 356 | 357 | 358 | &.affix { 359 | position: fixed; 360 | display: block; 361 | height: 50px !important; 362 | } 363 | 364 | @media only screen and (max-width: 480px) { 365 | display: none !important; 366 | } 367 | 368 | .wrapper { 369 | height: 100%; 370 | 371 | @media only screen and (max-width: 768px) { 372 | width: 100%; 373 | } 374 | } 375 | 376 | ul { 377 | position: relative; 378 | width: 100%; 379 | height: 100%; 380 | margin: 0; 381 | display: table; 382 | 383 | &:before { 384 | content: ''; 385 | display: block; 386 | position: absolute; 387 | background: url('../images/simpletooltip-logo-small.png') no-repeat; 388 | width: 50px; 389 | height: 40px; 390 | top: 6px; 391 | left: -55px; 392 | 393 | } 394 | 395 | li { 396 | display: table-cell; 397 | height: 100%; 398 | margin: 0; 399 | 400 | a { 401 | height: 100%; 402 | text-align: center; 403 | color: #e8f3f6; 404 | text-decoration: none; 405 | font: normal 1.1em/2.8em Helvetica, Arial, Sans-serif; 406 | text-shadow: 0 0 1px rgba(0, 0, 0, 0.8); 407 | display: block; 408 | position: relative; 409 | width: auto; 410 | 411 | &:hover { 412 | color: lighten(#0085bc, 35%); 413 | } 414 | 415 | @media only screen and (max-width: 620px) { 416 | font-size: 0.9em; 417 | line-height: 3.3em; 418 | } 419 | } 420 | 421 | &.active a { 422 | background-color: darken(#6d7988, 10%); 423 | 424 | &:hover { 425 | color: #e8f3f6; 426 | } 427 | } 428 | } 429 | } 430 | } 431 | 432 | section { 433 | position: relative; 434 | overflow: hidden; 435 | margin-bottom: 40px; 436 | } 437 | 438 | .icon-markup h2 { 439 | display: block; 440 | } 441 | 442 | .icon-markup img { 443 | float: left; 444 | opacity: .5; 445 | margin: 0 10px 5px 0; 446 | } 447 | 448 | blockquote { 449 | color: #919191; 450 | text-shadow: none; 451 | float: right; 452 | width: 480px; 453 | font: italic bold 1.8em/1.3em Georgia, Times, Serif; 454 | } 455 | 456 | ul { 457 | margin: 0 20px; 458 | } 459 | 460 | ul li { 461 | list-style-position: inside; 462 | list-style-type: disc; 463 | } 464 | 465 | ol { 466 | margin-bottom: 30px; 467 | } 468 | 469 | ol li { 470 | margin-left: 25px; 471 | list-style-type: decimal; 472 | } 473 | 474 | 475 | #features h2 { 476 | float: left; 477 | } 478 | 479 | #features ul { 480 | color: #777; 481 | float: left; 482 | white-space: nowrap; 483 | clear: left; 484 | margin: 0 10px; 485 | font: bold 1.3em/1.35em Helvetica, Arial, Sans-serif; 486 | 487 | li { 488 | list-style-type: none; 489 | line-height: 1em; 490 | margin-bottom: 9px; 491 | 492 | &::before { 493 | content: "•"; 494 | margin-right: 8px; 495 | } 496 | 497 | } 498 | 499 | @media only screen and (min-width: 768px) and (max-width: 950px) { 500 | white-space: inherit; 501 | margin-right: 250px; 502 | } 503 | } 504 | 505 | p:last-child, 506 | * > p:last-child { 507 | margin-bottom: 0; 508 | } 509 | 510 | 511 | /*------------- tables -------------*/ 512 | 513 | .datasheet { 514 | width: 100%; 515 | font: normal 1em/1.8em Helvetica, Arial, Sans-serif; 516 | border-collapse: collapse; 517 | vertical-align: middle; 518 | border-spacing: 0; 519 | margin-bottom: 30px; 520 | 521 | 522 | strong { 523 | font-style: normal; 524 | } 525 | 526 | th, 527 | td { 528 | text-align: left; 529 | padding: 6px 8px; 530 | vertical-align: middle; 531 | border-left: solid 1px #bbb; 532 | } 533 | 534 | th:first-child, 535 | td:first-child { 536 | border-left: none; 537 | } 538 | 539 | tr:last-child td { 540 | border-bottom: none; 541 | } 542 | 543 | th.description, 544 | td.description { 545 | width: 35%; 546 | } 547 | 548 | th.values, 549 | td.values { 550 | width: 55%; 551 | } 552 | 553 | th { 554 | text-align: center; 555 | font: italic 14px/1.8em Georgia, Times, Serif; 556 | font-weight: bold; 557 | } 558 | 559 | tbody tr:nth-child(odd) { 560 | background-color: fade(white, 30%); 561 | } 562 | } 563 | 564 | /* -------- examples ------- */ 565 | 566 | .example.grid { 567 | padding-bottom: 0; 568 | 569 | > img, 570 | > .small-area { 571 | margin-right: 20px; 572 | margin-bottom: 20px; 573 | } 574 | } 575 | 576 | .example .small-area { 577 | float: left; 578 | width: 100px; 579 | height: 100px; 580 | font: bold 1em/8em Helvetica, Arial, Sans-serif; 581 | text-align: center; 582 | color: #6d7988; 583 | background: #fff; 584 | overflow: hidden; 585 | } 586 | 587 | .example .small-area.last-child, 588 | .example .small-area:last-child { 589 | margin-right: 0; 590 | } 591 | 592 | .example h1 { 593 | display: inline-block; 594 | font: bold 2em/1em Helvetica, Arial, Sans-serif; 595 | text-shadow: none; 596 | color: #666; 597 | margin: 0; 598 | } 599 | .example img { 600 | float: left; 601 | margin-right: 16px; 602 | } 603 | 604 | /* -------- footer ------- */ 605 | 606 | footer { 607 | height: auto; 608 | 609 | font: normal 1em/1.2em Helvetica, Arial, Sans-serif; 610 | color: white; 611 | background-color: #756e64; 612 | text-shadow: none; 613 | 614 | .wrapper { 615 | height: auto; 616 | padding: 20px 0; 617 | padding-bottom: 40px; 618 | } 619 | 620 | section { 621 | 622 | position: relative; 623 | 624 | &:last-child { 625 | margin-bottom: 0; 626 | } 627 | 628 | .social { 629 | display: block; 630 | float: right; 631 | position: relative; 632 | clear: both; 633 | top: -5px; 634 | padding: .2em 2em .2em !important; 635 | margin-bottom: 15px !important; 636 | 637 | &.github img { 638 | position: relative; 639 | top: -1px; 640 | } 641 | 642 | &.jquery img { 643 | position: relative; 644 | top: 2px; 645 | } 646 | 647 | @media only screen and (max-width: 680px) { 648 | float: none; 649 | display: inline-block; 650 | top: 0; 651 | margin-bottom: 30px !important; 652 | } 653 | 654 | @media only screen and (max-width: 520px) { 655 | padding: .2em 1em .2em !important; 656 | } 657 | } 658 | 659 | @media only screen and (max-width: 680px) { 660 | text-align: center 661 | } 662 | } 663 | 664 | a { 665 | &:link, 666 | &:active, 667 | &:visited { 668 | text-shadow: none; 669 | text-decoration: none; 670 | color: lighten(#0085bc, 30%); 671 | } 672 | 673 | &:hover { 674 | color: lighten(orange, 10%); 675 | } 676 | } 677 | 678 | h2 { 679 | 680 | width: 100%; 681 | font-size: 4.2em; 682 | line-height: 1.5em; 683 | margin-bottom: 15px; 684 | text-shadow: none; 685 | 686 | a { 687 | &:link, 688 | &:active, 689 | &:visited, 690 | &:hover { 691 | color: #e8f3f6; 692 | text-shadow: 1px 3px 1px rgba(0,0,0,.2); 693 | } 694 | } 695 | } 696 | 697 | p { 698 | color: #e8f3f6; 699 | margin-bottom: 8px; 700 | } 701 | } 702 | 703 | -------------------------------------------------------------------------------- /demo/css/demo.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:BrushScriptStdMedium;src:url(../fonts/brushscriptstd-webfont.eot);src:url(../fonts/brushscriptstd-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/brushscriptstd-webfont.woff) format('woff'),url(../fonts/brushscriptstd-webfont.ttf) format('truetype'),url(../fonts/brushscriptstd-webfont.svg#webfont7NIqi73V) format('svg');font-weight:400;font-style:normal}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{height:100%;min-height:100%;background:#bfc9d5}body{height:auto;color:#555;font:italic 13px/1.2em Georgia,Times,Serif;background:#bfc9d5;background-color:#e5e9ee;background-repeat:repeat-x;background-image:-khtml-gradient(linear,left top,left bottom,from(#bfc9d5),to(#e5e9ee));background-image:-moz-linear-gradient(#bfc9d5,#e5e9ee);background-image:-ms-linear-gradient(#bfc9d5,#e5e9ee);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bfc9d5),color-stop(100%,#e5e9ee));background-image:-webkit-linear-gradient(#bfc9d5,#e5e9ee);background-image:-o-linear-gradient(#bfc9d5,#e5e9ee);background-image:-ms-linear-gradient(top,#bfc9d5 0,#e5e9ee 100%);background-image:linear-gradient(#bfc9d5,#e5e9ee);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfc9d5', endColorstr='#e5e9ee', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfc9d5', endColorstr='#e5e9ee', GradientType=0)"}h1,h2,h3,h4{display:inline-block;font-family:BrushScriptStdMedium;font-style:normal;font-size:3.8em;line-height:1em;margin-bottom:25px;text-shadow:-1px -1px 0 rgba(0,0,0,.5),1px 1px 0 rgba(255,255,255,.7);color:#fff}@media only screen and (max-width:480px){h1,h2,h3,h4{font-size:3em}}*{outline:0!important}a:link,a:active,a:visited{color:#409100}a:hover{color:#cc8400}h2 a:link,h2 a:active,h2 a:hover,h2 a:visited{text-decoration:none;color:#6f9d31}h3{font:bolder 1.7em/1em Helvetica,Arial,sans-serif;text-shadow:none;color:#777}p,li{margin-left:0;margin-right:0;font-size:1.2em;line-height:1.5em}p,code,.example,.download{margin-bottom:25px}code,.example,.download{font-style:normal;font-family:Consolas,'Lucida Console',Courier!important;position:relative;display:block;padding:20px;background-color:#dfdbc3;color:#6e614d;overflow:hidden;border:dashed 1px #88795f;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em}code{color:#6e614d;font-family:Consolas,'Lucida Console',Courier!important;text-shadow:none}kdb{display:inline-block;font:400 1em/1em Consolas,'Lucida Console',Courier!important;padding:1px 4px;line-height:1em;color:#6D7988;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:solid 1px #bbb;background-color:#E8F3F6}p kdb{font-size:13px!important}.example{background-color:#E8F3F6;border-color:#8488a6}.example p{margin:0;margin-bottom:25px}.download{font:400 1em/1.2em Georgia,Times,Serif!important;background-image:url(../images/download-background.png)}.download p{margin-bottom:10px}em{font-style:italic;color:#0085bc}strong{font-weight:700;font-style:italic}.button,.button:link{display:inline-block;zoom:1;*display:inline;vertical-align:baseline;margin:0 2px;margin-bottom:10px;outline:0;cursor:pointer;text-align:center;text-decoration:none;font:2.2em/0.3em BrushScriptStdMedium,Helvetica,Arial,sans-serif;padding:.5em 2em .55em;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em}.button:hover{text-decoration:none}.button:active{position:relative;top:1px}a.button:link,a.button:active,a.button:visited{color:#fff}.blue,.blue:visited{border:solid 1px #4E9AB9;background:#53AFD6}.blue:hover{background:#509FC0}.blue:active{color:#fff}.green,.green:visited{border:solid 1px #7EA15D;background:#8AB065}.green:hover{background:#7E9F5F}.green:active{color:#fff}#header{height:150px;background-color:#6d7988;color:#eaeaea;margin-bottom:40px}.wrapper,#content{width:80%;max-width:960px;margin:0 auto;height:200px}#header h1{display:inline-block;margin-top:60px;padding-right:5px;padding-left:90px;font-size:4.2em;color:#e8f3f6;line-height:1.5em;text-shadow:1px 3px 1px rgba(0,0,0,.2);background:url(../images/simpletooltip-logo.png) no-repeat 0 10px}@media only screen and (max-width:480px){#header h1{font-size:3.5em;line-height:1.8em}}#header a.social{display:block;width:auto;height:auto;overflow:hidden;float:right;margin:85px 0 0 15px}@media only screen and (max-width:680px){#header a.social{display:none}}#content{position:relative;height:auto;overflow:auto}#downloadpanel{position:absolute;top:10px;right:3px;width:210px;height:auto;padding:20px;-webkit-border-radius:.6em;-moz-border-radius:.6em;border-radius:.6em;background-color:rgba(232,243,246,.8);overflow:hidden}@media only screen and (max-width:768px){#downloadpanel{display:none}}#downloadpanel .button{padding:.5em 0;width:200px}#downloadpanel p{color:#444;font:400 1em/1.3em Helevetica,Arial,Sans-serif;margin:5px;margin-bottom:10px;text-shadow:rgba(255,255,255,.6)0 1px 0}#downloadpanel .button.blue{margin-bottom:0}#menu{position:absolute;top:0;left:0;right:0;z-index:50;background:#6d7988;overflow:hidden;height:0!important}#menu.affix{position:fixed;display:block;height:50px!important}@media only screen and (max-width:480px){#menu{display:none!important}}#menu .wrapper{height:100%}@media only screen and (max-width:768px){#menu .wrapper{width:100%}}#menu ul{position:relative;width:100%;height:100%;margin:0;display:table}#menu ul:before{content:'';display:block;position:absolute;background:url(../images/simpletooltip-logo-small.png) no-repeat;width:50px;height:40px;top:6px;left:-55px}#menu ul li{display:table-cell;height:100%;margin:0}#menu ul li a{height:100%;text-align:center;color:#e8f3f6;text-decoration:none;font:400 1.1em/2.8em Helvetica,Arial,Sans-serif;text-shadow:0 0 1px rgba(0,0,0,.8);display:block;position:relative;width:auto}#menu ul li a:hover{color:#70d5ff}@media only screen and (max-width:620px){#menu ul li a{font-size:.9em;line-height:3.3em}}#menu ul li.active a{background-color:#56606c}#menu ul li.active a:hover{color:#e8f3f6}section{position:relative;overflow:hidden;margin-bottom:40px}.icon-markup h2{display:block}.icon-markup img{float:left;opacity:.5;margin:0 10px 5px 0}blockquote{color:#919191;text-shadow:none;float:right;width:480px;font:italic bold 1.8em/1.3em Georgia,Times,Serif}ul{margin:0 20px}ul li{list-style-position:inside;list-style-type:disc}ol{margin-bottom:30px}ol li{margin-left:25px;list-style-type:decimal}#features h2{float:left}#features ul{color:#777;float:left;white-space:nowrap;clear:left;margin:0 10px;font:700 1.3em/1.35em Helvetica,Arial,Sans-serif}#features ul li{list-style-type:none;line-height:1em;margin-bottom:9px}#features ul li::before{content:"•";margin-right:8px}@media only screen and (min-width:768px) and (max-width:950px){#features ul{white-space:inherit;margin-right:250px}}p:last-child,*>p:last-child{margin-bottom:0}.datasheet{width:100%;font:400 1em/1.8em Helvetica,Arial,Sans-serif;border-collapse:collapse;vertical-align:middle;border-spacing:0;margin-bottom:30px}.datasheet strong{font-style:normal}.datasheet th,.datasheet td{text-align:left;padding:6px 8px;vertical-align:middle;border-left:solid 1px #bbb}.datasheet th:first-child,.datasheet td:first-child{border-left:none}.datasheet tr:last-child td{border-bottom:none}.datasheet th.description,.datasheet td.description{width:35%}.datasheet th.values,.datasheet td.values{width:55%}.datasheet th{text-align:center;font:italic 14px/1.8em Georgia,Times,Serif;font-weight:700}.datasheet tbody tr:nth-child(odd){background-color:rgba(255,255,255,.3)}.example.grid{padding-bottom:0}.example.grid>img,.example.grid>.small-area{margin-right:20px;margin-bottom:20px}.example .small-area{float:left;width:100px;height:100px;font:700 1em/8em Helvetica,Arial,Sans-serif;text-align:center;color:#6d7988;background:#fff;overflow:hidden}.example .small-area.last-child,.example .small-area:last-child{margin-right:0}.example h1{display:inline-block;font:700 2em/1em Helvetica,Arial,Sans-serif;text-shadow:none;color:#666;margin:0}.example img{float:left;margin-right:16px}footer{height:auto;font:400 1em/1.2em Helvetica,Arial,Sans-serif;color:#fff;background-color:#756e64;text-shadow:none}footer .wrapper{height:auto;padding:20px 0;padding-bottom:40px}footer section{position:relative}footer section:last-child{margin-bottom:0}footer section .social{display:block;float:right;position:relative;clear:both;top:-5px;padding:.2em 2em .2em!important;margin-bottom:15px!important}footer section .social.github img{position:relative;top:-1px}footer section .social.jquery img{position:relative;top:2px}@media only screen and (max-width:680px){footer section .social{float:none;display:inline-block;top:0;margin-bottom:30px!important}}@media only screen and (max-width:520px){footer section .social{padding:.2em 1em .2em!important}}@media only screen and (max-width:680px){footer section{text-align:center}}footer a:link,footer a:active,footer a:visited{text-shadow:none;text-decoration:none;color:#56ceff}footer a:hover{color:#ffb733}footer h2{width:100%;font-size:4.2em;line-height:1.5em;margin-bottom:15px;text-shadow:none}footer h2 a:link,footer h2 a:active,footer h2 a:visited,footer h2 a:hover{color:#e8f3f6;text-shadow:1px 3px 1px rgba(0,0,0,.2)}footer p{color:#e8f3f6;margin-bottom:8px} -------------------------------------------------------------------------------- /demo/css/simpletooltip.min.css: -------------------------------------------------------------------------------- 1 | .simpletooltip{cursor:pointer}.simple-tooltip{position:absolute;display:block;width:auto;max-width:200px;height:auto;padding:6px 8px;color:#ccc;font:400 13px/1.3em Helvetica,Arial,Sans-serif;border:solid 2px #111;background-color:#222;margin-bottom:30px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);-moz-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;z-index:9999}.simple-tooltip .arrow{display:block;width:0;height:0;position:absolute;border-width:6px;border-style:solid;border-color:transparent}.simple-tooltip.top .arrow{left:50%}.simple-tooltip.left .arrow{top:50%}.simple-tooltip.bottom .arrow{left:50%}.simple-tooltip.right .arrow{top:50%} -------------------------------------------------------------------------------- /demo/fonts/brushscriptstd-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/fonts/brushscriptstd-webfont.eot -------------------------------------------------------------------------------- /demo/fonts/brushscriptstd-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/fonts/brushscriptstd-webfont.ttf -------------------------------------------------------------------------------- /demo/fonts/brushscriptstd-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/fonts/brushscriptstd-webfont.woff -------------------------------------------------------------------------------- /demo/images/box-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/box-design.png -------------------------------------------------------------------------------- /demo/images/download-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/download-background.png -------------------------------------------------------------------------------- /demo/images/github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/github-logo.png -------------------------------------------------------------------------------- /demo/images/github-mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/github-mark.png -------------------------------------------------------------------------------- /demo/images/jquery-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/jquery-logo.png -------------------------------------------------------------------------------- /demo/images/jquery-mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/jquery-mark.png -------------------------------------------------------------------------------- /demo/images/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/jquery.png -------------------------------------------------------------------------------- /demo/images/landmarkup-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/landmarkup-icon.png -------------------------------------------------------------------------------- /demo/images/simpletooltip-logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/simpletooltip-logo-small.png -------------------------------------------------------------------------------- /demo/images/simpletooltip-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/simpletooltip-logo.png -------------------------------------------------------------------------------- /demo/images/themesample-darkgray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/themesample-darkgray.png -------------------------------------------------------------------------------- /demo/images/themesample-lightgray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/themesample-lightgray.png -------------------------------------------------------------------------------- /demo/images/themesample-pastelblue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/themesample-pastelblue.png -------------------------------------------------------------------------------- /demo/images/themesample-seablue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/not-only-code/Simpletooltip/0cd12e00bb87aced83e5e586396a6e5ce7c0ddb9/demo/images/themesample-seablue.png -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Simpletooltip 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 48 | 49 | 50 | 51 | 52 | 60 | 61 | 74 | 75 |
76 | 77 |
78 |

Features:

79 | 80 | 88 | 89 |
90 | 91 |
92 |

Installation:

93 |

Download the plugin and decompress files, put the folder simpletooltip in your tree project files, would be nice create a folder that contains it, for example js (/js/simpletooltip).

94 |

In the header of your document attach the scripts simpletooltip.min.css and simpletooltip.min.js. Of course, you will need to load jQuery first:

95 | 96 | <link rel="stylesheet" href=".../simpletooltip/dist/css/simpletooltip.min.css" media="screen" />

97 | <script src="http://code.jquery.com/jquery.min.js"></script>
98 | <script src=".../simpletooltip/dist/js/simpletooltip.min.js"></script> 99 | 100 |
101 | 102 |
103 |

Usage

104 |

To initialize the plugin you have 2 options:

105 |

Using data attribute

106 |

First declare data-simpletooltip="init" in the html element, and complete the attribute title, that will be the content of the tooltip. The plugin will initialize automatically.

107 | 108 | 
109 | <h1 data-simpletooltip="init" title="This is a tooltip">This is a header</h1>
110 |
111 | 112 |

Using JavaScript

113 |

You can use the jquery function simpletooltip() to initialize the plugin for one or more objects together. Remember the attribute title must exist in each element.

114 | 115 | 
116 | <h1 title="This is a tooltip">This is a header</h1>
117 | 
118 | <script>
119 |     jQuery(document).ready(function($) {
120 |         $('h1').simpletooltip();
121 |     });
122 | </script>
123 |
124 | 125 | 126 |

Simpletooltip was thought for use small and descriptive texts in order to substitute the ugly yellow tooltip that browsers offers by default. Anyway, you can insert more complex content like linebreaks, lists, images, etc...

127 | 128 | 129 | 
130 | <h1 data-simpletooltip="init" title="<img src='icon.png'>">image</h1>
131 |
132 | 133 | 134 |

♣ example

135 |
136 |

You can use images or graphics using custom fonts. 137 |

138 |
139 | 140 |
141 |

Options:

142 |

You can add some options to customize your tooltips. This options works in cascade, that means you can override them. Here, the priorities:

143 |
    144 |
  1. The default options will be applied at first instance.
    2. 145 |
  2. Your global options will override the default ones.
    3. 146 |
  3. Your theme options will override the global ones
    4. 147 |
  4. All data attributes will override the rest.
    5. 148 |
149 | 150 |

Default options

151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 168 | 169 | 170 | 171 | 172 | 173 | 178 | 179 | 180 | 181 | 182 | 183 | 188 | 189 | 190 | 191 | 192 | 193 | 198 | 199 | 200 | 201 | 202 | 203 | 208 | 209 | 210 | 211 | 212 | 213 | 217 | 218 | 219 | 220 | 221 | 222 | 225 | 226 | 227 | 228 | 229 | 230 | 234 | 235 | 236 | 237 |
attributedescriptionvaluesdefault
positionposition of tooltip in relation with the element 166 | top, top-left, left-top, left, left-bottom, bottom-left, bottom, bottom-right, right-bottom, right, right-top, top-right 167 | top
colorcolor of text inside the box 174 | #FFFFFF / 175 | 'rgba(255, 255, 255, 0.5)' / 176 | 'white' 177 | #CCCCCC
background_colorcolor of background of the box 184 | #000000 / 185 | 'rgba(0, 0, 0, 0.5)' / 186 | 'black' 187 | #222222
border_colorcolor of the box border 194 | #333333 / 195 | 'rgba(80, 80, 80, 0.5)' / 196 | 'gray' 197 | #111111
border_widthWidth of box border (in pixels) 204 | 4 / 205 | 4px / 206 | 0 'none' 207 | 0
arrow_widthSize of the arrow (in pixels) 214 | 4 / 215 | 4px 216 | 6px
fadethe animation when appears 223 | true / false 224 | true
max_widthlimit of the box width 231 | 200 / 232 | '200px' 233 | '200px'
238 |

Global options

239 |

You can add it globally, witch affects all tooltips of your queried objects:

240 | 241 | <script>
    jQuery(document).ready(function($) {
        $('.tooltip').simpletooltip({
            position: 'right',
            border_color: 'purple',
            color: '#FFFFFF',
            background_color: 'rgba(125,100,230, 0.5)',
            border_width: 4
        });
    });
</script> 242 | 243 |

Custom options

244 |

Or be more specific and override 1 option in 1 tooltip using data attribute:

245 | 246 | <h1 class="tooltip" data-simpletooltip-color="#FF0055">my title</h1> 247 | 248 |
249 | 250 |
251 |

Positions:

252 |

Simpletooltip has 12 funcional positions, by default goes on top position, but you can choose: top  top-left  left-top  left  left-bottom  bottom-left  bottom  bottom-right  right-bottom  right  right-top  top-right.

253 | 254 |

To add the desired position, in that example we'will use attribute data-simpletooltip-position.

255 | 256 | 257 | <div class="simpletooltip" data-simpletooltip-position="right-top">right top</div> 258 | 259 | 260 |

♣ example:

261 | 262 |
263 |
top
264 |
top-right
265 |
right-top
266 |
right
267 |
right-bottom
268 |
bottom-right
269 |
bottom
270 |
bottom-left
271 |
left-bottom
272 |
left
273 |
left-top
274 |
top-left
275 |
276 | 277 |
278 | 279 |
280 | 281 |

Themes

282 | 283 |

Themes are packages of options you can set up in one place, Simpletooltip comes with 4 default themes, you can choose: blue  white  dark  gray.

284 | 285 |

To assign a theme, configure theme parameter with the theme name:

286 | 287 | <img src="images/themesample-seablue.png" class="simpletooltip" data-simpletooltip-theme="blue" title="blue theme" /> 288 | 289 | 290 |

♣ example:

291 | 292 |
293 | 294 | 295 | 296 | 297 |
298 | 299 |

Also you can extend it, imagine a blue theme without border:

300 | 301 | <p data-simpletooltip="init" data-simpletooltip-theme="blue" data-simpletooltip-border-width="0" title="blue custom theme">blue theme customized<p> 302 | 303 | 304 |

♣ example:

305 | 306 |
307 |

This is a customized blue theme without border.

308 |
309 | 310 |

Creating Themes

311 | 312 |

Also you can create your own themes. Imagine you need to repeat continuously 2 schemes in your site and don't want to fill your html code with noisy variables inside data attributes. For that you can use themes attribute.

313 | 314 | 315 | 
316 | <script>
317 |     jQuery(document).ready(function($) {
318 |         $('.tooltip').simpletooltip({
319 |             themes: {
320 |                 pink: {
321 |                     color: 'red',
322 |                     border_color: 'red',
323 |                     background_color: 'pink',
324 |                     border_width: 4
325 |                 },
326 |                 brazil: {
327 |                     color: 'yellow',
328 |                     background_color: 'green',
329 |                     border_color: 'yellow',
330 |                     border_width: 4
331 |                 }
332 |             }
333 |         });
334 |     });
335 | </script>
336 |
337 | 338 | 339 |

♣ example:

340 | 341 | 342 |
343 |

This is a pink example, and this is a green one.

344 |
345 |
346 | 347 |
348 | download 349 |

Actual Version: 1.3.0

350 |

Latest Update: 11.06.2014

351 |

Also, you can access to the Github repo.

352 |

Do you have any great idea?
Contribute on Github issues

353 |

Simpletooltip helped you?

354 | donate ☺ 355 |
356 | 357 |
358 | 359 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | -------------------------------------------------------------------------------- /demo/js/affix.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily 3 | * v1.3.0 4 | * 5 | * 2014 Carlos Sanz Garcia 6 | * Distributed under GPL-3.0 license 7 | * 8 | * http://not-only-code.github.com/Simpletooltip 9 | */ 10 | 11 | +function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,d),this.$window=a(window).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(c),this.affixed=this.unpin=this.pinnedOffset=null,this.checkPosition()};b.RESET="affix affix-top affix-bottom",b.DEFAULTS={offset:0},b.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(b.RESET).addClass("affix");var a=this.$window.scrollTop(),c=this.$element.offset();return this.pinnedOffset=c.top-a},b.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},b.prototype.checkPosition=function(){if(this.$element.is(":visible")){var c=a(document).height(),d=this.$window.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"top"==this.affixed&&(e.top+=d),"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top(this.$element)),"function"==typeof h&&(h=f.bottom(this.$element));var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=c-h?"bottom":null!=g&&g>=d?"top":!1;if(this.affixed!==i){this.unpin&&this.$element.css("top","");var j="affix"+(i?"-"+i:""),k=a.Event(j+".bs.affix");this.$element.trigger(k),k.isDefaultPrevented()||(this.affixed=i,this.unpin="bottom"==i?this.getPinnedOffset():null,this.$element.removeClass(b.RESET).addClass(j).trigger(a.Event(j.replace("affix","affixed"))),"bottom"==i&&this.$element.offset({top:c-h-this.$element.height()}))}}};var c=a.fn.affix;a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof c&&c;e||d.data("bs.affix",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.noConflict=function(){return a.fn.affix=c,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(jQuery); -------------------------------------------------------------------------------- /demo/js/modernizr.simpletooltip.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-boxshadow-opacity-rgba-textshadow-canvas-canvastext-input-inputtypes-svg-webgl-shiv-mq-cssclasses-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f a",this.offsets=a([]),this.targets=a([]),this.activeTarget=null,this.refresh(),this.process()}b.DEFAULTS={offset:10},b.prototype.refresh=function(){var b=this.$element[0]==window?"offset":"position";this.offsets=a([]),this.targets=a([]);{var c=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[b]().top+(!a.isWindow(c.$scrollElement.get(0))&&c.$scrollElement.scrollTop()),e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){c.offsets.push(this[0]),c.targets.push(this[1])})}},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,d=c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(b>=d)return g!=(a=f.last()[0])&&this.activate(a);if(g&&b<=e[0])return g!=(a=f[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parentsUntil(this.options.target,".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate.bs.scrollspy")};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(jQuery); -------------------------------------------------------------------------------- /demo/js/simpletooltip.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily 3 | * v1.3.0 4 | * 5 | * 2014 Carlos Sanz Garcia 6 | * Distributed under GPL-3.0 license 7 | * 8 | * http://not-only-code.github.com/Simpletooltip 9 | */ 10 | 11 | !function(a){"use strict";var b,c=null;b=function(a){return void 0!==a&&"object"==typeof a&&(this.$el=a.$el||null,this.$tooltip=null,this.$arrow=null,this.margins={border:6,top:15,right:15,bottom:15,left:15},this.settings={},this.themes={},this.isJqueryObject(this.$el)&&!this.$el.data().hasOwnProperty("simpletooltipInstanced")&&(this.title=this.$el.attr("title"),void 0!==this.title&&this.title.length))?(this.$el.attr("title",""),this.setOptions(a.settings),this.setTooltip(),this.initialize(),this.$el.data("simpletooltip-instanced","1"),this):void 0},b.defaults={position:"top",color:"#DDDDDD",background_color:"#222222",border_width:0,arrow_width:6,padding:{width:8,height:6},max_width:200,fade:!0},b.themes={dark:{color:"#CCCCCC",background_color:"#222222",border_color:"#111111",border_width:4},gray:{color:"#434343",background_color:"#DCDCDC",border_color:"#BABABA",border_width:4},white:{color:"#6D7988",background_color:"#CCDEF2",border_color:"#FFFFFF",border_width:4},blue:{color:"#FFFFFF",background_color:"#0088BE",border_color:"#00669C",border_width:4}},b.templates={tooltip:'
',arrow:' '},b.prototype.isJqueryObject=function(a){return null!==a&&void 0!==a&&"object"==typeof a&&void 0!==a.jquery},b.prototype.setTooltip=function(){return this.isJqueryObject(this.$tooltip)&&this.isJqueryObject(this.$arrow)?void 0:(this.$tooltip=a(b.templates.tooltip),this.$tooltip.html(this.title),this.$tooltip.addClass(this.getAttribute("position")),this.$arrow=a(b.templates.arrow),this.$tooltip.append(this.$arrow),this.$tooltip)},b.prototype.setOptions=function(c){void 0!==c&&"object"==typeof c&&(this.settings=a.extend(b.defaults,c),void 0!==this.settings.themes&&"object"==typeof this.settings.themes&&(this.themes=a.extend(b.themes,this.settings.themes),delete this.settings.themes),void 0!==this.themes[this.settings.theme]&&(this.settings=a.extend(this.settings,this.themes[this.settings.theme])))},b.prototype.initialize=function(){this.$el.on("mouseenter",{that:this},this.mouseOver),this.$el.on("mouseleave",{that:this},this.mouseOut),this.$el.attr("title","")},b.prototype.getAttribute=function(a){var b,c="simpletooltip-"+a.replace("_","-");return void 0!==this.$el.data(c)?this.$el.data(c):void 0!==(b=this.$el.data("simpletooltip-theme"))&&void 0!==this.themes[b]&&void 0!==this.themes[b][a]?this.themes[b][a]:void 0!==this.settings[a]?this.settings[a]:!1},b.prototype.mouseOver=function(a){var b=a.data.that;return b.$tooltip.parent().length?a:(c.append(b.$tooltip),b.$tooltip.hide(),b.styleTooltip(),b.getAttribute("fade")?b.$tooltip.delay(180).fadeIn(200):b.$tooltip.show(),a)},b.prototype.mouseOut=function(a){var b=a.data.that;return b.$tooltip.parent().length?b.$tooltip.css("opacity")?(b.getAttribute("fade")?b.$tooltip.clearQueue().stop().fadeOut(100,function(){b.$tooltip.remove()}):b.$tooltip.remove(),a):(b.$tooltip.remove(),a):a},b.prototype.styleTooltip=function(){if(this.isJqueryObject(this.$el)&&this.isJqueryObject(this.$tooltip)){var b=this.$el.offset(),c=this.getAttribute("background_color"),d=this.getAttribute("border_color");this.isJqueryObject(this.$arrow)||(this.$arrow=this.$tooltip.find(" > .arrow"));var e=this.getAttribute("border_width");e=d&&"boolean"!=typeof e&&"none"!==e?Number(e):0;var f=e&&d?d:c,g=Math.round(3*this.settings.arrow_width/4),h=-parseInt(2*this.settings.arrow_width+e,10),i=-parseInt(2*g+e,10),j={maxWidth:this.getAttribute("max_width"),backgroundColor:c,color:this.getAttribute("color"),borderColor:d,borderWidth:e};switch(this.getAttribute("position")){case"top-right":b.top-=parseInt(this.$tooltip.outerHeight()+this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()-this.margins.right-this.margins.border,10),this.$arrow.css({left:this.settings.padding.width-e,borderWidth:g,bottom:i,borderTopColor:f,borderLeftColor:f});break;case"right-top":b.top-=parseInt(this.$tooltip.outerHeight()-this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()+this.margins.right,10),this.$arrow.css({bottom:this.settings.padding.height-e,borderWidth:g,left:i,borderRightColor:f,borderBottomColor:f});break;case"right":b.top+=parseInt((this.$el.outerHeight()-this.$tooltip.outerHeight())/2,10),b.left+=parseInt(this.$el.outerWidth()+this.margins.right,10),this.$arrow.css({left:h,borderRightColor:f,marginTop:-this.settings.arrow_width});break;case"right-bottom":b.top+=parseInt(this.$el.outerHeight()-this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()+this.margins.right,10),this.$arrow.css({top:this.settings.padding.height-e,borderWidth:g,left:i,borderRightColor:f,borderTopColor:f});break;case"bottom-right":b.top+=parseInt(this.$el.outerHeight()+this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()-this.margins.right-this.margins.border,10),this.$arrow.css({left:this.settings.padding.width-e,borderWidth:g,top:i,borderBottomColor:f,borderLeftColor:f});break;case"bottom":b.top+=parseInt(this.$el.outerHeight()+this.margins.bottom,10),b.left+=parseInt((this.$el.outerWidth()-this.$tooltip.outerWidth())/2,10),this.$arrow.css({top:h,marginLeft:-this.settings.arrow_width,borderBottomColor:f});break;case"bottom-left":b.top+=parseInt(this.$el.outerHeight()+this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()-this.margins.left-this.margins.border,10),this.$arrow.css({right:this.settings.padding.width-e,borderWidth:g,top:i,borderBottomColor:f,borderRightColor:f});break;case"left-bottom":b.top+=parseInt(this.$el.outerHeight()-this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()+this.margins.left,10),this.$arrow.css({top:this.settings.padding.height-e,borderWidth:g,right:i,borderLeftColor:f,borderTopColor:f});break;case"left":b.top+=parseInt((this.$el.outerHeight()-this.$tooltip.outerHeight())/2,10),b.left-=parseInt(this.$tooltip.outerWidth()+this.margins.left,10),this.$arrow.css({right:h,borderLeftColor:f,marginTop:-this.settings.arrow_width});break;case"left-top":b.top-=parseInt(this.$tooltip.outerHeight()-this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()+this.margins.left,10),this.$arrow.css({bottom:this.settings.padding.height-e,borderWidth:g,right:i,borderLeftColor:f,borderBottomColor:f});break;case"top-left":b.top-=parseInt(this.$tooltip.outerHeight()+this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()-this.margins.left,10),this.$arrow.css({right:this.settings.padding.width-e,borderWidth:g,bottom:i,borderTopColor:f,borderRightColor:f});break;default:b.top-=parseInt(this.$tooltip.outerHeight()+this.margins.top,10),b.left+=parseInt((this.$el.outerWidth()-this.$tooltip.outerWidth())/2,10),this.$arrow.css({bottom:h,borderTopColor:f,marginLeft:-this.settings.arrow_width})}this.$tooltip.css(a.extend(j,{top:b.top,left:b.left}))}},a.fn.simpletooltip=function(c){return this.each(function(){var d=a(this);if(!d.data().hasOwnProperty("simpletooltipInstanced")){var e={$el:d};void 0!==c&&"object"==typeof c&&(e.settings=c),new b(e)}})},a(window).on("load",function(){c=a("body"),a('[data-simpletooltip="init"]').each(function(){a(this).simpletooltip()})})}(jQuery); -------------------------------------------------------------------------------- /dist/css/simpletooltip.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily 3 | * v1.3.0 4 | * 5 | * 2014 Carlos Sanz Garcia 6 | * Distributed under GPL-3.0 license 7 | * 8 | * http://not-only-code.github.com/Simpletooltip 9 | */ 10 | .simpletooltip { 11 | cursor: pointer; 12 | } 13 | .simple-tooltip { 14 | position: absolute; 15 | display: block; 16 | width: auto; 17 | max-width: 200px; 18 | height: auto; 19 | padding: 6px 8px; 20 | color: #cccccc; 21 | font: normal 13px/1.3em 'Helvetica', 'Arial', 'Sans-serif'; 22 | border: solid 2px #111111; 23 | background-color: #222222; 24 | margin-bottom: 30px; 25 | -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 26 | -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 27 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 28 | -webkit-border-radius: 5px; 29 | -moz-border-radius: 5px; 30 | border-radius: 5px; 31 | z-index: 9999; 32 | } 33 | .simple-tooltip .arrow { 34 | display: block; 35 | width: 0; 36 | height: 0; 37 | position: absolute; 38 | border-width: 6px; 39 | border-style: solid; 40 | border-color: transparent; 41 | } 42 | .simple-tooltip.top .arrow { 43 | left: 50%; 44 | } 45 | .simple-tooltip.left .arrow { 46 | top: 50%; 47 | } 48 | .simple-tooltip.bottom .arrow { 49 | left: 50%; 50 | } 51 | .simple-tooltip.right .arrow { 52 | top: 50%; 53 | } 54 | -------------------------------------------------------------------------------- /dist/css/simpletooltip.min.css: -------------------------------------------------------------------------------- 1 | .simpletooltip{cursor:pointer}.simple-tooltip{position:absolute;display:block;width:auto;max-width:200px;height:auto;padding:6px 8px;color:#ccc;font:400 13px/1.3em Helvetica,Arial,Sans-serif;border:solid 2px #111;background-color:#222;margin-bottom:30px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);-moz-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;z-index:9999}.simple-tooltip .arrow{display:block;width:0;height:0;position:absolute;border-width:6px;border-style:solid;border-color:transparent}.simple-tooltip.top .arrow{left:50%}.simple-tooltip.left .arrow{top:50%}.simple-tooltip.bottom .arrow{left:50%}.simple-tooltip.right .arrow{top:50%} -------------------------------------------------------------------------------- /dist/js/simpletooltip.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily 3 | * v1.3.0 4 | * 5 | * 2014 Carlos Sanz Garcia 6 | * Distributed under GPL-3.0 license 7 | * 8 | * http://not-only-code.github.com/Simpletooltip 9 | */ 10 | 11 | (function(a) { 12 | "use strict"; 13 | var b, c = null; 14 | b = function(a) { 15 | if (a === undefined || typeof a !== "object") { 16 | return; 17 | } 18 | this.$el = a.$el || null; 19 | this.$tooltip = null; 20 | this.$arrow = null; 21 | this.margins = { 22 | border: 6, 23 | top: 15, 24 | right: 15, 25 | bottom: 15, 26 | left: 15 27 | }; 28 | this.settings = {}; 29 | this.themes = {}; 30 | if (!this.isJqueryObject(this.$el) || this.$el.data().hasOwnProperty("simpletooltipInstanced")) { 31 | return; 32 | } 33 | this.title = this.$el.attr("title"); 34 | if (this.title === undefined || !this.title.length) { 35 | return; 36 | } 37 | this.$el.attr("title", ""); 38 | this.setOptions(a.settings); 39 | this.setTooltip(); 40 | this.initialize(); 41 | this.$el.data("simpletooltip-instanced", "1"); 42 | return this; 43 | }; 44 | b.defaults = { 45 | position: "top", 46 | color: "#DDDDDD", 47 | background_color: "#222222", 48 | border_width: 0, 49 | arrow_width: 6, 50 | padding: { 51 | width: 8, 52 | height: 6 53 | }, 54 | max_width: 200, 55 | fade: true 56 | }; 57 | b.themes = { 58 | dark: { 59 | color: "#CCCCCC", 60 | background_color: "#222222", 61 | border_color: "#111111", 62 | border_width: 4 63 | }, 64 | gray: { 65 | color: "#434343", 66 | background_color: "#DCDCDC", 67 | border_color: "#BABABA", 68 | border_width: 4 69 | }, 70 | white: { 71 | color: "#6D7988", 72 | background_color: "#CCDEF2", 73 | border_color: "#FFFFFF", 74 | border_width: 4 75 | }, 76 | blue: { 77 | color: "#FFFFFF", 78 | background_color: "#0088BE", 79 | border_color: "#00669C", 80 | border_width: 4 81 | } 82 | }; 83 | b.templates = { 84 | tooltip: '
', 85 | arrow: ' ' 86 | }; 87 | b.prototype.isJqueryObject = function(a) { 88 | return a !== null && a !== undefined && typeof a === "object" && a.jquery !== undefined; 89 | }; 90 | b.prototype.setTooltip = function() { 91 | if (this.isJqueryObject(this.$tooltip) && this.isJqueryObject(this.$arrow)) { 92 | return; 93 | } 94 | this.$tooltip = a(b.templates.tooltip); 95 | this.$tooltip.html(this.title); 96 | this.$tooltip.addClass(this.getAttribute("position")); 97 | this.$arrow = a(b.templates.arrow); 98 | this.$tooltip.append(this.$arrow); 99 | return this.$tooltip; 100 | }; 101 | b.prototype.setOptions = function(c) { 102 | if (c === undefined || typeof c !== "object") { 103 | return; 104 | } 105 | this.settings = a.extend(b.defaults, c); 106 | if (this.settings["themes"] !== undefined && typeof this.settings.themes === "object") { 107 | this.themes = a.extend(b.themes, this.settings.themes); 108 | delete this.settings.themes; 109 | } 110 | if (this.themes[this.settings.theme] !== undefined) { 111 | this.settings = a.extend(this.settings, this.themes[this.settings.theme]); 112 | } 113 | }; 114 | b.prototype.initialize = function() { 115 | this.$el.on("mouseenter", { 116 | that: this 117 | }, this.mouseOver); 118 | this.$el.on("mouseleave", { 119 | that: this 120 | }, this.mouseOut); 121 | this.$el.attr("title", ""); 122 | }; 123 | b.prototype.getAttribute = function(a) { 124 | var b = "simpletooltip-" + a.replace("_", "-"), c; 125 | if (this.$el.data(b) !== undefined) { 126 | return this.$el.data(b); 127 | } 128 | if ((c = this.$el.data("simpletooltip-theme")) !== undefined) { 129 | if (this.themes[c] !== undefined && this.themes[c][a] !== undefined) { 130 | return this.themes[c][a]; 131 | } 132 | } 133 | if (this.settings[a] !== undefined) { 134 | return this.settings[a]; 135 | } 136 | return false; 137 | }; 138 | b.prototype.mouseOver = function(a) { 139 | var b = a.data.that; 140 | if (b.$tooltip.parent().length) { 141 | return a; 142 | } 143 | c.append(b.$tooltip); 144 | b.$tooltip.hide(); 145 | b.styleTooltip(); 146 | if (b.getAttribute("fade")) { 147 | b.$tooltip.delay(180).fadeIn(200); 148 | } else { 149 | b.$tooltip.show(); 150 | } 151 | return a; 152 | }; 153 | b.prototype.mouseOut = function(a) { 154 | var b = a.data.that; 155 | if (!b.$tooltip.parent().length) { 156 | return a; 157 | } 158 | if (!b.$tooltip.css("opacity")) { 159 | b.$tooltip.remove(); 160 | return a; 161 | } 162 | if (b.getAttribute("fade")) { 163 | b.$tooltip.clearQueue().stop().fadeOut(100, function() { 164 | b.$tooltip.remove(); 165 | }); 166 | } else { 167 | b.$tooltip.remove(); 168 | } 169 | return a; 170 | }; 171 | b.prototype.styleTooltip = function() { 172 | if (!this.isJqueryObject(this.$el) || !this.isJqueryObject(this.$tooltip)) { 173 | return; 174 | } 175 | var b = this.$el.offset(), c = this.getAttribute("background_color"), d = this.getAttribute("border_color"); 176 | if (!this.isJqueryObject(this.$arrow)) { 177 | this.$arrow = this.$tooltip.find(" > .arrow"); 178 | } 179 | var e = this.getAttribute("border_width"); 180 | e = !d || typeof e === "boolean" || e === "none" ? 0 : Number(e); 181 | var f = !e || !d ? c : d; 182 | var g = Math.round(this.settings.arrow_width * 3 / 4), h = -parseInt(this.settings.arrow_width * 2 + e, 10), i = -parseInt(g * 2 + e, 10); 183 | var j = { 184 | maxWidth: this.getAttribute("max_width"), 185 | backgroundColor: c, 186 | color: this.getAttribute("color"), 187 | borderColor: d, 188 | borderWidth: e 189 | }; 190 | switch (this.getAttribute("position")) { 191 | case "top-right": 192 | b.top -= parseInt(this.$tooltip.outerHeight() + this.margins.bottom, 10); 193 | b.left += parseInt(this.$el.outerWidth() - this.margins.right - this.margins.border, 10); 194 | this.$arrow.css({ 195 | left: this.settings.padding.width - e, 196 | borderWidth: g, 197 | bottom: i, 198 | borderTopColor: f, 199 | borderLeftColor: f 200 | }); 201 | break; 202 | 203 | case "right-top": 204 | b.top -= parseInt(this.$tooltip.outerHeight() - this.margins.bottom, 10); 205 | b.left += parseInt(this.$el.outerWidth() + this.margins.right, 10); 206 | this.$arrow.css({ 207 | bottom: this.settings.padding.height - e, 208 | borderWidth: g, 209 | left: i, 210 | borderRightColor: f, 211 | borderBottomColor: f 212 | }); 213 | break; 214 | 215 | case "right": 216 | b.top += parseInt((this.$el.outerHeight() - this.$tooltip.outerHeight()) / 2, 10); 217 | b.left += parseInt(this.$el.outerWidth() + this.margins.right, 10); 218 | this.$arrow.css({ 219 | left: h, 220 | borderRightColor: f, 221 | marginTop: -this.settings.arrow_width 222 | }); 223 | break; 224 | 225 | case "right-bottom": 226 | b.top += parseInt(this.$el.outerHeight() - this.margins.bottom, 10); 227 | b.left += parseInt(this.$el.outerWidth() + this.margins.right, 10); 228 | this.$arrow.css({ 229 | top: this.settings.padding.height - e, 230 | borderWidth: g, 231 | left: i, 232 | borderRightColor: f, 233 | borderTopColor: f 234 | }); 235 | break; 236 | 237 | case "bottom-right": 238 | b.top += parseInt(this.$el.outerHeight() + this.margins.bottom, 10); 239 | b.left += parseInt(this.$el.outerWidth() - this.margins.right - this.margins.border, 10); 240 | this.$arrow.css({ 241 | left: this.settings.padding.width - e, 242 | borderWidth: g, 243 | top: i, 244 | borderBottomColor: f, 245 | borderLeftColor: f 246 | }); 247 | break; 248 | 249 | case "bottom": 250 | b.top += parseInt(this.$el.outerHeight() + this.margins.bottom, 10); 251 | b.left += parseInt((this.$el.outerWidth() - this.$tooltip.outerWidth()) / 2, 10); 252 | this.$arrow.css({ 253 | top: h, 254 | marginLeft: -this.settings.arrow_width, 255 | borderBottomColor: f 256 | }); 257 | break; 258 | 259 | case "bottom-left": 260 | b.top += parseInt(this.$el.outerHeight() + this.margins.bottom, 10); 261 | b.left -= parseInt(this.$tooltip.outerWidth() - this.margins.left - this.margins.border, 10); 262 | this.$arrow.css({ 263 | right: this.settings.padding.width - e, 264 | borderWidth: g, 265 | top: i, 266 | borderBottomColor: f, 267 | borderRightColor: f 268 | }); 269 | break; 270 | 271 | case "left-bottom": 272 | b.top += parseInt(this.$el.outerHeight() - this.margins.bottom, 10); 273 | b.left -= parseInt(this.$tooltip.outerWidth() + this.margins.left, 10); 274 | this.$arrow.css({ 275 | top: this.settings.padding.height - e, 276 | borderWidth: g, 277 | right: i, 278 | borderLeftColor: f, 279 | borderTopColor: f 280 | }); 281 | break; 282 | 283 | case "left": 284 | b.top += parseInt((this.$el.outerHeight() - this.$tooltip.outerHeight()) / 2, 10); 285 | b.left -= parseInt(this.$tooltip.outerWidth() + this.margins.left, 10); 286 | this.$arrow.css({ 287 | right: h, 288 | borderLeftColor: f, 289 | marginTop: -this.settings.arrow_width 290 | }); 291 | break; 292 | 293 | case "left-top": 294 | b.top -= parseInt(this.$tooltip.outerHeight() - this.margins.bottom, 10); 295 | b.left -= parseInt(this.$tooltip.outerWidth() + this.margins.left, 10); 296 | this.$arrow.css({ 297 | bottom: this.settings.padding.height - e, 298 | borderWidth: g, 299 | right: i, 300 | borderLeftColor: f, 301 | borderBottomColor: f 302 | }); 303 | break; 304 | 305 | case "top-left": 306 | b.top -= parseInt(this.$tooltip.outerHeight() + this.margins.bottom, 10); 307 | b.left -= parseInt(this.$tooltip.outerWidth() - this.margins.left, 10); 308 | this.$arrow.css({ 309 | right: this.settings.padding.width - e, 310 | borderWidth: g, 311 | bottom: i, 312 | borderTopColor: f, 313 | borderRightColor: f 314 | }); 315 | break; 316 | 317 | default: 318 | b.top -= parseInt(this.$tooltip.outerHeight() + this.margins.top, 10); 319 | b.left += parseInt((this.$el.outerWidth() - this.$tooltip.outerWidth()) / 2, 10); 320 | this.$arrow.css({ 321 | bottom: h, 322 | borderTopColor: f, 323 | marginLeft: -this.settings.arrow_width 324 | }); 325 | } 326 | this.$tooltip.css(a.extend(j, { 327 | top: b.top, 328 | left: b.left 329 | })); 330 | }; 331 | a.fn.simpletooltip = function(c) { 332 | return this.each(function() { 333 | var d = a(this); 334 | if (!d.data().hasOwnProperty("simpletooltipInstanced")) { 335 | var e = { 336 | $el: d 337 | }; 338 | if (c !== undefined && typeof c === "object") { 339 | e.settings = c; 340 | } 341 | new b(e); 342 | } 343 | }); 344 | }; 345 | a(window).on("load", function() { 346 | c = a("body"); 347 | a('[data-simpletooltip="init"]').each(function() { 348 | a(this).simpletooltip(); 349 | }); 350 | }); 351 | })(jQuery); -------------------------------------------------------------------------------- /dist/js/simpletooltip.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily 3 | * v1.3.0 4 | * 5 | * 2014 Carlos Sanz Garcia 6 | * Distributed under GPL-3.0 license 7 | * 8 | * http://not-only-code.github.com/Simpletooltip 9 | */ 10 | 11 | !function(a){"use strict";var b,c=null;b=function(a){return void 0!==a&&"object"==typeof a&&(this.$el=a.$el||null,this.$tooltip=null,this.$arrow=null,this.margins={border:6,top:15,right:15,bottom:15,left:15},this.settings={},this.themes={},this.isJqueryObject(this.$el)&&!this.$el.data().hasOwnProperty("simpletooltipInstanced")&&(this.title=this.$el.attr("title"),void 0!==this.title&&this.title.length))?(this.$el.attr("title",""),this.setOptions(a.settings),this.setTooltip(),this.initialize(),this.$el.data("simpletooltip-instanced","1"),this):void 0},b.defaults={position:"top",color:"#DDDDDD",background_color:"#222222",border_width:0,arrow_width:6,padding:{width:8,height:6},max_width:200,fade:!0},b.themes={dark:{color:"#CCCCCC",background_color:"#222222",border_color:"#111111",border_width:4},gray:{color:"#434343",background_color:"#DCDCDC",border_color:"#BABABA",border_width:4},white:{color:"#6D7988",background_color:"#CCDEF2",border_color:"#FFFFFF",border_width:4},blue:{color:"#FFFFFF",background_color:"#0088BE",border_color:"#00669C",border_width:4}},b.templates={tooltip:'
',arrow:' '},b.prototype.isJqueryObject=function(a){return null!==a&&void 0!==a&&"object"==typeof a&&void 0!==a.jquery},b.prototype.setTooltip=function(){return this.isJqueryObject(this.$tooltip)&&this.isJqueryObject(this.$arrow)?void 0:(this.$tooltip=a(b.templates.tooltip),this.$tooltip.html(this.title),this.$tooltip.addClass(this.getAttribute("position")),this.$arrow=a(b.templates.arrow),this.$tooltip.append(this.$arrow),this.$tooltip)},b.prototype.setOptions=function(c){void 0!==c&&"object"==typeof c&&(this.settings=a.extend(b.defaults,c),void 0!==this.settings.themes&&"object"==typeof this.settings.themes&&(this.themes=a.extend(b.themes,this.settings.themes),delete this.settings.themes),void 0!==this.themes[this.settings.theme]&&(this.settings=a.extend(this.settings,this.themes[this.settings.theme])))},b.prototype.initialize=function(){this.$el.on("mouseenter",{that:this},this.mouseOver),this.$el.on("mouseleave",{that:this},this.mouseOut),this.$el.attr("title","")},b.prototype.getAttribute=function(a){var b,c="simpletooltip-"+a.replace("_","-");return void 0!==this.$el.data(c)?this.$el.data(c):void 0!==(b=this.$el.data("simpletooltip-theme"))&&void 0!==this.themes[b]&&void 0!==this.themes[b][a]?this.themes[b][a]:void 0!==this.settings[a]?this.settings[a]:!1},b.prototype.mouseOver=function(a){var b=a.data.that;return b.$tooltip.parent().length?a:(c.append(b.$tooltip),b.$tooltip.hide(),b.styleTooltip(),b.getAttribute("fade")?b.$tooltip.delay(180).fadeIn(200):b.$tooltip.show(),a)},b.prototype.mouseOut=function(a){var b=a.data.that;return b.$tooltip.parent().length?b.$tooltip.css("opacity")?(b.getAttribute("fade")?b.$tooltip.clearQueue().stop().fadeOut(100,function(){b.$tooltip.remove()}):b.$tooltip.remove(),a):(b.$tooltip.remove(),a):a},b.prototype.styleTooltip=function(){if(this.isJqueryObject(this.$el)&&this.isJqueryObject(this.$tooltip)){var b=this.$el.offset(),c=this.getAttribute("background_color"),d=this.getAttribute("border_color");this.isJqueryObject(this.$arrow)||(this.$arrow=this.$tooltip.find(" > .arrow"));var e=this.getAttribute("border_width");e=d&&"boolean"!=typeof e&&"none"!==e?Number(e):0;var f=e&&d?d:c,g=Math.round(3*this.settings.arrow_width/4),h=-parseInt(2*this.settings.arrow_width+e,10),i=-parseInt(2*g+e,10),j={maxWidth:this.getAttribute("max_width"),backgroundColor:c,color:this.getAttribute("color"),borderColor:d,borderWidth:e};switch(this.getAttribute("position")){case"top-right":b.top-=parseInt(this.$tooltip.outerHeight()+this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()-this.margins.right-this.margins.border,10),this.$arrow.css({left:this.settings.padding.width-e,borderWidth:g,bottom:i,borderTopColor:f,borderLeftColor:f});break;case"right-top":b.top-=parseInt(this.$tooltip.outerHeight()-this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()+this.margins.right,10),this.$arrow.css({bottom:this.settings.padding.height-e,borderWidth:g,left:i,borderRightColor:f,borderBottomColor:f});break;case"right":b.top+=parseInt((this.$el.outerHeight()-this.$tooltip.outerHeight())/2,10),b.left+=parseInt(this.$el.outerWidth()+this.margins.right,10),this.$arrow.css({left:h,borderRightColor:f,marginTop:-this.settings.arrow_width});break;case"right-bottom":b.top+=parseInt(this.$el.outerHeight()-this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()+this.margins.right,10),this.$arrow.css({top:this.settings.padding.height-e,borderWidth:g,left:i,borderRightColor:f,borderTopColor:f});break;case"bottom-right":b.top+=parseInt(this.$el.outerHeight()+this.margins.bottom,10),b.left+=parseInt(this.$el.outerWidth()-this.margins.right-this.margins.border,10),this.$arrow.css({left:this.settings.padding.width-e,borderWidth:g,top:i,borderBottomColor:f,borderLeftColor:f});break;case"bottom":b.top+=parseInt(this.$el.outerHeight()+this.margins.bottom,10),b.left+=parseInt((this.$el.outerWidth()-this.$tooltip.outerWidth())/2,10),this.$arrow.css({top:h,marginLeft:-this.settings.arrow_width,borderBottomColor:f});break;case"bottom-left":b.top+=parseInt(this.$el.outerHeight()+this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()-this.margins.left-this.margins.border,10),this.$arrow.css({right:this.settings.padding.width-e,borderWidth:g,top:i,borderBottomColor:f,borderRightColor:f});break;case"left-bottom":b.top+=parseInt(this.$el.outerHeight()-this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()+this.margins.left,10),this.$arrow.css({top:this.settings.padding.height-e,borderWidth:g,right:i,borderLeftColor:f,borderTopColor:f});break;case"left":b.top+=parseInt((this.$el.outerHeight()-this.$tooltip.outerHeight())/2,10),b.left-=parseInt(this.$tooltip.outerWidth()+this.margins.left,10),this.$arrow.css({right:h,borderLeftColor:f,marginTop:-this.settings.arrow_width});break;case"left-top":b.top-=parseInt(this.$tooltip.outerHeight()-this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()+this.margins.left,10),this.$arrow.css({bottom:this.settings.padding.height-e,borderWidth:g,right:i,borderLeftColor:f,borderBottomColor:f});break;case"top-left":b.top-=parseInt(this.$tooltip.outerHeight()+this.margins.bottom,10),b.left-=parseInt(this.$tooltip.outerWidth()-this.margins.left,10),this.$arrow.css({right:this.settings.padding.width-e,borderWidth:g,bottom:i,borderTopColor:f,borderRightColor:f});break;default:b.top-=parseInt(this.$tooltip.outerHeight()+this.margins.top,10),b.left+=parseInt((this.$el.outerWidth()-this.$tooltip.outerWidth())/2,10),this.$arrow.css({bottom:h,borderTopColor:f,marginLeft:-this.settings.arrow_width})}this.$tooltip.css(a.extend(j,{top:b.top,left:b.left}))}},a.fn.simpletooltip=function(c){return this.each(function(){var d=a(this);if(!d.data().hasOwnProperty("simpletooltipInstanced")){var e={$el:d};void 0!==c&&"object"==typeof c&&(e.settings=c),new b(e)}})},a(window).on("load",function(){c=a("body"),a('[data-simpletooltip="init"]').each(function(){a(this).simpletooltip()})})}(jQuery); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Simpletooltip", 3 | "version": "1.3.0", 4 | "description": "Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily", 5 | "homepage": "http://not-only-code.github.com/Simpletooltip", 6 | "private": false, 7 | "license": "GPL-3.0", 8 | "scripts": { 9 | "install": "node_modules/.bin/bower install" 10 | }, 11 | "author": { 12 | "name": "Carlos Sanz Garcia", 13 | "email": "carlos.sanz@gmail.com", 14 | "web": "http://codingsomething.wordpress.com" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git@github.com:not-only-code/Simpletooltip.git" 19 | }, 20 | "dependencies": { 21 | "jquery": ">=1.7" 22 | }, 23 | "devDependencies": { 24 | "grunt": "*", 25 | "bower": "~1.3.5", 26 | "grunt-contrib-less": "*", 27 | "grunt-contrib-jshint": "*", 28 | "grunt-contrib-copy": "*", 29 | "grunt-contrib-uglify": "*", 30 | "grunt-contrib-watch": "*" 31 | } 32 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | #Simpletoolip 2 | > _...is a Jquery plugin, thought to insert short tooltips to any element of your website more easily_ 3 | 4 | ![Simpletooltip logo](https://codingsomething.files.wordpress.com/2014/06/simpletooltip-logo.png?w=200&h=200) 5 | 6 | ## Table of contents 7 | 1. [Features](#features) 8 | 1. [Build](#build) 9 | 1. [Installation](#installation) 10 | 1. [Usage](#usage) 11 | 1. [Using data attribute](#using-data-attribute) 12 | 1. [Using JavaScript](#using-javascript) 13 | 1. [Options](#options) 14 | 1. [Default options](#default-options) 15 | 1. [Global options](#global-options) 16 | 1. [Positions](#positions) 17 | 1. [Themes](#themes) 18 | 1. [Creating Themes](#creating-themes) 19 | 1. [Download](#download) 20 | 1. [Changelog](#changelog) 21 | 22 | 23 | 24 | ## Features 25 | 26 | * minimal configuration 27 | * highly customizable: options and themes 28 | * no extra html structures, use "title" attribute 29 | * 12 functional positions 30 | * cross-browser 31 | * lightweight: less than 7Kb 32 | 33 | ## Build 34 | 35 | ``` 36 | $ npm install 37 | ``` 38 | 39 | ``` 40 | $ grunt 41 | ``` 42 | 43 | ## Installation 44 | 45 | Download the plugin and decompress files, put the folder **simpletooltip** in your tree project files, would be nice create a folder that contains it, for example **js** (/js/simpletooltip). 46 | 47 | In the header of your document attach the scripts simpletooltip.min.css` and `simpletooltip.min.js`. Of course, you will need to load jQuery first: 48 | 49 | ``` 50 | 51 | 52 | 53 | 54 | ``` 55 | 56 | 57 | ## Usage 58 | 59 | To initialize the plugin you have 2 options: 60 | 61 | ### Using data attribute 62 | 63 | First declare `data-simpletooltip="init"` in the html element, and complete the attribute `title`, that will be the content of the tooltip. The plugin will initialize automatically. 64 | 65 | ``` 66 |

This is a header

67 | ``` 68 | 69 | ### Using JavaScript 70 | 71 | You can use the jquery function `simpletooltip()` to initialize the plugin for one or more objects together. Remember the attribute `title must exist in each element. 72 | 73 | ``` 74 |

This is a header

75 | 76 | 81 | ``` 82 | 83 | Simpletooltip was thought for use small and descriptive texts in order to substitute the ugly yellow tooltip that browsers offers by default. Anyway, you can insert more complex content like linebreaks, lists, images, etc... 84 | 85 | ``` 86 |

This is a header

87 | 88 | 93 | ``` 94 | 95 | ## Options 96 | 97 | You can add some options to customize your tooltips. This options works in cascade, that means you can override them. Here, the priorities: 98 | 99 | 1. The [default options](#default-options) will be applied at first instance. 100 | 1. Your [global options](#global-options) will override the default ones. 101 | 1. Your [theme options](#themes) will override the global ones 102 | 1. All [data attributes](#custom-options) will override the rest. 103 | 104 | ### Default options 105 | 106 | 107 | attribute | description | values | default 108 | -------------------|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|---------- 109 | `position` | position of tooltip in relation with the element | `top` `top-left` `left-top` `left` `left-bottom` `bottom-left` `bottom` `bottom-right` `right-bottom` `right` `right-top` `top-right` | `top` 110 | `color` | color of text inside the box | `#FFFFFF` / `'rgba(255, 255, 255, 0.5)'` / `'white'` | `#CCCCCC` 111 | `background_color` | color of background of the box | `#000000` / `'rgba(0, 0, 0, 0.5)'` / `'black'` | `#222222` 112 | `border_color` | color of the box border | `#000000` / `'rgba(0, 0, 0, 0.5)'` / `'black'` | `#111111` 113 | `border_width` | width of box border (in pixels) | `4` / `4px` / `0` `'none'` | `0` 114 | `arrow_width` | size of the arrow (in pixels) | `6` / `6px` | `4px` 115 | `fade` | animation when appears | `true` / `false` | `true` 116 | `max_width` | limit of the box width | `200` / `'200px'` | `200px` 117 | 118 | ### Global options 119 | 120 | You can add it globally, witch affects all tooltips of your queried objects: 121 | 122 | ``` 123 | 134 | ``` 135 | 136 | ### Custom options 137 | 138 | Or be more specific and _override_ 1 option in 1 tooltip using _data_ attribute: 139 | 140 | ``` 141 |

my title

142 | ``` 143 | 144 | ## Positions 145 | 146 | Simpletooltip has 12 funcional positions, by default goes on top position, but you can choose: `top` `top-left` `left-top` `left` `left-bottom` `bottom-left` `bottom` `bottom-right` `right-bottom` `right` `right-top` `top-right. 147 | 148 | To add the desired position, in that example we'will use attribute `data-simpletooltip-position. 149 | 150 | ``` 151 |
right top
152 | ``` 153 | 154 | ## Themes 155 | 156 | Themes are _packages of options_ you can set up in one place, Simpletooltip comes with 4 default themes, you can choose: `blue` `white` `dark` `gray`. 157 | 158 | To assign a `theme`, configure theme parameter with the theme name: 159 | 160 | ``` 161 | 162 | ``` 163 | 164 | Also you can extend it, imagine a blue theme without border: 165 | 166 | ``` 167 |

blue theme customized

168 | ``` 169 | 170 | ### Creating Themes 171 | 172 | Also you can create your own themes. Imagine you need to repeat continuously 2 schemes in your site and don't want to fill your html code with noisy variables inside data attributes. For that you can use themes attribute. 173 | 174 | ``` 175 | 195 | ``` 196 | 197 | ## Download 198 | 199 | Download the plugin [here](https://github.com/not-only-code/Simpletooltip/zipball/master), also you can access to [GitHub repo](https://github.com/not-only-code/Simpletooltip). 200 | Contribute with ideas, new features, or bugs on [Github Issues](https://github.com/not-only-code/Simpletooltip/issues). 201 | If this plugin helped you, any [donation](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MRNNVK3SDEQKN) will be wellcome. 202 | 203 | 204 | ## Changelog 205 | 206 | **v1.3.0 (11.06.2014)** 207 | 208 | * new: parameters. You can pass some parameters to adjust size, border, colors, animation, arrow size, etc. 209 | * new: color schemes. 4 default configurations you can customize: dark, gray, white, blue. Add your own color scheme. 210 | * tweak: added npm, grunt and bower in order to automatize and build all scripts 211 | * tweak: changed code structure, now based on prototypes. 212 | * tweak: move from css to .less 213 | * tweak: files restructured /src -> /dist 214 | * tweak: new responsive project page (demo) with all new features documented. 215 | * tweak: new logo design 216 | * now available from [jQuery Plugins](http://plugins.jquery.com/) 217 | * some bugfixes and performance issues solved. 218 | 219 | 220 | **v1.2.0 (01.02.2011)** 221 | 222 | * Simpletooltip Logo! 223 | * new 4 color designs: seablue(default), pastelblue, darkgray, lightgray 224 | * all new positions (top, top-right, right-top, right, right-bottom, bottom-right, bottom, bottom-left, left-bottom, left, left-top, top-left) 225 | * new landmark icon design 226 | * optimized code 227 | * changed css structure 228 | * added .js and .css compressed versions 229 | * scrolling bugs fixed 230 | 231 | 232 | **v1.1.0 (03.06.2010)** 233 | 234 | * 7 new positions ( top , right-top , right , right-bottom , bottom, left-bottom, left, left-top) 235 | * icon markup in the target 236 | * short delay to launch 237 | * bugs fixed 238 | 239 | 240 | **v1.0 (19.05.2010)** 241 | 242 | * blue-white color version ( with fine shadow box css made) 243 | * One position: top 244 | * easy implementation only by css 245 | * attribute "title" benefits 246 | * crossbrowser compatible -------------------------------------------------------------------------------- /simple-tooltip.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tooltip", 3 | "title": "Simpletooltip", 4 | "description": "Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily", 5 | "keywords": ["jquery", "plugin", "title", "simple", "tooltip", "simpletoltip"], 6 | "version": "1.3.0", 7 | "author": { 8 | "name": "Carlos Sanz Garcia", 9 | "email": "carlos.sanz@gmail.com", 10 | "url": "http://codingsomething.wordpress.com" 11 | }, 12 | "licenses": [ 13 | { 14 | "type": "GPL-3.0", 15 | "url": "http://opensource.org/licenses/GPL-3.0" 16 | } 17 | ], 18 | "homepage": "http://not-only-code.github.io/Simpletooltip", 19 | "bugs": "https://github.com/not-only-code/Simpletooltip/issues", 20 | "docs": "https://github.com/not-only-code/Simpletooltip", 21 | "download": "https://github.com/not-only-code/Simpletooltip/archive/v1.3.1.zip", 22 | "dependencies": { 23 | "jquery": ">=1.8" 24 | } 25 | } -------------------------------------------------------------------------------- /src/css/simpletooltip.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily 3 | * v1.3.0 4 | * 5 | * 2014 Carlos Sanz Garcia 6 | * Distributed under GPL-3.0 license 7 | * 8 | * http://not-only-code.github.com/Simpletooltip 9 | */ 10 | 11 | // helpers ---------------------------------- 12 | 13 | @import "/bower_components/clearless/mixins/helpers.less"; 14 | 15 | 16 | // Variables -------------------------------- 17 | 18 | @theme-color: #222; 19 | @border-color: (@theme-color - #111); 20 | @text-color: #ccc; 21 | @tooltip-width: 200px; 22 | @padding-height: 6px; 23 | @padding-width: 8px; 24 | @border-width: 2px; 25 | @arrow-width: 6px; 26 | @arrow-position: -((@arrow-width * 2) + @border-width); 27 | @arrow-side-width: round((@arrow-width*3)/4); 28 | @arrow-side-position: -((@arrow-side-width * 2) + @border-width); 29 | 30 | // Tooltip ---------------------------------- 31 | 32 | .simpletooltip { 33 | cursor: pointer; 34 | } 35 | 36 | .simple-tooltip { 37 | position: absolute; 38 | display: block; 39 | width: auto; 40 | max-width: @tooltip-width; 41 | height: auto; 42 | padding: @padding-height @padding-width; 43 | color: @text-color; 44 | font: normal 13px/1.3em 'Helvetica', 'Arial', 'Sans-serif'; 45 | border: solid @border-width @border-color; 46 | background-color: @theme-color; 47 | margin-bottom: 30px; 48 | 49 | .box-shadow(0px 0px 10px fadeout(black, 80%)); 50 | .border-radius(5px); 51 | 52 | z-index: 9999; 53 | 54 | .arrow { 55 | display: block; 56 | width: 0; 57 | height: 0; 58 | position: absolute; 59 | border-width: @arrow-width; 60 | border-style: solid; 61 | border-color: transparent; 62 | } 63 | 64 | // Positions ---------------------------- 65 | 66 | &.top .arrow { 67 | left: 50%; 68 | } 69 | &.left .arrow { 70 | top: 50%; 71 | } 72 | &.bottom .arrow { 73 | left: 50%; 74 | } 75 | &.right .arrow { 76 | top: 50%; 77 | } 78 | } -------------------------------------------------------------------------------- /src/js/simpletooltip.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily 3 | * v1.3.0 4 | * 5 | * 2014 Carlos Sanz Garcia 6 | * Distributed under GPL-3.0 license 7 | * 8 | * http://not-only-code.github.com/Simpletooltip 9 | */ 10 | 11 | (function($) { 12 | "use strict"; 13 | 14 | var Simpletooltip, 15 | $body = null; 16 | 17 | /* 18 | * Simpletooltip: main class definition 19 | * 20 | * @param options (object) 21 | * @this (Simpletooltip) 22 | * 23 | * @return (Simpletooltip) 24 | **/ 25 | Simpletooltip = function(options) { 26 | 27 | if (options === undefined || typeof(options) !== 'object') { 28 | return; 29 | } 30 | 31 | this.$el = options.$el || null; 32 | this.$tooltip = null; 33 | this.$arrow = null; 34 | this.margins = { 35 | border: 6, 36 | top: 15, 37 | right: 15, 38 | bottom: 15, 39 | left: 15 40 | }; 41 | this.settings = {}; 42 | this.themes = {}; 43 | 44 | if (!this.isJqueryObject(this.$el) || this.$el.data().hasOwnProperty('simpletooltipInstanced')) { 45 | return; 46 | } 47 | 48 | this.title = this.$el.attr('title'); 49 | if (this.title === undefined || !this.title.length) { 50 | return; 51 | } 52 | this.$el.attr('title', ''); 53 | 54 | this.setOptions(options.settings); 55 | this.setTooltip(); 56 | this.initialize(); 57 | 58 | this.$el.data('simpletooltip-instanced', '1'); 59 | 60 | return this; 61 | }; 62 | 63 | Simpletooltip.defaults = { 64 | position: 'top', 65 | color: '#DDDDDD', 66 | background_color: '#222222', 67 | border_width: 0, 68 | arrow_width: 6, 69 | padding: { 70 | width: 8, 71 | height: 6 72 | }, 73 | max_width: 200, 74 | fade: true 75 | }; 76 | 77 | Simpletooltip.themes = { 78 | dark: { 79 | color: '#CCCCCC', 80 | background_color: '#222222', 81 | border_color: '#111111', 82 | border_width: 4, 83 | }, 84 | gray: { 85 | color: '#434343', 86 | background_color: '#DCDCDC', 87 | border_color: '#BABABA', 88 | border_width: 4, 89 | }, 90 | white: { 91 | color: '#6D7988', 92 | background_color: '#CCDEF2', 93 | border_color: '#FFFFFF', 94 | border_width: 4, 95 | }, 96 | blue: { 97 | color: '#FFFFFF', 98 | background_color: '#0088BE', 99 | border_color: '#00669C', 100 | border_width: 4, 101 | } 102 | }; 103 | 104 | Simpletooltip.templates = { 105 | tooltip: '

', 106 | arrow: ' ' 107 | }; 108 | 109 | Simpletooltip.prototype.isJqueryObject = function (what) { 110 | return ( what !== null && what !== undefined && typeof(what) === 'object' && what.jquery !== undefined ); 111 | }; 112 | 113 | Simpletooltip.prototype.setTooltip = function () { 114 | 115 | if (this.isJqueryObject(this.$tooltip) && this.isJqueryObject(this.$arrow)) { 116 | return; 117 | } 118 | 119 | this.$tooltip = $(Simpletooltip.templates.tooltip); 120 | this.$tooltip.html(this.title); 121 | this.$tooltip.addClass(this.getAttribute('position')); 122 | this.$arrow = $(Simpletooltip.templates.arrow); 123 | this.$tooltip.append(this.$arrow); 124 | 125 | return this.$tooltip; 126 | }; 127 | 128 | Simpletooltip.prototype.setOptions = function (options) { 129 | 130 | if (options === undefined || typeof(options) !== 'object') { 131 | return; 132 | } 133 | 134 | this.settings = $.extend(Simpletooltip.defaults, options); 135 | 136 | if ( this.settings['themes'] !== undefined && typeof(this.settings.themes) === 'object') { 137 | this.themes = $.extend(Simpletooltip.themes, this.settings.themes); 138 | delete(this.settings.themes); 139 | } 140 | 141 | if (this.themes[this.settings.theme] !== undefined) { 142 | this.settings = $.extend(this.settings, this.themes[this.settings.theme]); 143 | } 144 | }; 145 | 146 | Simpletooltip.prototype.initialize = function() { 147 | 148 | this.$el.on('mouseenter', {that: this}, this.mouseOver); 149 | this.$el.on('mouseleave', {that: this}, this.mouseOut); 150 | 151 | this.$el.attr('title', ''); 152 | }; 153 | 154 | Simpletooltip.prototype.getAttribute = function (attribute_name) { 155 | 156 | var attribute = 'simpletooltip-' + attribute_name.replace('_', '-'), 157 | theme; 158 | 159 | if (this.$el.data(attribute) !== undefined) { 160 | return this.$el.data(attribute); 161 | } 162 | 163 | if ( (theme = this.$el.data('simpletooltip-theme')) !== undefined ) { 164 | if (this.themes[theme] !== undefined && this.themes[theme][attribute_name] !== undefined) { 165 | return this.themes[theme][attribute_name]; 166 | } 167 | } 168 | 169 | if (this.settings[attribute_name] !== undefined) { 170 | return this.settings[attribute_name]; 171 | } 172 | 173 | return false; 174 | }; 175 | 176 | Simpletooltip.prototype.mouseOver = function (event) { 177 | 178 | var that = event.data.that; // DIRTY 179 | 180 | if (that.$tooltip.parent().length) { 181 | return event; 182 | } 183 | 184 | $body.append(that.$tooltip); 185 | 186 | that.$tooltip.hide(); 187 | 188 | that.styleTooltip(); 189 | 190 | if (that.getAttribute('fade')) { 191 | that.$tooltip.delay(180).fadeIn(200); 192 | } else { 193 | that.$tooltip.show(); 194 | } 195 | 196 | return event; 197 | }; 198 | 199 | Simpletooltip.prototype.mouseOut = function (event) { 200 | 201 | var that = event.data.that; // DIRTY 202 | 203 | if (!that.$tooltip.parent().length) { 204 | return event; 205 | } 206 | 207 | // TWEAK THIS 208 | if (!that.$tooltip.css('opacity')) { 209 | that.$tooltip.remove(); 210 | return event; 211 | } 212 | 213 | if (that.getAttribute('fade')) { 214 | that.$tooltip.clearQueue().stop().fadeOut(100, function() { 215 | that.$tooltip.remove(); 216 | }); 217 | } else { 218 | that.$tooltip.remove(); 219 | } 220 | 221 | return event; 222 | }; 223 | 224 | Simpletooltip.prototype.styleTooltip = function () { 225 | 226 | if (!this.isJqueryObject(this.$el) || !this.isJqueryObject(this.$tooltip) ) { 227 | return; 228 | } 229 | 230 | var pos = this.$el.offset(), 231 | background_color = this.getAttribute('background_color'), 232 | border_color = this.getAttribute('border_color'); 233 | 234 | if (!this.isJqueryObject(this.$arrow)) { 235 | this.$arrow = this.$tooltip.find(' > .arrow'); 236 | } 237 | 238 | var border_width = this.getAttribute('border_width'); 239 | 240 | border_width = (!border_color || typeof(border_width) === 'boolean' || border_width === 'none') ? 0 : Number(border_width); 241 | 242 | var arrow_color = (!border_width || !border_color) ? background_color : border_color; 243 | 244 | var arrow_side_width = Math.round((this.settings.arrow_width * 3) / 4), 245 | arrow_position = -parseInt( ((this.settings.arrow_width * 2) + border_width), 10 ), 246 | arrow_side_position = -parseInt( ((arrow_side_width * 2) + border_width), 10 ); 247 | 248 | var tooltip_attributes = { 249 | maxWidth: this.getAttribute('max_width'), 250 | backgroundColor: background_color, 251 | color: this.getAttribute('color'), 252 | borderColor: border_color, 253 | borderWidth: border_width 254 | }; 255 | 256 | switch (this.getAttribute('position')) { 257 | case 'top-right': 258 | pos.top -= parseInt( (this.$tooltip.outerHeight() + this.margins.bottom), 10 ); 259 | pos.left += parseInt( (this.$el.outerWidth() - this.margins.right - this.margins.border), 10 ); 260 | this.$arrow.css({ 261 | left: this.settings.padding.width - border_width, 262 | borderWidth: arrow_side_width, 263 | bottom: arrow_side_position, 264 | borderTopColor: arrow_color, 265 | borderLeftColor: arrow_color 266 | }); 267 | break; 268 | case 'right-top': 269 | pos.top -= parseInt( (this.$tooltip.outerHeight() - this.margins.bottom), 10 ); 270 | pos.left += parseInt( (this.$el.outerWidth() + this.margins.right), 10 ); 271 | this.$arrow.css({ 272 | bottom: this.settings.padding.height - border_width, 273 | borderWidth: arrow_side_width, 274 | left: arrow_side_position, 275 | borderRightColor: arrow_color, 276 | borderBottomColor: arrow_color 277 | }); 278 | break; 279 | case 'right': 280 | pos.top += parseInt( ((this.$el.outerHeight() - this.$tooltip.outerHeight())/2), 10 ); 281 | pos.left += parseInt( (this.$el.outerWidth() + this.margins.right), 10 ); 282 | this.$arrow.css({ 283 | left: arrow_position, 284 | borderRightColor: arrow_color, 285 | marginTop: - this.settings.arrow_width 286 | }); 287 | break; 288 | case 'right-bottom': 289 | pos.top += parseInt( (this.$el.outerHeight() - this.margins.bottom), 10 ); 290 | pos.left += parseInt( (this.$el.outerWidth() + this.margins.right), 10 ); 291 | this.$arrow.css({ 292 | top: this.settings.padding.height - border_width, 293 | borderWidth: arrow_side_width, 294 | left: arrow_side_position, 295 | borderRightColor: arrow_color, 296 | borderTopColor: arrow_color 297 | }); 298 | break; 299 | case 'bottom-right': 300 | pos.top += parseInt( (this.$el.outerHeight() + this.margins.bottom), 10 ); 301 | pos.left += parseInt( (this.$el.outerWidth() - this.margins.right - this.margins.border), 10 ); 302 | this.$arrow.css({ 303 | left: this.settings.padding.width - border_width, 304 | borderWidth: arrow_side_width, 305 | top: arrow_side_position, 306 | borderBottomColor: arrow_color, 307 | borderLeftColor: arrow_color 308 | }); 309 | break; 310 | case 'bottom': 311 | pos.top += parseInt( (this.$el.outerHeight() + this.margins.bottom), 10 ); 312 | pos.left += parseInt( ((this.$el.outerWidth()-this.$tooltip.outerWidth())/2), 10 ); 313 | this.$arrow.css({ 314 | top: arrow_position, 315 | marginLeft: - this.settings.arrow_width, 316 | borderBottomColor: arrow_color 317 | }); 318 | break; 319 | case 'bottom-left': 320 | pos.top += parseInt( (this.$el.outerHeight() + this.margins.bottom), 10 ); 321 | pos.left -= parseInt( (this.$tooltip.outerWidth() - this.margins.left - this.margins.border), 10 ); 322 | this.$arrow.css({ 323 | right: this.settings.padding.width - border_width, 324 | borderWidth: arrow_side_width, 325 | top: arrow_side_position, 326 | borderBottomColor: arrow_color, 327 | borderRightColor: arrow_color 328 | }); 329 | break; 330 | case 'left-bottom': 331 | pos.top += parseInt( (this.$el.outerHeight() - this.margins.bottom), 10 ); 332 | pos.left -= parseInt( (this.$tooltip.outerWidth() + this.margins.left), 10 ); 333 | this.$arrow.css({ 334 | top: this.settings.padding.height - border_width, 335 | borderWidth: arrow_side_width, 336 | right: arrow_side_position, 337 | borderLeftColor: arrow_color, 338 | borderTopColor: arrow_color 339 | }); 340 | break; 341 | case 'left': 342 | pos.top += parseInt( ((this.$el.outerHeight() - this.$tooltip.outerHeight())/2), 10 ) ; 343 | pos.left -= parseInt( (this.$tooltip.outerWidth() + this.margins.left), 10 ); 344 | this.$arrow.css({ 345 | right: arrow_position, 346 | borderLeftColor: arrow_color, 347 | marginTop: -this.settings.arrow_width 348 | }); 349 | break; 350 | case 'left-top': 351 | pos.top -= parseInt( (this.$tooltip.outerHeight() - this.margins.bottom), 10 ); 352 | pos.left -= parseInt( (this.$tooltip.outerWidth() + this.margins.left), 10 ); 353 | this.$arrow.css({ 354 | bottom: this.settings.padding.height - border_width, 355 | borderWidth: arrow_side_width, 356 | right: arrow_side_position, 357 | borderLeftColor: arrow_color, 358 | borderBottomColor: arrow_color 359 | }); 360 | break; 361 | case 'top-left': 362 | pos.top -= parseInt( (this.$tooltip.outerHeight() + this.margins.bottom), 10 ); 363 | pos.left -= parseInt( (this.$tooltip.outerWidth() - this.margins.left), 10 ); 364 | this.$arrow.css({ 365 | right: this.settings.padding.width - border_width, 366 | borderWidth: arrow_side_width, 367 | bottom: arrow_side_position, 368 | borderTopColor: arrow_color, 369 | borderRightColor: arrow_color 370 | }); 371 | break; 372 | // top case 373 | default: 374 | pos.top -= parseInt( (this.$tooltip.outerHeight() + this.margins.top), 10 ); 375 | pos.left += parseInt( ((this.$el.outerWidth()-this.$tooltip.outerWidth())/2), 10 ); 376 | this.$arrow.css({ 377 | bottom: arrow_position, 378 | borderTopColor: arrow_color, 379 | marginLeft: - this.settings.arrow_width 380 | }); 381 | } 382 | 383 | this.$tooltip.css($.extend(tooltip_attributes, { 384 | top: pos.top, 385 | left: pos.left 386 | })); 387 | }; 388 | 389 | /* 390 | * jQuery function definition 391 | * 392 | * @param settings (object) 393 | * 394 | * @return (Array) 395 | **/ 396 | $.fn.simpletooltip = function(settings) { 397 | return this.each(function() { 398 | var $this = $(this); 399 | if (!$this.data().hasOwnProperty('simpletooltipInstanced')) { 400 | var opts = {$el: $this}; 401 | if (settings !== undefined && typeof(settings) === 'object') { 402 | opts.settings = settings; 403 | } 404 | new Simpletooltip(opts); 405 | } 406 | }); 407 | }; 408 | 409 | /* 410 | * initialize automatically the plugin using data attributes 411 | * 412 | * @return (void) 413 | **/ 414 | $(window).on('load', function () { 415 | $body = $('body'); 416 | $('[data-simpletooltip="init"]').each(function() { 417 | $(this).simpletooltip(); 418 | }); 419 | }); 420 | 421 | 422 | })(jQuery); --------------------------------------------------------------------------------