1/* 2 * qTip2 - Pretty powerful tooltips - v2.1.1 3 * http://qtip2.com 4 * 5 * Copyright (c) 2013 Craig Michael Thompson 6 * Released under the MIT, GPL licenses 7 * http://jquery.org/license 8 * 9 * Date: Thu Jul 11 2013 02:15 UTC+0000 10 * Plugins: tips viewport 11 * Styles: basic css3 12 */ 13/*global window: false, jQuery: false, console: false, define: false */ 14 15/* Cache window, document, undefined */ 16(function( window, document, undefined ) { 17 18// Uses AMD or browser globals to create a jQuery plugin. 19(function( factory ) { 20 "use strict"; 21 if(typeof define === 'function' && define.amd) { 22 define(['jquery', 'imagesloaded'], factory); 23 } 24 else if(jQuery && !jQuery.fn.qtip) { 25 factory(jQuery); 26 } 27} 28(function($) { 29 /* This currently causes issues with Safari 6, so for it's disabled */ 30 //"use strict"; // (Dis)able ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ 31 32;// Munge the primitives - Paul Irish tip 33var TRUE = true, 34FALSE = false, 35NULL = null, 36 37// Common variables 38X = 'x', Y = 'y', 39WIDTH = 'width', 40HEIGHT = 'height', 41 42// Positioning sides 43TOP = 'top', 44LEFT = 'left', 45BOTTOM = 'bottom', 46RIGHT = 'right', 47CENTER = 'center', 48 49// Position adjustment types 50FLIP = 'flip', 51FLIPINVERT = 'flipinvert', 52SHIFT = 'shift', 53 54// Shortcut vars 55QTIP, PROTOTYPE, CORNER, CHECKS, 56PLUGINS = {}, 57NAMESPACE = 'qtip', 58ATTR_HAS = 'data-hasqtip', 59ATTR_ID = 'data-qtip-id', 60WIDGET = ['ui-widget', 'ui-tooltip'], 61SELECTOR = '.'+NAMESPACE, 62INACTIVE_EVENTS = 'click dblclick mousedown mouseup mousemove mouseleave mouseenter'.split(' '), 63 64CLASS_FIXED = NAMESPACE+'-fixed', 65CLASS_DEFAULT = NAMESPACE + '-default', 66CLASS_FOCUS = NAMESPACE + '-focus', 67CLASS_HOVER = NAMESPACE + '-hover', 68CLASS_DISABLED = NAMESPACE+'-disabled', 69 70replaceSuffix = '_replacedByqTip', 71oldtitle = 'oldtitle', 72trackingBound; 73 74// Browser detection 75BROWSER = { 76 /* 77 * IE version detection 78 * 79 * Adapted from: http://ajaxian.com/archives/attack-of-the-ie-conditional-comment 80 * Credit to James Padolsey for the original implemntation! 81 */ 82 ie: (function(){ 83 var v = 3, div = document.createElement('div'); 84 while ((div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->')) { 85 if(!div.getElementsByTagName('i')[0]) { break; } 86 } 87 return v > 4 ? v : NaN; 88 }()), 89 90 /* 91 * iOS version detection 92 */ 93 iOS: parseFloat( 94 ('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1]) 95 .replace('undefined', '3_2').replace('_', '.').replace('_', '') 96 ) || FALSE 97}; 98 99;function QTip(target, options, id, attr) { 100 // Elements and ID 101 this.id = id; 102 this.target = target; 103 this.tooltip = NULL; 104 this.elements = elements = { target: target }; 105 106 // Internal constructs 107 this._id = NAMESPACE + '-' + id; 108 this.timers = { img: {} }; 109 this.options = options; 110 this.plugins = {}; 111 112 // Cache object 113 this.cache = cache = { 114 event: {}, 115 target: $(), 116 disabled: FALSE, 117 attr: attr, 118 onTooltip: FALSE, 119 lastClass: '' 120 }; 121 122 // Set the initial flags 123 this.rendered = this.destroyed = this.disabled = this.waiting = 124 this.hiddenDuringWait = this.positioning = this.triggering = FALSE; 125} 126PROTOTYPE = QTip.prototype; 127 128PROTOTYPE.render = function(show) { 129 if(this.rendered || this.destroyed) { return this; } // If tooltip has already been rendered, exit 130 131 var self = this, 132 options = this.options, 133 cache = this.cache, 134 elements = this.elements, 135 text = options.content.text, 136 title = options.content.title, 137 button = options.content.button, 138 posOptions = options.position, 139 namespace = '.'+this._id+' ', 140 deferreds = []; 141 142 // Add ARIA attributes to target 143 $.attr(this.target[0], 'aria-describedby', this._id); 144 145 // Create tooltip element 146 this.tooltip = elements.tooltip = tooltip = $('<div/>', { 147 'id': this._id, 148 'class': [ NAMESPACE, CLASS_DEFAULT, options.style.classes, NAMESPACE + '-pos-' + options.position.my.abbrev() ].join(' '), 149 'width': options.style.width || '', 150 'height': options.style.height || '', 151 'tracking': posOptions.target === 'mouse' && posOptions.adjust.mouse, 152 153 /* ARIA specific attributes */ 154 'role': 'alert', 155 'aria-live': 'polite', 156 'aria-atomic': FALSE, 157 'aria-describedby': this._id + '-content', 158 'aria-hidden': TRUE 159 }) 160 .toggleClass(CLASS_DISABLED, this.disabled) 161 .attr(ATTR_ID, this.id) 162 .data(NAMESPACE, this) 163 .appendTo(posOptions.container) 164 .append( 165 // Create content element 166 elements.content = $('<div />', { 167 'class': NAMESPACE + '-content', 168 'id': this._id + '-content', 169 'aria-atomic': TRUE 170 }) 171 ); 172 173 // Set rendered flag and prevent redundant reposition calls for now 174 this.rendered = -1; 175 this.positioning = TRUE; 176 177 // Create title... 178 if(title) { 179 this._createTitle(); 180 181 // Update title only if its not a callback (called in toggle if so) 182 if(!$.isFunction(title)) { 183 deferreds.push( this._updateTitle(title, FALSE) ); 184 } 185 } 186 187 // Create button 188 if(button) { this._createButton(); } 189 190 // Set proper rendered flag and update content if not a callback function (called in toggle) 191 if(!$.isFunction(text)) { 192 deferreds.push( this._updateContent(text, FALSE) ); 193 } 194 this.rendered = TRUE; 195 196 // Setup widget classes 197 this._setWidget(); 198 199 // Assign passed event callbacks (before plugins!) 200 $.each(options.events, function(name, callback) { 201 $.isFunction(callback) && tooltip.bind( 202 (name === 'toggle' ? ['tooltipshow','tooltiphide'] : ['tooltip'+name]) 203 .join(namespace)+namespace, callback 204 ); 205 }); 206 207 // Initialize 'render' plugins 208 $.each(PLUGINS, function(name) { 209 var instance; 210 if(this.initialize === 'render' && (instance = this(self))) { 211 self.plugins[name] = instance; 212 } 213 }); 214 215 // Assign events 216 this._assignEvents(); 217 218 // When deferreds have completed 219 $.when.apply($, deferreds).then(function() { 220 // tooltiprender event 221 self._trigger('render'); 222 223 // Reset flags 224 self.positioning = FALSE; 225 226 // Show tooltip if not hidden during wait period 227 if(!self.hiddenDuringWait && (options.show.ready || show)) { 228 self.toggle(TRUE, cache.event, FALSE); 229 } 230 self.hiddenDuringWait = FALSE; 231 }); 232 233 // Expose API 234 QTIP.api[this.id] = this; 235 236 return this; 237}; 238 239PROTOTYPE.destroy = function(immediate) { 240 // Set flag the signify destroy is taking place to plugins 241 // and ensure it only gets destroyed once! 242 if(this.destroyed) { return this.target; } 243 244 function process() { 245 if(this.destroyed) { return; } 246 this.destroyed = TRUE; 247 248 var target = this.target, 249 title = target.attr(oldtitle); 250 251 // Destroy tooltip if rendered 252 if(this.rendered) { 253 this.tooltip.stop(1,0).find('*').remove().end().remove(); 254 } 255 256 // Destroy all plugins 257 $.each(this.plugins, function(name) { 258 this.destroy && this.destroy(); 259 }); 260 261 // Clear timers and remove bound events 262 clearTimeout(this.timers.show); 263 clearTimeout(this.timers.hide); 264 this._unassignEvents(); 265 266 // Remove api object and ARIA attributes 267 target.removeData(NAMESPACE).removeAttr(ATTR_ID) 268 .removeAttr('aria-describedby'); 269 270 // Reset old title attribute if removed 271 if(this.options.suppress && title) { 272 target.attr('title', title).removeAttr(oldtitle); 273 } 274 275 // Remove qTip events associated with this API 276 this._unbind(target); 277 278 // Remove ID from used id objects, and delete object references 279 // for better garbage collection and leak protection 280 this.options = this.elements = this.cache = this.timers = 281 this.plugins = this.mouse = NULL; 282 283 // Delete epoxsed API object 284 delete QTIP.api[this.id]; 285 } 286 287 // If an immediate destory is needed 288 if(immediate !== TRUE && this.rendered) { 289 tooltip.one('tooltiphidden', $.proxy(process, this)); 290 !this.triggering && this.hide(); 291 } 292 293 // If we're not in the process of hiding... process 294 else { process.call(this); } 295 296 return this.target; 297}; 298 299;function invalidOpt(a) { 300 return a === NULL || $.type(a) !== 'object'; 301} 302 303function invalidContent(c) { 304 return !( $.isFunction(c) || (c && c.attr) || c.length || ($.type(c) === 'object' && (c.jquery || c.then) )); 305} 306 307// Option object sanitizer 308function sanitizeOptions(opts) { 309 var content, text, ajax, once; 310 311 if(invalidOpt(opts)) { return FALSE; } 312 313 if(invalidOpt(opts.metadata)) { 314 opts.metadata = { type: opts.metadata }; 315 } 316 317 if('content' in opts) { 318 content = opts.content; 319 320 if(invalidOpt(content) || content.jquery || content.done) { 321 content = opts.content = { 322 text: (text = invalidContent(content) ? FALSE : content) 323 }; 324 } 325 else { text = content.text; } 326 327 // DEPRECATED - Old content.ajax plugin functionality 328 // Converts it into the proper Deferred syntax 329 if('ajax' in content) { 330 ajax = content.ajax; 331 once = ajax && ajax.once !== FALSE; 332 delete content.ajax; 333 334 content.text = function(event, api) { 335 var loading = text || $(this).attr(api.options.content.attr) || 'Loading...', 336 337 deferred = $.ajax( 338 $.extend({}, ajax, { context: api }) 339 ) 340 .then(ajax.success, NULL, ajax.error) 341 .then(function(content) { 342 if(content && once) { api.set('content.text', content); } 343 return content; 344 }, 345 function(xhr, status, error) { 346 if(api.destroyed || xhr.status === 0) { return; } 347 api.set('content.text', status + ': ' + error); 348 }); 349 350 return !once ? (api.set('content.text', loading), deferred) : loading; 351 }; 352 } 353 354 if('title' in content) { 355 if(!invalidOpt(content.title)) { 356 content.button = content.title.button; 357 content.title = content.title.text; 358 } 359 360 if(invalidContent(content.title || FALSE)) { 361 content.title = FALSE; 362 } 363 } 364 } 365 366 if('position' in opts && invalidOpt(opts.position)) { 367 opts.position = { my: opts.position, at: opts.position }; 368 } 369 370 if('show' in opts && invalidOpt(opts.show)) { 371 opts.show = opts.show.jquery ? { target: opts.show } : 372 opts.show === TRUE ? { ready: TRUE } : { event: opts.show }; 373 } 374 375 if('hide' in opts && invalidOpt(opts.hide)) { 376 opts.hide = opts.hide.jquery ? { target: opts.hide } : { event: opts.hide }; 377 } 378 379 if('style' in opts && invalidOpt(opts.style)) { 380 opts.style = { classes: opts.style }; 381 } 382 383 // Sanitize plugin options 384 $.each(PLUGINS, function() { 385 this.sanitize && this.sanitize(opts); 386 }); 387 388 return opts; 389} 390 391// Setup builtin .set() option checks 392CHECKS = PROTOTYPE.checks = { 393 builtin: { 394 // Core checks 395 '^id$': function(obj, o, v, prev) { 396 var id = v === TRUE ? QTIP.nextid : v, 397 new_id = NAMESPACE + '-' + id; 398 399 if(id !== FALSE && id.length > 0 && !$('#'+new_id).length) { 400 this._id = new_id; 401 402 if(this.rendered) { 403 this.tooltip[0].id = this._id; 404 this.elements.content[0].id = this._id + '-content'; 405 this.elements.title[0].id = this._id + '-title'; 406 } 407 } 408 else { obj[o] = prev; } 409 }, 410 '^prerender': function(obj, o, v) { 411 v && !this.rendered && this.render(this.options.show.ready); 412 }, 413 414 // Content checks 415 '^content.text$': function(obj, o, v) { 416 this._updateContent(v); 417 }, 418 '^content.attr$': function(obj, o, v, prev) { 419 if(this.options.content.text === this.target.attr(prev)) { 420 this._updateContent( this.target.attr(v) ); 421 } 422 }, 423 '^content.title$': function(obj, o, v) { 424 // Remove title if content is null 425 if(!v) { return this._removeTitle(); } 426 427 // If title isn't already created, create it now and update 428 v && !this.elements.title && this._createTitle(); 429 this._updateTitle(v); 430 }, 431 '^content.button$': function(obj, o, v) { 432 this._updateButton(v); 433 }, 434 '^content.title.(text|button)$': function(obj, o, v) { 435 this.set('content.'+o, v); // Backwards title.text/button compat 436 }, 437 438 // Position checks 439 '^position.(my|at)$': function(obj, o, v){ 440 'string' === typeof v && (obj[o] = new CORNER(v, o === 'at')); 441 }, 442 '^position.container$': function(obj, o, v){ 443 this.tooltip.appendTo(v); 444 }, 445 446 // Show checks 447 '^show.ready$': function(obj, o, v) { 448 v && (!this.rendered && this.render(TRUE) || this.toggle(TRUE)); 449 }, 450 451 // Style checks 452 '^style.classes$': function(obj, o, v, p) { 453 this.tooltip.removeClass(p).addClass(v); 454 }, 455 '^style.width|height': function(obj, o, v) { 456 this.tooltip.css(o, v); 457 }, 458 '^style.widget|content.title': function() { 459 this._setWidget(); 460 }, 461 '^style.def': function(obj, o, v) { 462 this.tooltip.toggleClass(CLASS_DEFAULT, !!v); 463 }, 464 465 // Events check 466 '^events.(render|show|move|hide|focus|blur)$': function(obj, o, v) { 467 tooltip[($.isFunction(v) ? '' : 'un') + 'bind']('tooltip'+o, v); 468 }, 469 470 // Properties which require event reassignment 471 '^(show|hide|position).(event|target|fixed|inactive|leave|distance|viewport|adjust)': function() { 472 var posOptions = this.options.position; 473 474 // Set tracking flag 475 tooltip.attr('tracking', posOptions.target === 'mouse' && posOptions.adjust.mouse); 476 477 // Reassign events 478 this._unassignEvents(); 479 this._assignEvents(); 480 } 481 } 482}; 483 484// Dot notation converter 485function convertNotation(options, notation) { 486 var i = 0, obj, option = options, 487 488 // Split notation into array 489 levels = notation.split('.'); 490 491 // Loop through 492 while( option = option[ levels[i++] ] ) { 493 if(i < levels.length) { obj = option; } 494 } 495 496 return [obj || options, levels.pop()]; 497} 498 499PROTOTYPE.get = function(notation) { 500 if(this.destroyed) { return this; } 501 502 var o = convertNotation(this.options, notation.toLowerCase()), 503 result = o[0][ o[1] ]; 504 505 return result.precedance ? result.string() : result; 506}; 507 508function setCallback(notation, args) { 509 var category, rule, match; 510 511 for(category in this.checks) { 512 for(rule in this.checks[category]) { 513 if(match = (new RegExp(rule, 'i')).exec(notation)) { 514 args.push(match); 515 516 if(category === 'builtin' || this.plugins[category]) { 517 this.checks[category][rule].apply( 518 this.plugins[category] || this, args 519 ); 520 } 521 } 522 } 523 } 524} 525 526var rmove = /^position\.(my|at|adjust|target|container|viewport)|style|content|show\.ready/i, 527 rrender = /^prerender|show\.ready/i; 528 529PROTOTYPE.set = function(option, value) { 530 if(this.destroyed) { return this; } 531 532 var rendered = this.rendered, 533 reposition = FALSE, 534 options = this.options, 535 checks = this.checks, 536 name; 537 538 // Convert singular option/value pair into object form 539 if('string' === typeof option) { 540 name = option; option = {}; option[name] = value; 541 } 542 else { option = $.extend({}, option); } 543 544 // Set all of the defined options to their new values 545 $.each(option, function(notation, value) { 546 if(!rendered && !rrender.test(notation)) { 547 delete option[notation]; return; 548 } 549 550 // Set new obj value 551 var obj = convertNotation(options, notation.toLowerCase()), previous; 552 previous = obj[0][ obj[1] ]; 553 obj[0][ obj[1] ] = value && value.nodeType ? $(value) : value; 554 555 // Also check if we need to reposition 556 reposition = rmove.test(notation) || reposition; 557 558 // Set the new params for the callback 559 option[notation] = [obj[0], obj[1], value, previous]; 560 }); 561 562 // Re-sanitize options 563 sanitizeOptions(options); 564 565 /* 566 * Execute any valid callbacks for the set options 567 * Also set positioning flag so we don't get loads of redundant repositioning calls. 568 */ 569 this.positioning = TRUE; 570 $.each(option, $.proxy(setCallback, this)); 571 this.positioning = FALSE; 572 573 // Update position if needed 574 if(this.rendered && this.tooltip[0].offsetWidth > 0 && reposition) { 575 this.reposition( options.position.target === 'mouse' ? NULL : this.cache.event ); 576 } 577 578 return this; 579}; 580 581;PROTOTYPE._update = function(content, element, reposition) { 582 var self = this, 583 cache = this.cache; 584 585 // Make sure tooltip is rendered and content is defined. If not return 586 if(!this.rendered || !content) { return FALSE; } 587 588 // Use function to parse content 589 if($.isFunction(content)) { 590 content = content.call(this.elements.target, cache.event, this) || ''; 591 } 592 593 // Handle deferred content 594 if($.isFunction(content.then)) { 595 cache.waiting = TRUE; 596 return content.then(function(c) { 597 cache.waiting = FALSE; 598 return self._update(c, element); 599 }, NULL, function(e) { 600 return self._update(e, element); 601 }); 602 } 603 604 // If content is null... return false 605 if(content === FALSE || (!content && content !== '')) { return FALSE; } 606 607 // Append new content if its a DOM array and show it if hidden 608 if(content.jquery && content.length > 0) { 609 element.children().detach().end().append( content.css({ display: 'block' }) ); 610 } 611 612 // Content is a regular string, insert the new content 613 else { element.html(content); } 614 615 // If imagesLoaded is included, ensure images have loaded and return promise 616 cache.waiting = TRUE; 617 618 return ( $.fn.imagesLoaded ? element.imagesLoaded() : $.Deferred().resolve($([])) ) 619 .done(function(images) { 620 cache.waiting = FALSE; 621 622 // Reposition if rendered 623 if(images.length && self.rendered && self.tooltip[0].offsetWidth > 0) { 624 self.reposition(cache.event, !images.length); 625 } 626 }) 627 .promise(); 628}; 629 630PROTOTYPE._updateContent = function(content, reposition) { 631 this._update(content, this.elements.content, reposition); 632}; 633 634PROTOTYPE._updateTitle = function(content, reposition) { 635 if(this._update(content, this.elements.title, reposition) === FALSE) { 636 this._removeTitle(FALSE); 637 } 638}; 639 640PROTOTYPE._createTitle = function() 641{ 642 var elements = this.elements, 643 id = this._id+'-title'; 644 645 // Destroy previous title element, if present 646 if(elements.titlebar) { this._removeTitle(); } 647 648 // Create title bar and title elements 649 elements.titlebar = $('<div />', { 650 'class': NAMESPACE + '-titlebar ' + (this.options.style.widget ? createWidgetClass('header') : '') 651 }) 652 .append( 653 elements.title = $('<div />', { 654 'id': id, 655 'class': NAMESPACE + '-title', 656 'aria-atomic': TRUE 657 }) 658 ) 659 .insertBefore(elements.content) 660 661 // Button-specific events 662 .delegate('.qtip-close', 'mousedown keydown mouseup keyup mouseout', function(event) { 663 $(this).toggleClass('ui-state-active ui-state-focus', event.type.substr(-4) === 'down'); 664 }) 665 .delegate('.qtip-close', 'mouseover mouseout', function(event){ 666 $(this).toggleClass('ui-state-hover', event.type === 'mouseover'); 667 }); 668 669 // Create button if enabled 670 if(this.options.content.button) { this._createButton(); } 671}; 672 673PROTOTYPE._removeTitle = function(reposition) 674{ 675 var elements = this.elements; 676 677 if(elements.title) { 678 elements.titlebar.remove(); 679 elements.titlebar = elements.title = elements.button = NULL; 680 681 // Reposition if enabled 682 if(reposition !== FALSE) { this.reposition(); } 683 } 684}; 685 686;PROTOTYPE.reposition = function(event, effect) { 687 if(!this.rendered || this.positioning || this.destroyed) { return this; } 688 689 // Set positioning flag 690 this.positioning = TRUE; 691 692 var cache = this.cache, 693 tooltip = this.tooltip, 694 posOptions = this.options.position, 695 target = posOptions.target, 696 my = posOptions.my, 697 at = posOptions.at, 698 viewport = posOptions.viewport, 699 container = posOptions.container, 700 adjust = posOptions.adjust, 701 method = adjust.method.split(' '), 702 elemWidth = tooltip.outerWidth(FALSE), 703 elemHeight = tooltip.outerHeight(FALSE), 704 targetWidth = 0, 705 targetHeight = 0, 706 type = tooltip.css('position'), 707 position = { left: 0, top: 0 }, 708 visible = tooltip[0].offsetWidth > 0, 709 isScroll = event && event.type === 'scroll', 710 win = $(window), 711 doc = container[0].ownerDocument, 712 mouse = this.mouse, 713 pluginCalculations, offset; 714 715 // Check if absolute position was passed 716 if($.isArray(target) && target.length === 2) { 717 // Force left top and set position 718 at = { x: LEFT, y: TOP }; 719 position = { left: target[0], top: target[1] }; 720 } 721 722 // Check if mouse was the target 723 else if(target === 'mouse' && ((event && event.pageX) || cache.event.pageX)) { 724 // Force left top to allow flipping 725 at = { x: LEFT, y: TOP }; 726 727 // Use cached event if one isn't available for positioning 728 event = mouse && mouse.pageX && (adjust.mouse || !event || !event.pageX) ? mouse : 729 (event && (event.type === 'resize' || event.type === 'scroll') ? cache.event : 730 event && event.pageX && event.type === 'mousemove' ? event : 731 (!adjust.mouse || this.options.show.distance) && cache.origin && cache.origin.pageX ? cache.origin : 732 event) || event || cache.event || mouse || {}; 733 734 // Calculate body and container offset and take them into account below 735 if(type !== 'static') { position = container.offset(); } 736 if(doc.body.offsetWidth !== (window.innerWidth || doc.documentElement.clientWidth)) { offset = $(doc.body).offset(); } 737 738 // Use event coordinates for position 739 position = { 740 left: event.pageX - position.left + (offset && offset.left || 0), 741 top: event.pageY - position.top + (offset && offset.top || 0) 742 }; 743 744 // Scroll events are a pain, some browsers 745 if(adjust.mouse && isScroll) { 746 position.left -= mouse.scrollX - win.scrollLeft(); 747 position.top -= mouse.scrollY - win.scrollTop(); 748 } 749 } 750 751 // Target wasn't mouse or absolute... 752 else { 753 // Check if event targetting is being used 754 if(target === 'event' && event && event.target && event.type !== 'scroll' && event.type !== 'resize') { 755 cache.target = $(event.target); 756 } 757 else if(target !== 'event'){ 758 cache.target = $(target.jquery ? target : elements.target); 759 } 760 target = cache.target; 761 762 // Parse the target into a jQuery object and make sure there's an element present 763 target = $(target).eq(0); 764 if(target.length === 0) { return this; } 765 766 // Check if window or document is the target 767 else if(target[0] === document || target[0] === window) { 768 targetWidth = BROWSER.iOS ? window.innerWidth : target.width(); 769 targetHeight = BROWSER.iOS ? window.innerHeight : target.height(); 770 771 if(target[0] === window) { 772 position = { 773 top: (viewport || target).scrollTop(), 774 left: (viewport || target).scrollLeft() 775 }; 776 } 777 } 778 779 // Check if the target is an <AREA> element 780 else if(PLUGINS.imagemap && target.is('area')) { 781 pluginCalculations = PLUGINS.imagemap(this, target, at, PLUGINS.viewport ? method : FALSE); 782 } 783 784 // Check if the target is an SVG element 785 else if(PLUGINS.svg && target[0].ownerSVGElement) { 786 pluginCalculations = PLUGINS.svg(this, target, at, PLUGINS.viewport ? method : FALSE); 787 } 788 789 // Otherwise use regular jQuery methods 790 else { 791 targetWidth = target.outerWidth(FALSE); 792 targetHeight = target.outerHeight(FALSE); 793 position = target.offset(); 794 } 795 796 // Parse returned plugin values into proper variables 797 if(pluginCalculations) { 798 targetWidth = pluginCalculations.width; 799 targetHeight = pluginCalculations.height; 800 offset = pluginCalculations.offset; 801 position = pluginCalculations.position; 802 } 803 804 // Adjust position to take into account offset parents 805 position = this.reposition.offset(target, position, container); 806 807 // Adjust for position.fixed tooltips (and also iOS scroll bug in v3.2-4.0 & v4.3-4.3.2) 808 if((BROWSER.iOS > 3.1 && BROWSER.iOS < 4.1) || 809 (BROWSER.iOS >= 4.3 && BROWSER.iOS < 4.33) || 810 (!BROWSER.iOS && type === 'fixed') 811 ){ 812 position.left -= win.scrollLeft(); 813 position.top -= win.scrollTop(); 814 } 815 816 // Adjust position relative to target 817 if(!pluginCalculations || (pluginCalculations && pluginCalculations.adjustable !== FALSE)) { 818 position.left += at.x === RIGHT ? targetWidth : at.x === CENTER ? targetWidth / 2 : 0; 819 position.top += at.y === BOTTOM ? targetHeight : at.y === CENTER ? targetHeight / 2 : 0; 820 } 821 } 822 823 // Adjust position relative to tooltip 824 position.left += adjust.x + (my.x === RIGHT ? -elemWidth : my.x === CENTER ? -elemWidth / 2 : 0); 825 position.top += adjust.y + (my.y === BOTTOM ? -elemHeight : my.y === CENTER ? -elemHeight / 2 : 0); 826 827 // Use viewport adjustment plugin if enabled 828 if(PLUGINS.viewport) { 829 position.adjusted = PLUGINS.viewport( 830 this, position, posOptions, targetWidth, targetHeight, elemWidth, elemHeight 831 ); 832 833 // Apply offsets supplied by positioning plugin (if used) 834 if(offset && position.adjusted.left) { position.left += offset.left; } 835 if(offset && position.adjusted.top) { position.top += offset.top; } 836 } 837 838 // Viewport adjustment is disabled, set values to zero 839 else { position.adjusted = { left: 0, top: 0 }; } 840 841 // tooltipmove event 842 if(!this._trigger('move', [position, viewport.elem || viewport], event)) { return this; } 843 delete position.adjusted; 844 845 // If effect is disabled, target it mouse, no animation is defined or positioning gives NaN out, set CSS directly 846 if(effect === FALSE || !visible || isNaN(position.left) || isNaN(position.top) || target === 'mouse' || !$.isFunction(posOptions.effect)) { 847 tooltip.css(position); 848 } 849 850 // Use custom function if provided 851 else if($.isFunction(posOptions.effect)) { 852 posOptions.effect.call(tooltip, this, $.extend({}, position)); 853 tooltip.queue(function(next) { 854 // Reset attributes to avoid cross-browser rendering bugs 855 $(this).css({ opacity: '', height: '' }); 856 if(BROWSER.ie) { this.style.removeAttribute('filter'); } 857 858 next(); 859 }); 860 } 861 862 // Set positioning flag 863 this.positioning = FALSE; 864 865 return this; 866}; 867 868// Custom (more correct for qTip!) offset calculator 869PROTOTYPE.reposition.offset = function(elem, pos, container) { 870 if(!container[0]) { return pos; } 871 872 var ownerDocument = $(elem[0].ownerDocument), 873 quirks = !!BROWSER.ie && document.compatMode !== 'CSS1Compat', 874 parent = container[0], 875 scrolled, position, parentOffset, overflow; 876 877 function scroll(e, i) { 878 pos.left += i * e.scrollLeft(); 879 pos.top += i * e.scrollTop(); 880 } 881 882 // Compensate for non-static containers offset 883 do { 884 if((position = $.css(parent, 'position')) !== 'static') { 885 if(position === 'fixed') { 886 parentOffset = parent.getBoundingClientRect(); 887 scroll(ownerDocument, -1); 888 } 889 else { 890 parentOffset = $(parent).position(); 891 parentOffset.left += (parseFloat($.css(parent, 'borderLeftWidth')) || 0); 892 parentOffset.top += (parseFloat($.css(parent, 'borderTopWidth')) || 0); 893 } 894 895 pos.left -= parentOffset.left + (parseFloat($.css(parent, 'marginLeft')) || 0); 896 pos.top -= parentOffset.top + (parseFloat($.css(parent, 'marginTop')) || 0); 897 898 // If this is the first parent element with an overflow of "scroll" or "auto", store it 899 if(!scrolled && (overflow = $.css(parent, 'overflow')) !== 'hidden' && overflow !== 'visible') { scrolled = $(parent); } 900 } 901 } 902 while((parent = parent.offsetParent)); 903 904 // Compensate for containers scroll if it also has an offsetParent (or in IE quirks mode) 905 if(scrolled && (scrolled[0] !== ownerDocument[0] || quirks)) { 906 scroll(scrolled, 1); 907 } 908 909 return pos; 910}; 911 912// Corner class 913var C = (CORNER = PROTOTYPE.reposition.Corner = function(corner, forceY) { 914 corner = ('' + corner).replace(/([A-Z])/, ' $1').replace(/middle/gi, CENTER).toLowerCase(); 915 this.x = (corner.match(/left|right/i) || corner.match(/center/) || ['inherit'])[0].toLowerCase(); 916 this.y = (corner.match(/top|bottom|center/i) || ['inherit'])[0].toLowerCase(); 917 this.forceY = !!forceY; 918 919 var f = corner.charAt(0); 920 this.precedance = (f === 't' || f === 'b' ? Y : X); 921}).prototype; 922 923C.invert = function(z, center) { 924 this[z] = this[z] === LEFT ? RIGHT : this[z] === RIGHT ? LEFT : center || this[z]; 925}; 926 927C.string = function() { 928 var x = this.x, y = this.y; 929 return x === y ? x : this.precedance === Y || (this.forceY && y !== 'center') ? y+' '+x : x+' '+y; 930}; 931 932C.abbrev = function() { 933 var result = this.string().split(' '); 934 return result[0].charAt(0) + (result[1] && result[1].charAt(0) || ''); 935}; 936 937C.clone = function() { 938 return new CORNER( this.string(), this.forceY ); 939};; 940PROTOTYPE.toggle = function(state, event) { 941 var cache = this.cache, 942 options = this.options, 943 tooltip = this.tooltip; 944 945 // Try to prevent flickering when tooltip overlaps show element 946 if(event) { 947 if((/over|enter/).test(event.type) && (/out|leave/).test(cache.event.type) && 948 options.show.target.add(event.target).length === options.show.target.length && 949 tooltip.has(event.relatedTarget).length) { 950 return this; 951 } 952 953 // Cache event 954 cache.event = $.extend({}, event); 955 } 956 957 // If we're currently waiting and we've just hidden... stop it 958 this.waiting && !state && (this.hiddenDuringWait = TRUE); 959 960 // Render the tooltip if showing and it isn't already 961 if(!this.rendered) { return state ? this.render(1) : this; } 962 else if(this.destroyed || this.disabled) { return this; } 963 964 var type = state ? 'show' : 'hide', 965 opts = this.options[type], 966 otherOpts = this.options[ !state ? 'show' : 'hide' ], 967 posOptions = this.options.position, 968 contentOptions = this.options.content, 969 width = this.tooltip.css('width'), 970 visible = this.tooltip[0].offsetWidth > 0, 971 animate = state || opts.target.length === 1, 972 sameTarget = !event || opts.target.length < 2 || cache.target[0] === event.target, 973 identicalState, allow, showEvent, delay; 974 975 // Detect state if valid one isn't provided 976 if((typeof state).search('boolean|number')) { state = !visible; } 977 978 // Check if the tooltip is in an identical state to the new would-be state 979 identicalState = !tooltip.is(':animated') && visible === state && sameTarget; 980 981 // Fire tooltip(show/hide) event and check if destroyed 982 allow = !identicalState ? !!this._trigger(type, [90]) : NULL; 983 984 // If the user didn't stop the method prematurely and we're showing the tooltip, focus it 985 if(allow !== FALSE && state) { this.focus(event); } 986 987 // If the state hasn't changed or the user stopped it, return early 988 if(!allow || identicalState) { return this; } 989 990 // Set ARIA hidden attribute 991 $.attr(tooltip[0], 'aria-hidden', !!!state); 992 993 // Execute state specific properties 994 if(state) { 995 // Store show origin coordinates 996 cache.origin = $.extend({}, this.mouse); 997 998 // Update tooltip content & title if it's a dynamic function 999 if($.isFunction(contentOptions.text)) { this._updateContent(contentOptions.text, FALSE); } 1000 if($.isFunction(contentOptions.title)) { this._updateTitle(contentOptions.title, FALSE); } 1001 1002 // Cache mousemove events for positioning purposes (if not already tracking) 1003 if(!trackingBound && posOptions.target === 'mouse' && posOptions.adjust.mouse) { 1004 $(document).bind('mousemove.'+NAMESPACE, this._storeMouse); 1005 trackingBound = TRUE; 1006 } 1007 1008 // Update the tooltip position (set width first to prevent viewport/max-width issues) 1009 if(!width) { tooltip.css('width', tooltip.outerWidth(FALSE)); } 1010 this.reposition(event, arguments[2]); 1011 if(!width) { tooltip.css('width', ''); } 1012 1013 // Hide other tooltips if tooltip is solo 1014 if(!!opts.solo) { 1015 (typeof opts.solo === 'string' ? $(opts.solo) : $(SELECTOR, opts.solo)) 1016 .not(tooltip).not(opts.target).qtip('hide', $.Event('tooltipsolo')); 1017 } 1018 } 1019 else { 1020 // Clear show timer if we're hiding 1021 clearTimeout(this.timers.show); 1022 1023 // Remove cached origin on hide 1024 delete cache.origin; 1025 1026 // Remove mouse tracking event if not needed (all tracking qTips are hidden) 1027 if(trackingBound && !$(SELECTOR+'[tracking="true"]:visible', opts.solo).not(tooltip).length) { 1028 $(document).unbind('mousemove.'+NAMESPACE); 1029 trackingBound = FALSE; 1030 } 1031 1032 // Blur the tooltip 1033 this.blur(event); 1034 } 1035 1036 // Define post-animation, state specific properties 1037 after = $.proxy(function() { 1038 if(state) { 1039 // Prevent antialias from disappearing in IE by removing filter 1040 if(BROWSER.ie) { tooltip[0].style.removeAttribute('filter'); } 1041 1042 // Remove overflow setting to prevent tip bugs 1043 tooltip.css('overflow', ''); 1044 1045 // Autofocus elements if enabled 1046 if('string' === typeof opts.autofocus) { 1047 $(this.options.show.autofocus, tooltip).focus(); 1048 } 1049 1050 // If set, hide tooltip when inactive for delay period 1051 this.options.show.target.trigger('qtip-'+this.id+'-inactive'); 1052 } 1053 else { 1054 // Reset CSS states 1055 tooltip.css({ 1056 display: '', 1057 visibility: '', 1058 opacity: '', 1059 left: '', 1060 top: '' 1061 }); 1062 } 1063 1064 // tooltipvisible/tooltiphidden events 1065 this._trigger(state ? 'visible' : 'hidden'); 1066 }, this); 1067 1068 // If no effect type is supplied, use a simple toggle 1069 if(opts.effect === FALSE || animate === FALSE) { 1070 tooltip[ type ](); 1071 after(); 1072 } 1073 1074 // Use custom function if provided 1075 else if($.isFunction(opts.effect)) { 1076 tooltip.stop(1, 1); 1077 opts.effect.call(tooltip, this); 1078 tooltip.queue('fx', function(n) { 1079 after(); n(); 1080 }); 1081 } 1082 1083 // Use basic fade function by default 1084 else { tooltip.fadeTo(90, state ? 1 : 0, after); } 1085 1086 // If inactive hide method is set, active it 1087 if(state) { opts.target.trigger('qtip-'+this.id+'-inactive'); } 1088 1089 return this; 1090}; 1091 1092PROTOTYPE.show = function(event) { return this.toggle(TRUE, event); }; 1093 1094PROTOTYPE.hide = function(event) { return this.toggle(FALSE, event); }; 1095 1096;PROTOTYPE.focus = function(event) { 1097 if(!this.rendered || this.destroyed) { return this; } 1098 1099 var qtips = $(SELECTOR), 1100 tooltip = this.tooltip, 1101 curIndex = parseInt(tooltip[0].style.zIndex, 10), 1102 newIndex = QTIP.zindex + qtips.length, 1103 focusedElem; 1104 1105 // Only update the z-index if it has changed and tooltip is not already focused 1106 if(!tooltip.hasClass(CLASS_FOCUS)) { 1107 // tooltipfocus event 1108 if(this._trigger('focus', [newIndex], event)) { 1109 // Only update z-index's if they've changed 1110 if(curIndex !== newIndex) { 1111 // Reduce our z-index's and keep them properly ordered 1112 qtips.each(function() { 1113 if(this.style.zIndex > curIndex) { 1114 this.style.zIndex = this.style.zIndex - 1; 1115 } 1116 }); 1117 1118 // Fire blur event for focused tooltip 1119 qtips.filter('.' + CLASS_FOCUS).qtip('blur', event); 1120 } 1121 1122 // Set the new z-index 1123 tooltip.addClass(CLASS_FOCUS)[0].style.zIndex = newIndex; 1124 } 1125 } 1126 1127 return this; 1128}; 1129 1130PROTOTYPE.blur = function(event) { 1131 if(!this.rendered || this.destroyed) { return this; } 1132 1133 // Set focused status to FALSE 1134 this.tooltip.removeClass(CLASS_FOCUS); 1135 1136 // tooltipblur event 1137 this._trigger('blur', [ this.tooltip.css('zIndex') ], event); 1138 1139 return this; 1140}; 1141 1142;PROTOTYPE.disable = function(state) { 1143 if(this.destroyed) { return this; } 1144 1145 if('boolean' !== typeof state) { 1146 state = !(this.tooltip.hasClass(CLASS_DISABLED) || this.disabled); 1147 } 1148 1149 if(this.rendered) { 1150 this.tooltip.toggleClass(CLASS_DISABLED, state) 1151 .attr('aria-disabled', state); 1152 } 1153 1154 this.disabled = !!state; 1155 1156 return this; 1157}; 1158 1159PROTOTYPE.enable = function() { return this.disable(FALSE); }; 1160 1161;PROTOTYPE._createButton = function() 1162{ 1163 var self = this, 1164 elements = this.elements, 1165 tooltip = elements.tooltip, 1166 button = this.options.content.button, 1167 isString = typeof button === 'string', 1168 close = isString ? button : 'Close tooltip'; 1169 1170 if(elements.button) { elements.button.remove(); } 1171 1172 // Use custom button if one was supplied by user, else use default 1173 if(button.jquery) { 1174 elements.button = button; 1175 } 1176 else { 1177 elements.button = $('<a />', { 1178 'class': 'qtip-close ' + (this.options.style.widget ? '' : NAMESPACE+'-icon'), 1179 'title': close, 1180 'aria-label': close 1181 }) 1182 .prepend( 1183 $('<span />', { 1184 'class': 'ui-icon ui-icon-close', 1185 'html': '×' 1186 }) 1187 ); 1188 } 1189 1190 // Create button and setup attributes 1191 elements.button.appendTo(elements.titlebar || tooltip) 1192 .attr('role', 'button') 1193 .click(function(event) { 1194 if(!tooltip.hasClass(CLASS_DISABLED)) { self.hide(event); } 1195 return FALSE; 1196 }); 1197}; 1198 1199PROTOTYPE._updateButton = function(button) 1200{ 1201 // Make sure tooltip is rendered and if not, return 1202 if(!this.rendered) { return FALSE; } 1203 1204 var elem = this.elements.button; 1205 if(button) { this._createButton(); } 1206 else { elem.remove(); } 1207}; 1208 1209;// Widget class creator 1210function createWidgetClass(cls) { 1211 return WIDGET.concat('').join(cls ? '-'+cls+' ' : ' '); 1212} 1213 1214// Widget class setter method 1215PROTOTYPE._setWidget = function() 1216{ 1217 var on = this.options.style.widget, 1218 elements = this.elements, 1219 tooltip = elements.tooltip, 1220 disabled = tooltip.hasClass(CLASS_DISABLED); 1221 1222 tooltip.removeClass(CLASS_DISABLED); 1223 CLASS_DISABLED = on ? 'ui-state-disabled' : 'qtip-disabled'; 1224 tooltip.toggleClass(CLASS_DISABLED, disabled); 1225 1226 tooltip.toggleClass('ui-helper-reset '+createWidgetClass(), on).toggleClass(CLASS_DEFAULT, this.options.style.def && !on); 1227 1228 if(elements.content) { 1229 elements.content.toggleClass( createWidgetClass('content'), on); 1230 } 1231 if(elements.titlebar) { 1232 elements.titlebar.toggleClass( createWidgetClass('header'), on); 1233 } 1234 if(elements.button) { 1235 elements.button.toggleClass(NAMESPACE+'-icon', !on); 1236 } 1237};;function showMethod(event) { 1238 if(this.tooltip.hasClass(CLASS_DISABLED)) { return FALSE; } 1239 1240 // Clear hide timers 1241 clearTimeout(this.timers.show); 1242 clearTimeout(this.timers.hide); 1243 1244 // Start show timer 1245 var callback = $.proxy(function(){ this.toggle(TRUE, event); }, this); 1246 if(this.options.show.delay > 0) { 1247 this.timers.show = setTimeout(callback, this.options.show.delay); 1248 } 1249 else{ callback(); } 1250} 1251 1252function hideMethod(event) { 1253 if(this.tooltip.hasClass(CLASS_DISABLED)) { return FALSE; } 1254 1255 // Check if new target was actually the tooltip element 1256 var relatedTarget = $(event.relatedTarget), 1257 ontoTooltip = relatedTarget.closest(SELECTOR)[0] === this.tooltip[0], 1258 ontoTarget = relatedTarget[0] === this.options.show.target[0]; 1259 1260 // Clear timers and stop animation queue 1261 clearTimeout(this.timers.show); 1262 clearTimeout(this.timers.hide); 1263 1264 // Prevent hiding if tooltip is fixed and event target is the tooltip. 1265 // Or if mouse positioning is enabled and cursor momentarily overlaps 1266 if(this !== relatedTarget[0] && 1267 (this.options.position.target === 'mouse' && ontoTooltip) || 1268 (this.options.hide.fixed && ( 1269 (/mouse(out|leave|move)/).test(event.type) && (ontoTooltip || ontoTarget)) 1270 )) 1271 { 1272 try { 1273 event.preventDefault(); 1274 event.stopImmediatePropagation(); 1275 } catch(e) {} 1276 1277 return; 1278 } 1279 1280 // If tooltip has displayed, start hide timer 1281 var callback = $.proxy(function(){ this.toggle(FALSE, event); }, this); 1282 if(this.options.hide.delay > 0) { 1283 this.timers.hide = setTimeout(callback, this.options.hide.delay); 1284 } 1285 else{ callback(); } 1286} 1287 1288function inactiveMethod(event) { 1289 if(this.tooltip.hasClass(CLASS_DISABLED) || !this.options.hide.inactive) { return FALSE; } 1290 1291 // Clear timer 1292 clearTimeout(this.timers.inactive); 1293 this.timers.inactive = setTimeout( 1294 $.proxy(function(){ this.hide(event); }, this), this.options.hide.inactive 1295 ); 1296} 1297 1298function repositionMethod(event) { 1299 if(this.rendered && this.tooltip[0].offsetWidth > 0) { this.reposition(event); } 1300} 1301 1302// Store mouse coordinates 1303PROTOTYPE._storeMouse = function(event) { 1304 this.mouse = { 1305 pageX: event.pageX, 1306 pageY: event.pageY, 1307 type: 'mousemove', 1308 scrollX: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft, 1309 scrollY: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop 1310 }; 1311}; 1312 1313// Bind events 1314PROTOTYPE._bind = function(targets, events, method, suffix, context) { 1315 var ns = '.' + this._id + (suffix ? '-'+suffix : ''); 1316 events.length && $(targets).bind( 1317 (events.split ? events : events.join(ns + ' ')) + ns, 1318 $.proxy(method, context || this) 1319 ); 1320}; 1321PROTOTYPE._unbind = function(targets, suffix) { 1322 $(targets).unbind('.' + this._id + (suffix ? '-'+suffix : '')); 1323}; 1324 1325// Apply common event handlers using delegate (avoids excessive .bind calls!) 1326var ns = '.'+NAMESPACE; 1327function delegate(selector, events, method) { 1328 $(document.body).delegate(selector, 1329 (events.split ? events : events.join(ns + ' ')) + ns, 1330 function() { 1331 var api = QTIP.api[ $.attr(this, ATTR_ID) ]; 1332 api && !api.disabled && method.apply(api, arguments); 1333 } 1334 ); 1335} 1336 1337$(function() { 1338 delegate(SELECTOR, ['mouseenter', 'mouseleave'], function(event) { 1339 var state = event.type === 'mouseenter', 1340 tooltip = $(event.currentTarget), 1341 target = $(event.relatedTarget || event.target), 1342 options = this.options; 1343 1344 // On mouseenter... 1345 if(state) { 1346 // Focus the tooltip on mouseenter (z-index stacking) 1347 this.focus(event); 1348 1349 // Clear hide timer on tooltip hover to prevent it from closing 1350 tooltip.hasClass(CLASS_FIXED) && !tooltip.hasClass(CLASS_DISABLED) && clearTimeout(this.timers.hide); 1351 } 1352 1353 // On mouseleave... 1354 else { 1355 // Hide when we leave the tooltip and not onto the show target (if a hide event is set) 1356 if(options.position.target === 'mouse' && options.hide.event && 1357 options.show.target && !target.closest(options.show.target[0]).length) { 1358 this.hide(event); 1359 } 1360 } 1361 1362 // Add hover class 1363 tooltip.toggleClass(CLASS_HOVER, state); 1364 }); 1365 1366 // Define events which reset the 'inactive' event handler 1367 delegate('['+ATTR_ID+']', INACTIVE_EVENTS, inactiveMethod); 1368}); 1369 1370// Event trigger 1371PROTOTYPE._trigger = function(type, args, event) { 1372 var callback = $.Event('tooltip'+type); 1373 callback.originalEvent = (event && $.extend({}, event)) || this.cache.event || NULL; 1374 1375 this.triggering = TRUE; 1376 this.tooltip.trigger(callback, [this].concat(args || [])); 1377 this.triggering = FALSE; 1378 1379 return !callback.isDefaultPrevented(); 1380}; 1381 1382// Event assignment method 1383PROTOTYPE._assignEvents = function() { 1384 var options = this.options, 1385 posOptions = options.position, 1386 1387 tooltip = this.tooltip, 1388 showTarget = options.show.target, 1389 hideTarget = options.hide.target, 1390 containerTarget = posOptions.container, 1391 viewportTarget = posOptions.viewport, 1392 documentTarget = $(document), 1393 bodyTarget = $(document.body), 1394 windowTarget = $(window), 1395 1396 showEvents = options.show.event ? $.trim('' + options.show.event).split(' ') : [], 1397 hideEvents = options.hide.event ? $.trim('' + options.hide.event).split(' ') : [], 1398 toggleEvents = []; 1399 1400 // Hide tooltips when leaving current window/frame (but not select/option elements) 1401 if(/mouse(out|leave)/i.test(options.hide.event) && options.hide.leave === 'window') { 1402 this._bind(documentTarget, ['mouseout', 'blur'], function(event) { 1403 if(!/select|option/.test(event.target.nodeName) && !event.relatedTarget) { 1404 this.hide(event); 1405 } 1406 }); 1407 } 1408 1409 // Enable hide.fixed by adding appropriate class 1410 if(options.hide.fixed) { 1411 hideTarget = hideTarget.add( tooltip.addClass(CLASS_FIXED) ); 1412 } 1413 1414 /* 1415 * Make sure hoverIntent functions properly by using mouseleave to clear show timer if 1416 * mouseenter/mouseout is used for show.event, even if it isn't in the users options. 1417 */ 1418 else if(/mouse(over|enter)/i.test(options.show.event)) { 1419 this._bind(hideTarget, 'mouseleave', function() { 1420 clearTimeout(this.timers.show); 1421 }); 1422 } 1423 1424 // Hide tooltip on document mousedown if unfocus events are enabled 1425 if(('' + options.hide.event).indexOf('unfocus') > -1) { 1426 this._bind(containerTarget.closest('html'), ['mousedown', 'touchstart'], function(event) { 1427 var elem = $(event.target), 1428 enabled = this.rendered && !this.tooltip.hasClass(CLASS_DISABLED) && this.tooltip[0].offsetWidth > 0, 1429 isAncestor = elem.parents(SELECTOR).filter(this.tooltip[0]).length > 0; 1430 1431 if(elem[0] !== this.target[0] && elem[0] !== this.tooltip[0] && !isAncestor && 1432 !this.target.has(elem[0]).length && enabled 1433 ) { 1434 this.hide(event); 1435 } 1436 }); 1437 } 1438 1439 // Check if the tooltip hides when inactive 1440 if('number' === typeof options.hide.inactive) { 1441 // Bind inactive method to show target(s) as a custom event 1442 this._bind(showTarget, 'qtip-'+this.id+'-inactive', inactiveMethod); 1443 1444 // Define events which reset the 'inactive' event handler 1445 this._bind(hideTarget.add(tooltip), QTIP.inactiveEvents, inactiveMethod, '-inactive'); 1446 } 1447 1448 // Apply hide events (and filter identical show events) 1449 hideEvents = $.map(hideEvents, function(type) { 1450 var showIndex = $.inArray(type, showEvents); 1451 1452 // Both events and targets are identical, apply events using a toggle 1453 if((showIndex > -1 && hideTarget.add(showTarget).length === hideTarget.length)) { 1454 toggleEvents.push( showEvents.splice( showIndex, 1 )[0] ); return; 1455 } 1456 1457 return type; 1458 }); 1459 1460 // Apply show/hide/toggle events 1461 this._bind(showTarget, showEvents, showMethod); 1462 this._bind(hideTarget, hideEvents, hideMethod); 1463 this._bind(showTarget, toggleEvents, function(event) { 1464 (this.tooltip[0].offsetWidth > 0 ? hideMethod : showMethod).call(this, event); 1465 }); 1466 1467 1468 // Mouse movement bindings 1469 this._bind(showTarget.add(tooltip), 'mousemove', function(event) { 1470 // Check if the tooltip hides when mouse is moved a certain distance 1471 if('number' === typeof options.hide.distance) { 1472 var origin = this.cache.origin || {}, 1473 limit = this.options.hide.distance, 1474 abs = Math.abs; 1475 1476 // Check if the movement has gone beyond the limit, and hide it if so 1477 if(abs(event.pageX - origin.pageX) >= limit || abs(event.pageY - origin.pageY) >= limit) { 1478 this.hide(event); 1479 } 1480 } 1481 1482 // Cache mousemove coords on show targets 1483 this._storeMouse(event); 1484 }); 1485 1486 // Mouse positioning events 1487 if(posOptions.target === 'mouse') { 1488 // If mouse adjustment is on... 1489 if(posOptions.adjust.mouse) { 1490 // Apply a mouseleave event so we don't get problems with overlapping 1491 if(options.hide.event) { 1492 // Track if we're on the target or not 1493 this._bind(showTarget, ['mouseenter', 'mouseleave'], function(event) { 1494 this.cache.onTarget = event.type === 'mouseenter'; 1495 }); 1496 } 1497 1498 // Update tooltip position on mousemove 1499 this._bind(documentTarget, 'mousemove', function(event) { 1500 // Update the tooltip position only if the tooltip is visible and adjustment is enabled 1501 if(this.rendered && this.cache.onTarget && !this.tooltip.hasClass(CLASS_DISABLED) && this.tooltip[0].offsetWidth > 0) { 1502 this.reposition(event); 1503 } 1504 }); 1505 } 1506 } 1507 1508 // Adjust positions of the tooltip on window resize if enabled 1509 if(posOptions.adjust.resize || viewportTarget.length) { 1510 this._bind( $.event.special.resize ? viewportTarget : windowTarget, 'resize', repositionMethod ); 1511 } 1512 1513 // Adjust tooltip position on scroll of the window or viewport element if present 1514 if(posOptions.adjust.scroll) { 1515 this._bind( windowTarget.add(posOptions.container), 'scroll', repositionMethod ); 1516 } 1517}; 1518 1519// Un-assignment method 1520PROTOTYPE._unassignEvents = function() { 1521 var targets = [ 1522 this.options.show.target[0], 1523 this.options.hide.target[0], 1524 this.rendered && this.tooltip[0], 1525 this.options.position.container[0], 1526 this.options.position.viewport[0], 1527 this.options.position.container.closest('html')[0], // unfocus 1528 window, 1529 document 1530 ]; 1531 1532 // Check if tooltip is rendered 1533 if(this.rendered) { 1534 this._unbind($([]).pushStack( $.grep(targets, function(i) { 1535 return typeof i === 'object'; 1536 }))); 1537 } 1538 1539 // Tooltip isn't yet rendered, remove render event 1540 else { $(targets[0]).unbind('.'+this._id+'-create'); } 1541}; 1542 1543;// Initialization method 1544function init(elem, id, opts) 1545{ 1546 var obj, posOptions, attr, config, title, 1547 1548 // Setup element references 1549 docBody = $(document.body), 1550 1551 // Use document body instead of document element if needed 1552 newTarget = elem[0] === document ? docBody : elem, 1553 1554 // Grab metadata from element if plugin is present 1555 metadata = (elem.metadata) ? elem.metadata(opts.metadata) : NULL, 1556 1557 // If metadata type if HTML5, grab 'name' from the object instead, or use the regular data object otherwise 1558 metadata5 = opts.metadata.type === 'html5' && metadata ? metadata[opts.metadata.name] : NULL, 1559 1560 // Grab data from metadata.name (or data-qtipopts as fallback) using .data() method, 1561 html5 = elem.data(opts.metadata.name || 'qtipopts'); 1562 1563 // If we don't get an object returned attempt to parse it manualyl without parseJSON 1564 try { html5 = typeof html5 === 'string' ? $.parseJSON(html5) : html5; } catch(e) {} 1565 1566 // Merge in and sanitize metadata 1567 config = $.extend(TRUE, {}, QTIP.defaults, opts, 1568 typeof html5 === 'object' ? sanitizeOptions(html5) : NULL, 1569 sanitizeOptions(metadata5 || metadata)); 1570 1571 // Re-grab our positioning options now we've merged our metadata and set id to passed value 1572 posOptions = config.position; 1573 config.id = id; 1574 1575 // Setup missing content if none is detected 1576 if('boolean' === typeof config.content.text) { 1577 attr = elem.attr(config.content.attr); 1578 1579 // Grab from supplied attribute if available 1580 if(config.content.attr !== FALSE && attr) { config.content.text = attr; } 1581 1582 // No valid content was found, abort render 1583 else { return FALSE; } 1584 } 1585 1586 // Setup target options 1587 if(!posOptions.container.length) { posOptions.container = docBody; } 1588 if(posOptions.target === FALSE) { posOptions.target = newTarget; } 1589 if(config.show.target === FALSE) { config.show.target = newTarget; } 1590 if(config.show.solo === TRUE) { config.show.solo = posOptions.container.closest('body'); } 1591 if(config.hide.target === FALSE) { config.hide.target = newTarget; } 1592 if(config.position.viewport === TRUE) { config.position.viewport = posOptions.container; } 1593 1594 // Ensure we only use a single container 1595 posOptions.container = posOptions.container.eq(0); 1596 1597 // Convert position corner values into x and y strings 1598 posOptions.at = new CORNER(posOptions.at, TRUE); 1599 posOptions.my = new CORNER(posOptions.my); 1600 1601 // Destroy previous tooltip if overwrite is enabled, or skip element if not 1602 if(elem.data(NAMESPACE)) { 1603 if(config.overwrite) { 1604 elem.qtip('destroy'); 1605 } 1606 else if(config.overwrite === FALSE) { 1607 return FALSE; 1608 } 1609 } 1610 1611 // Add has-qtip attribute 1612 elem.attr(ATTR_HAS, id); 1613 1614 // Remove title attribute and store it if present 1615 if(config.suppress && (title = elem.attr('title'))) { 1616 // Final attr call fixes event delegatiom and IE default tooltip showing problem 1617 elem.removeAttr('title').attr(oldtitle, title).attr('title', ''); 1618 } 1619 1620 // Initialize the tooltip and add API reference 1621 obj = new QTip(elem, config, id, !!attr); 1622 elem.data(NAMESPACE, obj); 1623 1624 // Catch remove/removeqtip events on target element to destroy redundant tooltip 1625 elem.one('remove.qtip-'+id+' removeqtip.qtip-'+id, function() { 1626 var api; if((api = $(this).data(NAMESPACE))) { api.destroy(); } 1627 }); 1628 1629 return obj; 1630} 1631 1632// jQuery $.fn extension method 1633QTIP = $.fn.qtip = function(options, notation, newValue) 1634{ 1635 var command = ('' + options).toLowerCase(), // Parse command 1636 returned = NULL, 1637 args = $.makeArray(arguments).slice(1), 1638 event = args[args.length - 1], 1639 opts = this[0] ? $.data(this[0], NAMESPACE) : NULL; 1640 1641 // Check for API request 1642 if((!arguments.length && opts) || command === 'api') { 1643 return opts; 1644 } 1645 1646 // Execute API command if present 1647 else if('string' === typeof options) 1648 { 1649 this.each(function() 1650 { 1651 var api = $.data(this, NAMESPACE); 1652 if(!api) { return TRUE; } 1653 1654 // Cache the event if possible 1655 if(event && event.timeStamp) { api.cache.event = event; } 1656 1657 // Check for specific API commands 1658 if(notation && (command === 'option' || command === 'options')) { 1659 if(newValue !== undefined || $.isPlainObject(notation)) { 1660 api.set(notation, newValue); 1661 } 1662 else { 1663 returned = api.get(notation); 1664 return FALSE; 1665 } 1666 } 1667 1668 // Execute API command 1669 else if(api[command]) { 1670 api[command].apply(api, args); 1671 } 1672 }); 1673 1674 return returned !== NULL ? returned : this; 1675 } 1676 1677 // No API commands. validate provided options and setup qTips 1678 else if('object' === typeof options || !arguments.length) 1679 { 1680 opts = sanitizeOptions($.extend(TRUE, {}, options)); 1681 1682 // Bind the qTips 1683 return QTIP.bind.call(this, opts, event); 1684 } 1685}; 1686 1687// $.fn.qtip Bind method 1688QTIP.bind = function(opts, event) 1689{ 1690 return this.each(function(i) { 1691 var options, targets, events, namespace, api, id; 1692 1693 // Find next available ID, or use custom ID if provided 1694 id = $.isArray(opts.id) ? opts.id[i] : opts.id; 1695 id = !id || id === FALSE || id.length < 1 || QTIP.api[id] ? QTIP.nextid++ : id; 1696 1697 // Setup events namespace 1698 namespace = '.qtip-'+id+'-create'; 1699 1700 // Initialize the qTip and re-grab newly sanitized options 1701 api = init($(this), id, opts); 1702 if(api === FALSE) { return TRUE; } 1703 else { QTIP.api[id] = api; } 1704 options = api.options; 1705 1706 // Initialize plugins 1707 $.each(PLUGINS, function() { 1708 if(this.initialize === 'initialize') { this(api); } 1709 }); 1710 1711 // Determine hide and show targets 1712 targets = { show: options.show.target, hide: options.hide.target }; 1713 events = { 1714 show: $.trim('' + options.show.event).replace(/ /g, namespace+' ') + namespace, 1715 hide: $.trim('' + options.hide.event).replace(/ /g, namespace+' ') + namespace 1716 }; 1717 1718 /* 1719 * Make sure hoverIntent functions properly by using mouseleave as a hide event if 1720 * mouseenter/mouseout is used for show.event, even if it isn't in the users options. 1721 */ 1722 if(/mouse(over|enter)/i.test(events.show) && !/mouse(out|leave)/i.test(events.hide)) { 1723 events.hide += ' mouseleave' + namespace; 1724 } 1725 1726 /* 1727 * Also make sure initial mouse targetting works correctly by caching mousemove coords 1728 * on show targets before the tooltip has rendered. 1729 * 1730 * Also set onTarget when triggered to keep mouse tracking working 1731 */ 1732 targets.show.bind('mousemove'+namespace, function(event) { 1733 api._storeMouse(event); 1734 api.cache.onTarget = TRUE; 1735 }); 1736 1737 // Define hoverIntent function 1738 function hoverIntent(event) { 1739 function render() { 1740 // Cache mouse coords,render and render the tooltip 1741 api.render(typeof event === 'object' || options.show.ready); 1742 1743 // Unbind show and hide events 1744 targets.show.add(targets.hide).unbind(namespace); 1745 } 1746 1747 // Only continue if tooltip isn't disabled 1748 if(api.disabled) { return FALSE; } 1749 1750 // Cache the event data 1751 api.cache.event = $.extend({}, event); 1752 api.cache.target = event ? $(event.target) : [undefined]; 1753 1754 // Start the event sequence 1755 if(options.show.delay > 0) { 1756 clearTimeout(api.timers.show); 1757 api.timers.show = setTimeout(render, options.show.delay); 1758 if(events.show !== events.hide) { 1759 targets.hide.bind(events.hide, function() { clearTimeout(api.timers.show); }); 1760 } 1761 } 1762 else { render(); } 1763 } 1764 1765 // Bind show events to target 1766 targets.show.bind(events.show, hoverIntent); 1767 1768 // Prerendering is enabled, create tooltip now 1769 if(options.show.ready || options.prerender) { hoverIntent(event); } 1770 }); 1771}; 1772 1773// Populated in render method 1774QTIP.api = {}; 1775;$.each({ 1776 /* Allow other plugins to successfully retrieve the title of an element with a qTip applied */ 1777 attr: function(attr, val) { 1778 if(this.length) { 1779 var self = this[0], 1780 title = 'title', 1781 api = $.data(self, 'qtip'); 1782 1783 if(attr === title && api && 'object' === typeof api && api.options.suppress) { 1784 if(arguments.length < 2) { 1785 return $.attr(self, oldtitle); 1786 } 1787 1788 // If qTip is rendered and title was originally used as content, update it 1789 if(api && api.options.content.attr === title && api.cache.attr) { 1790 api.set('content.text', val); 1791 } 1792 1793 // Use the regular attr method to set, then cache the result 1794 return this.attr(oldtitle, val); 1795 } 1796 } 1797 1798 return $.fn['attr'+replaceSuffix].apply(this, arguments); 1799 }, 1800 1801 /* Allow clone to correctly retrieve cached title attributes */ 1802 clone: function(keepData) { 1803 var titles = $([]), title = 'title', 1804 1805 // Clone our element using the real clone method 1806 elems = $.fn['clone'+replaceSuffix].apply(this, arguments); 1807 1808 // Grab all elements with an oldtitle set, and change it to regular title attribute, if keepData is false 1809 if(!keepData) { 1810 elems.filter('['+oldtitle+']').attr('title', function() { 1811 return $.attr(this, oldtitle); 1812 }) 1813 .removeAttr(oldtitle); 1814 } 1815 1816 return elems; 1817 } 1818}, function(name, func) { 1819 if(!func || $.fn[name+replaceSuffix]) { return TRUE; } 1820 1821 var old = $.fn[name+replaceSuffix] = $.fn[name]; 1822 $.fn[name] = function() { 1823 return func.apply(this, arguments) || old.apply(this, arguments); 1824 }; 1825}); 1826 1827/* Fire off 'removeqtip' handler in $.cleanData if jQuery UI not present (it already does similar). 1828 * This snippet is taken directly from jQuery UI source code found here: 1829 * http://code.jquery.com/ui/jquery-ui-git.js 1830 */ 1831if(!$.ui) { 1832 $['cleanData'+replaceSuffix] = $.cleanData; 1833 $.cleanData = function( elems ) { 1834 for(var i = 0, elem; (elem = $( elems[i] )).length; i++) { 1835 if(elem.attr(ATTR_HAS)) { 1836 try { elem.triggerHandler('removeqtip'); } 1837 catch( e ) {} 1838 } 1839 } 1840 $['cleanData'+replaceSuffix].apply(this, arguments); 1841 }; 1842} 1843 1844;// qTip version 1845QTIP.version = '2.1.1'; 1846 1847// Base ID for all qTips 1848QTIP.nextid = 0; 1849 1850// Inactive events array 1851QTIP.inactiveEvents = INACTIVE_EVENTS; 1852 1853// Base z-index for all qTips 1854QTIP.zindex = 15000; 1855 1856// Define configuration defaults 1857QTIP.defaults = { 1858 prerender: FALSE, 1859 id: FALSE, 1860 overwrite: TRUE, 1861 suppress: TRUE, 1862 content: { 1863 text: TRUE, 1864 attr: 'title', 1865 title: FALSE, 1866 button: FALSE 1867 }, 1868 position: { 1869 my: 'top left', 1870 at: 'bottom right', 1871 target: FALSE, 1872 container: FALSE, 1873 viewport: FALSE, 1874 adjust: { 1875 x: 0, y: 0, 1876 mouse: TRUE, 1877 scroll: TRUE, 1878 resize: TRUE, 1879 method: 'flipinvert flipinvert' 1880 }, 1881 effect: function(api, pos, viewport) { 1882 $(this).animate(pos, { 1883 duration: 200, 1884 queue: FALSE 1885 }); 1886 } 1887 }, 1888 show: { 1889 target: FALSE, 1890 event: 'mouseenter', 1891 effect: TRUE, 1892 delay: 90, 1893 solo: FALSE, 1894 ready: FALSE, 1895 autofocus: FALSE 1896 }, 1897 hide: { 1898 target: FALSE, 1899 event: 'mouseleave', 1900 effect: TRUE, 1901 delay: 0, 1902 fixed: FALSE, 1903 inactive: FALSE, 1904 leave: 'window', 1905 distance: FALSE 1906 }, 1907 style: { 1908 classes: '', 1909 widget: FALSE, 1910 width: FALSE, 1911 height: FALSE, 1912 def: TRUE 1913 }, 1914 events: { 1915 render: NULL, 1916 move: NULL, 1917 show: NULL, 1918 hide: NULL, 1919 toggle: NULL, 1920 visible: NULL, 1921 hidden: NULL, 1922 focus: NULL, 1923 blur: NULL 1924 } 1925}; 1926 1927;var TIP, 1928 1929// .bind()/.on() namespace 1930TIPNS = '.qtip-tip', 1931 1932// Common CSS strings 1933MARGIN = 'margin', 1934BORDER = 'border', 1935COLOR = 'color', 1936BG_COLOR = 'background-color', 1937TRANSPARENT = 'transparent', 1938IMPORTANT = ' !important', 1939 1940// Check if the browser supports <canvas/> elements 1941HASCANVAS = !!document.createElement('canvas').getContext, 1942 1943// Invalid colour values used in parseColours() 1944INVALID = /rgba?\(0, 0, 0(, 0)?\)|transparent|#123456/i; 1945 1946// Camel-case method, taken from jQuery source 1947// http://code.jquery.com/jquery-1.8.0.js 1948function camel(s) { return s.charAt(0).toUpperCase() + s.slice(1); } 1949 1950/* 1951 * Modified from Modernizr's testPropsAll() 1952 * http://modernizr.com/downloads/modernizr-latest.js 1953 */ 1954var cssProps = {}, cssPrefixes = ["Webkit", "O", "Moz", "ms"]; 1955function vendorCss(elem, prop) { 1956 var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1), 1957 props = (prop + ' ' + cssPrefixes.join(ucProp + ' ') + ucProp).split(' '), 1958 cur, val, i = 0; 1959 1960 // If the property has already been mapped... 1961 if(cssProps[prop]) { return elem.css(cssProps[prop]); } 1962 1963 while((cur = props[i++])) { 1964 if((val = elem.css(cur)) !== undefined) { 1965 return cssProps[prop] = cur, val; 1966 } 1967 } 1968} 1969 1970// Parse a given elements CSS property into an int 1971function intCss(elem, prop) { 1972 return parseInt(vendorCss(elem, prop), 10); 1973} 1974 1975 1976// VML creation (for IE only) 1977if(!HASCANVAS) { 1978 createVML = function(tag, props, style) { 1979 return '<qtipvml:'+tag+' xmlns="urn:schemas-microsoft.com:vml" class="qtip-vml" '+(props||'')+ 1980 ' style="behavior: url(#default#VML); '+(style||'')+ '" />'; 1981 }; 1982} 1983 1984 1985 1986function Tip(qtip, options) { 1987 this._ns = 'tip'; 1988 this.options = options; 1989 this.offset = options.offset; 1990 this.size = [ options.width, options.height ]; 1991 1992 // Initialize 1993 this.init( (this.qtip = qtip) ); 1994} 1995 1996$.extend(Tip.prototype, { 1997 init: function(qtip) { 1998 var context, tip; 1999 2000 // Create tip element and prepend to the tooltip 2001 tip = this.element = qtip.elements.tip = $('<div />', { 'class': NAMESPACE+'-tip' }).prependTo(qtip.tooltip); 2002 2003 // Create tip drawing element(s) 2004 if(HASCANVAS) { 2005 // save() as soon as we create the canvas element so FF2 doesn't bork on our first restore()! 2006 context = $('<canvas />').appendTo(this.element)[0].getContext('2d'); 2007 2008 // Setup constant parameters 2009 context.lineJoin = 'miter'; 2010 context.miterLimit = 100; 2011 context.save(); 2012 } 2013 else { 2014 context = createVML('shape', 'coordorigin="0,0"', 'position:absolute;'); 2015 this.element.html(context + context); 2016 2017 // Prevent mousing down on the tip since it causes problems with .live() handling in IE due to VML 2018 qtip._bind( $('*', tip).add(tip), ['click', 'mousedown'], function(event) { event.stopPropagation(); }, this._ns); 2019 } 2020 2021 // Bind update events 2022 qtip._bind(qtip.tooltip, 'tooltipmove', this.reposition, this._ns, this); 2023 2024 // Create it 2025 this.create(); 2026 }, 2027 2028 _swapDimensions: function() { 2029 this.size[0] = this.options.height; 2030 this.size[1] = this.options.width; 2031 }, 2032 _resetDimensions: function() { 2033 this.size[0] = this.options.width; 2034 this.size[1] = this.options.height; 2035 }, 2036 2037 _useTitle: function(corner) { 2038 var titlebar = this.qtip.elements.titlebar; 2039 return titlebar && ( 2040 corner.y === TOP || (corner.y === CENTER && this.element.position().top + (this.size[1] / 2) + this.options.offset < titlebar.outerHeight(TRUE)) 2041 ); 2042 }, 2043 2044 _parseCorner: function(corner) { 2045 var my = this.qtip.options.position.my; 2046 2047 // Detect corner and mimic properties 2048 if(corner === FALSE || my === FALSE) { 2049 corner = FALSE; 2050 } 2051 else if(corner === TRUE) { 2052 corner = new CORNER( my.string() ); 2053 } 2054 else if(!corner.string) { 2055 corner = new CORNER(corner); 2056 corner.fixed = TRUE; 2057 } 2058 2059 return corner; 2060 }, 2061 2062 _parseWidth: function(corner, side, use) { 2063 var elements = this.qtip.elements, 2064 prop = BORDER + camel(side) + 'Width'; 2065 2066 return (use ? intCss(use, prop) : ( 2067 intCss(elements.content, prop) || 2068 intCss(this._useTitle(corner) && elements.titlebar || elements.content, prop) || 2069 intCss(tooltip, prop) 2070 )) || 0; 2071 }, 2072 2073 _parseRadius: function(corner) { 2074 var elements = this.qtip.elements, 2075 prop = BORDER + camel(corner.y) + camel(corner.x) + 'Radius'; 2076 2077 return BROWSER.ie < 9 ? 0 : 2078 intCss(this._useTitle(corner) && elements.titlebar || elements.content, prop) || 2079 intCss(elements.tooltip, prop) || 0; 2080 }, 2081 2082 _invalidColour: function(elem, prop, compare) { 2083 var val = elem.css(prop); 2084 return !val || (compare && val === elem.css(compare)) || INVALID.test(val) ? FALSE : val; 2085 }, 2086 2087 _parseColours: function(corner) { 2088 var elements = this.qtip.elements, 2089 tip = this.element.css('cssText', ''), 2090 borderSide = BORDER + camel(corner[ corner.precedance ]) + camel(COLOR), 2091 colorElem = this._useTitle(corner) && elements.titlebar || elements.content, 2092 css = this._invalidColour, color = []; 2093 2094 // Attempt to detect the background colour from various elements, left-to-right precedance 2095 color[0] = css(tip, BG_COLOR) || css(colorElem, BG_COLOR) || css(elements.content, BG_COLOR) || 2096 css(tooltip, BG_COLOR) || tip.css(BG_COLOR); 2097 2098 // Attempt to detect the correct border side colour from various elements, left-to-right precedance 2099 color[1] = css(tip, borderSide, COLOR) || css(colorElem, borderSide, COLOR) || 2100 css(elements.content, borderSide, COLOR) || css(tooltip, borderSide, COLOR) || tooltip.css(borderSide); 2101 2102 // Reset background and border colours 2103 $('*', tip).add(tip).css('cssText', BG_COLOR+':'+TRANSPARENT+IMPORTANT+';'+BORDER+':0'+IMPORTANT+';'); 2104 2105 return color; 2106 }, 2107 2108 _calculateSize: function(corner) { 2109 var y = corner.precedance === Y, 2110 width = this.options[ y ? 'height' : 'width' ], 2111 height = this.options[ y ? 'width' : 'height' ], 2112 isCenter = corner.abbrev() === 'c', 2113 base = width * (isCenter ? 0.5 : 1), 2114 pow = Math.pow, 2115 round = Math.round, 2116 bigHyp, ratio, result, 2117 2118 smallHyp = Math.sqrt( pow(base, 2) + pow(height, 2) ), 2119 hyp = [ (this.border / base) * smallHyp, (this.border / height) * smallHyp ]; 2120 2121 hyp[2] = Math.sqrt( pow(hyp[0], 2) - pow(this.border, 2) ); 2122 hyp[3] = Math.sqrt( pow(hyp[1], 2) - pow(this.border, 2) ); 2123 2124 bigHyp = smallHyp + hyp[2] + hyp[3] + (isCenter ? 0 : hyp[0]); 2125 ratio = bigHyp / smallHyp; 2126 2127 result = [ round(ratio * width), round(ratio * height) ]; 2128 2129 return y ? result : result.reverse(); 2130 }, 2131 2132 // Tip coordinates calculator 2133 _calculateTip: function(corner) { 2134 var width = this.size[0], height = this.size[1], 2135 width2 = Math.ceil(width / 2), height2 = Math.ceil(height / 2), 2136 2137 // Define tip coordinates in terms of height and width values 2138 tips = { 2139 br: [0,0, width,height, width,0], 2140 bl: [0,0, width,0, 0,height], 2141 tr: [0,height, width,0, width,height], 2142 tl: [0,0, 0,height, width,height], 2143 tc: [0,height, width2,0, width,height], 2144 bc: [0,0, width,0, width2,height], 2145 rc: [0,0, width,height2, 0,height], 2146 lc: [width,0, width,height, 0,height2] 2147 }; 2148 2149 // Set common side shapes 2150 tips.lt = tips.br; tips.rt = tips.bl; 2151 tips.lb = tips.tr; tips.rb = tips.tl; 2152 2153 return tips[ corner.abbrev() ]; 2154 }, 2155 2156 create: function() { 2157 // Determine tip corner 2158 var c = this.corner = (HASCANVAS || BROWSER.ie) && this._parseCorner(this.options.corner); 2159 2160 // If we have a tip corner... 2161 if( (this.enabled = !!this.corner && this.corner.abbrev() !== 'c') ) { 2162 // Cache it 2163 this.qtip.cache.corner = c.clone(); 2164 2165 // Create it 2166 this.update(); 2167 } 2168 2169 // Toggle tip element 2170 this.element.toggle(this.enabled); 2171 2172 return this.corner; 2173 }, 2174 2175 update: function(corner, position) { 2176 if(!this.enabled) { return this; } 2177 2178 var elements = this.qtip.elements, 2179 tip = this.element, 2180 inner = tip.children(), 2181 options = this.options, 2182 size = this.size, 2183 mimic = options.mimic, 2184 round = Math.round, 2185 color, precedance, context, 2186 coords, translate, newSize, border; 2187 2188 // Re-determine tip if not already set 2189 if(!corner) { corner = this.qtip.cache.corner || this.corner; } 2190 2191 // Use corner property if we detect an invalid mimic value 2192 if(mimic === FALSE) { mimic = corner; } 2193 2194 // Otherwise inherit mimic properties from the corner object as necessary 2195 else { 2196 mimic = new CORNER(mimic); 2197 mimic.precedance = corner.precedance; 2198 2199 if(mimic.x === 'inherit') { mimic.x = corner.x; } 2200 else if(mimic.y === 'inherit') { mimic.y = corner.y; } 2201 else if(mimic.x === mimic.y) { 2202 mimic[ corner.precedance ] = corner[ corner.precedance ]; 2203 } 2204 } 2205 precedance = mimic.precedance; 2206 2207 // Ensure the tip width.height are relative to the tip position 2208 if(corner.precedance === X) { this._swapDimensions(); } 2209 else { this._resetDimensions(); } 2210 2211 // Update our colours 2212 color = this.color = this._parseColours(corner); 2213 2214 // Detect border width, taking into account colours 2215 if(color[1] !== TRANSPARENT) { 2216 // Grab border width 2217 border = this.border = this._parseWidth(corner, corner[corner.precedance]); 2218 2219 // If border width isn't zero, use border color as fill (1.0 style tips) 2220 if(options.border && border < 1) { color[0] = color[1]; } 2221 2222 // Set border width (use detected border width if options.border is true) 2223 this.border = border = options.border !== TRUE ? options.border : border; 2224 } 2225 2226 // Border colour was invalid, set border to zero 2227 else { this.border = border = 0; } 2228 2229 // Calculate coordinates 2230 coords = this._calculateTip(mimic); 2231 2232 // Determine tip size 2233 newSize = this.size = this._calculateSize(corner); 2234 tip.css({ 2235 width: newSize[0], 2236 height: newSize[1], 2237 lineHeight: newSize[1]+'px' 2238 }); 2239 2240 // Calculate tip translation 2241 if(corner.precedance === Y) { 2242 translate = [ 2243 round(mimic.x === LEFT ? border : mimic.x === RIGHT ? newSize[0] - size[0] - border : (newSize[0] - size[0]) / 2), 2244 round(mimic.y === TOP ? newSize[1] - size[1] : 0) 2245 ]; 2246 } 2247 else { 2248 translate = [ 2249 round(mimic.x === LEFT ? newSize[0] - size[0] : 0), 2250 round(mimic.y === TOP ? border : mimic.y === BOTTOM ? newSize[1] - size[1] - border : (newSize[1] - size[1]) / 2) 2251 ]; 2252 } 2253 2254 // Canvas drawing implementation 2255 if(HASCANVAS) { 2256 // Set the canvas size using calculated size 2257 inner.attr(WIDTH, newSize[0]).attr(HEIGHT, newSize[1]); 2258 2259 // Grab canvas context and clear/save it 2260 context = inner[0].getContext('2d'); 2261 context.restore(); context.save(); 2262 context.clearRect(0,0,3000,3000); 2263 2264 // Set properties 2265 context.fillStyle = color[0]; 2266 context.strokeStyle = color[1]; 2267 context.lineWidth = border * 2; 2268 2269 // Draw the tip 2270 context.translate(translate[0], translate[1]); 2271 context.beginPath(); 2272 context.moveTo(coords[0], coords[1]); 2273 context.lineTo(coords[2], coords[3]); 2274 context.lineTo(coords[4], coords[5]); 2275 context.closePath(); 2276 2277 // Apply fill and border 2278 if(border) { 2279 // Make sure transparent borders are supported by doing a stroke 2280 // of the background colour before the stroke colour 2281 if(tooltip.css('background-clip') === 'border-box') { 2282 context.strokeStyle = color[0]; 2283 context.stroke(); 2284 } 2285 context.strokeStyle = color[1]; 2286 context.stroke(); 2287 } 2288 context.fill(); 2289 } 2290 2291 // VML (IE Proprietary implementation) 2292 else { 2293 // Setup coordinates string 2294 coords = 'm' + coords[0] + ',' + coords[1] + ' l' + coords[2] + 2295 ',' + coords[3] + ' ' + coords[4] + ',' + coords[5] + ' xe'; 2296 2297 // Setup VML-specific offset for pixel-perfection 2298 translate[2] = border && /^(r|b)/i.test(corner.string()) ? 2299 BROWSER.ie === 8 ? 2 : 1 : 0; 2300 2301 // Set initial CSS 2302 inner.css({ 2303 coordsize: (size[0]+border) + ' ' + (size[1]+border), 2304 antialias: ''+(mimic.string().indexOf(CENTER) > -1), 2305 left: translate[0] - (translate[2] * Number(precedance === X)), 2306 top: translate[1] - (translate[2] * Number(precedance === Y)), 2307 width: size[0] + border, 2308 height: size[1] + border 2309 }) 2310 .each(function(i) { 2311 var $this = $(this); 2312 2313 // Set shape specific attributes 2314 $this[ $this.prop ? 'prop' : 'attr' ]({ 2315 coordsize: (size[0]+border) + ' ' + (size[1]+border), 2316 path: coords, 2317 fillcolor: color[0], 2318 filled: !!i, 2319 stroked: !i 2320 }) 2321 .toggle(!!(border || i)); 2322 2323 // Check if border is enabled and add stroke element 2324 !i && $this.html( createVML( 2325 'stroke', 'weight="'+(border*2)+'px" color="'+color[1]+'" miterlimit="1000" joinstyle="miter"' 2326 ) ); 2327 }); 2328 } 2329 2330 // Position if needed 2331 if(position !== FALSE) { this.calculate(corner); } 2332 }, 2333 2334 calculate: function(corner) { 2335 if(!this.enabled) { return FALSE; } 2336 2337 var self = this, 2338 elements = this.qtip.elements, 2339 tip = this.element, 2340 userOffset = this.options.offset, 2341 isWidget = this.qtip.tooltip.hasClass('ui-widget'), 2342 position = { }, 2343 precedance, size, corners; 2344 2345 // Inherit corner if not provided 2346 corner = corner || this.corner; 2347 precedance = corner.precedance; 2348 2349 // Determine which tip dimension to use for adjustment 2350 size = this._calculateSize(corner); 2351 2352 // Setup corners and offset array 2353 corners = [ corner.x, corner.y ]; 2354 if(precedance === X) { corners.reverse(); } 2355 2356 // Calculate tip position 2357 $.each(corners, function(i, side) { 2358 var b, bc, br; 2359 2360 if(side === CENTER) { 2361 b = precedance === Y ? LEFT : TOP; 2362 position[ b ] = '50%'; 2363 position[MARGIN+'-' + b] = -Math.round(size[ precedance === Y ? 0 : 1 ] / 2) + userOffset; 2364 } 2365 else { 2366 b = self._parseWidth(corner, side, elements.tooltip); 2367 bc = self._parseWidth(corner, side, elements.content); 2368 br = self._parseRadius(corner); 2369 2370 position[ side ] = Math.max(-self.border, i ? bc : (userOffset + (br > b ? br : -b))); 2371 } 2372 }); 2373 2374 // Adjust for tip size 2375 position[ corner[precedance] ] -= size[ precedance === X ? 0 : 1 ]; 2376 2377 // Set and return new position 2378 tip.css({ margin: '', top: '', bottom: '', left: '', right: '' }).css(position); 2379 return position; 2380 }, 2381 2382 reposition: function(event, api, pos, viewport) { 2383 if(!this.enabled) { return; } 2384 2385 var cache = api.cache, 2386 newCorner = this.corner.clone(), 2387 adjust = pos.adjusted, 2388 method = api.options.position.adjust.method.split(' '), 2389 horizontal = method[0], 2390 vertical = method[1] || method[0], 2391 shift = { left: FALSE, top: FALSE, x: 0, y: 0 }, 2392 offset, css = {}, props; 2393 2394 // If our tip position isn't fixed e.g. doesn't adjust with viewport... 2395 if(this.corner.fixed !== TRUE) { 2396 // Horizontal - Shift or flip method 2397 if(horizontal === SHIFT && newCorner.precedance === X && adjust.left && newCorner.y !== CENTER) { 2398 newCorner.precedance = newCorner.precedance === X ? Y : X; 2399 } 2400 else if(horizontal !== SHIFT && adjust.left){ 2401 newCorner.x = newCorner.x === CENTER ? (adjust.left > 0 ? LEFT : RIGHT) : (newCorner.x === LEFT ? RIGHT : LEFT); 2402 } 2403 2404 // Vertical - Shift or flip method 2405 if(vertical === SHIFT && newCorner.precedance === Y && adjust.top && newCorner.x !== CENTER) { 2406 newCorner.precedance = newCorner.precedance === Y ? X : Y; 2407 } 2408 else if(vertical !== SHIFT && adjust.top) { 2409 newCorner.y = newCorner.y === CENTER ? (adjust.top > 0 ? TOP : BOTTOM) : (newCorner.y === TOP ? BOTTOM : TOP); 2410 } 2411 2412 // Update and redraw the tip if needed (check cached details of last drawn tip) 2413 if(newCorner.string() !== cache.corner.string() && (cache.cornerTop !== adjust.top || cache.cornerLeft !== adjust.left)) { 2414 this.update(newCorner, FALSE); 2415 } 2416 } 2417 2418 // Setup tip offset properties 2419 offset = this.calculate(newCorner, adjust); 2420 2421 // Readjust offset object to make it left/top 2422 if(offset.right !== undefined) { offset.left = -offset.right; } 2423 if(offset.bottom !== undefined) { offset.top = -offset.bottom; } 2424 offset.user = this.offset; 2425 2426 // Viewport "shift" specific adjustments 2427 if(shift.left = (horizontal === SHIFT && !!adjust.left)) { 2428 if(newCorner.x === CENTER) { 2429 css[MARGIN+'-left'] = shift.x = offset[MARGIN+'-left'] - adjust.left; 2430 } 2431 else { 2432 props = offset.right !== undefined ? 2433 [ adjust.left, -offset.left ] : [ -adjust.left, offset.left ]; 2434 2435 if( (shift.x = Math.max(props[0], props[1])) > props[0] ) { 2436 pos.left -= adjust.left; 2437 shift.left = FALSE; 2438 } 2439 2440 css[ offset.right !== undefined ? RIGHT : LEFT ] = shift.x; 2441 } 2442 } 2443 if(shift.top = (vertical === SHIFT && !!adjust.top)) { 2444 if(newCorner.y === CENTER) { 2445 css[MARGIN+'-top'] = shift.y = offset[MARGIN+'-top'] - adjust.top; 2446 } 2447 else { 2448 props = offset.bottom !== undefined ? 2449 [ adjust.top, -offset.top ] : [ -adjust.top, offset.top ]; 2450 2451 if( (shift.y = Math.max(props[0], props[1])) > props[0] ) { 2452 pos.top -= adjust.top; 2453 shift.top = FALSE; 2454 } 2455 2456 css[ offset.bottom !== undefined ? BOTTOM : TOP ] = shift.y; 2457 } 2458 } 2459 2460 /* 2461 * If the tip is adjusted in both dimensions, or in a 2462 * direction that would cause it to be anywhere but the 2463 * outer border, hide it! 2464 */ 2465 this.element.css(css).toggle( 2466 !((shift.x && shift.y) || (newCorner.x === CENTER && shift.y) || (newCorner.y === CENTER && shift.x)) 2467 ); 2468 2469 // Adjust position to accomodate tip dimensions 2470 pos.left -= offset.left.charAt ? offset.user : horizontal !== SHIFT || shift.top || !shift.left && !shift.top ? offset.left : 0; 2471 pos.top -= offset.top.charAt ? offset.user : vertical !== SHIFT || shift.left || !shift.left && !shift.top ? offset.top : 0; 2472 2473 // Cache details 2474 cache.cornerLeft = adjust.left; cache.cornerTop = adjust.top; 2475 cache.corner = newCorner.clone(); 2476 }, 2477 2478 destroy: function() { 2479 // Unbind events 2480 this.qtip._unbind(this.qtip.tooltip, this._ns); 2481 2482 // Remove the tip element(s) 2483 if(this.qtip.elements.tip) { 2484 this.qtip.elements.tip.find('*') 2485 .remove().end().remove(); 2486 } 2487 } 2488}); 2489 2490TIP = PLUGINS.tip = function(api) { 2491 return new Tip(api, api.options.style.tip); 2492}; 2493 2494// Initialize tip on render 2495TIP.initialize = 'render'; 2496 2497// Setup plugin sanitization options 2498TIP.sanitize = function(options) { 2499 if(options.style && 'tip' in options.style) { 2500 opts = options.style.tip; 2501 if(typeof opts !== 'object') { opts = options.style.tip = { corner: opts }; } 2502 if(!(/string|boolean/i).test(typeof opts.corner)) { opts.corner = TRUE; } 2503 } 2504}; 2505 2506// Add new option checks for the plugin 2507CHECKS.tip = { 2508 '^position.my|style.tip.(corner|mimic|border)$': function() { 2509 // Make sure a tip can be drawn 2510 this.create(); 2511 2512 // Reposition the tooltip 2513 this.qtip.reposition(); 2514 }, 2515 '^style.tip.(height|width)$': function(obj) { 2516 // Re-set dimensions and redraw the tip 2517 this.size = size = [ obj.width, obj.height ]; 2518 this.update(); 2519 2520 // Reposition the tooltip 2521 this.qtip.reposition(); 2522 }, 2523 '^content.title|style.(classes|widget)$': function() { 2524 this.update(); 2525 } 2526}; 2527 2528// Extend original qTip defaults 2529$.extend(TRUE, QTIP.defaults, { 2530 style: { 2531 tip: { 2532 corner: TRUE, 2533 mimic: FALSE, 2534 width: 6, 2535 height: 6, 2536 border: TRUE, 2537 offset: 0 2538 } 2539 } 2540}); 2541 2542;PLUGINS.viewport = function(api, position, posOptions, targetWidth, targetHeight, elemWidth, elemHeight) 2543{ 2544 var target = posOptions.target, 2545 tooltip = api.elements.tooltip, 2546 my = posOptions.my, 2547 at = posOptions.at, 2548 adjust = posOptions.adjust, 2549 method = adjust.method.split(' '), 2550 methodX = method[0], 2551 methodY = method[1] || method[0], 2552 viewport = posOptions.viewport, 2553 container = posOptions.container, 2554 cache = api.cache, 2555 tip = api.plugins.tip, 2556 adjusted = { left: 0, top: 0 }, 2557 fixed, newMy, newClass; 2558 2559 // If viewport is not a jQuery element, or it's the window/document or no adjustment method is used... return 2560 if(!viewport.jquery || target[0] === window || target[0] === document.body || adjust.method === 'none') { 2561 return adjusted; 2562 } 2563 2564 // Cache our viewport details 2565 fixed = tooltip.css('position') === 'fixed'; 2566 viewport = { 2567 elem: viewport, 2568 width: viewport[0] === window ? viewport.width() : viewport.outerWidth(FALSE), 2569 height: viewport[0] === window ? viewport.height() : viewport.outerHeight(FALSE), 2570 scrollleft: fixed ? 0 : viewport.scrollLeft(), 2571 scrolltop: fixed ? 0 : viewport.scrollTop(), 2572 offset: viewport.offset() || { left: 0, top: 0 } 2573 }; 2574 container = { 2575 elem: container, 2576 scrollLeft: container.scrollLeft(), 2577 scrollTop: container.scrollTop(), 2578 offset: container.offset() || { left: 0, top: 0 } 2579 }; 2580 2581 // Generic calculation method 2582 function calculate(side, otherSide, type, adjust, side1, side2, lengthName, targetLength, elemLength) { 2583 var initialPos = position[side1], 2584 mySide = my[side], atSide = at[side], 2585 isShift = type === SHIFT, 2586 viewportScroll = -container.offset[side1] + viewport.offset[side1] + viewport['scroll'+side1], 2587 myLength = mySide === side1 ? elemLength : mySide === side2 ? -elemLength : -elemLength / 2, 2588 atLength = atSide === side1 ? targetLength : atSide === side2 ? -targetLength : -targetLength / 2, 2589 tipLength = tip && tip.size ? tip.size[lengthName] || 0 : 0, 2590 tipAdjust = tip && tip.corner && tip.corner.precedance === side && !isShift ? tipLength : 0, 2591 overflow1 = viewportScroll - initialPos + tipAdjust, 2592 overflow2 = initialPos + elemLength - viewport[lengthName] - viewportScroll + tipAdjust, 2593 offset = myLength - (my.precedance === side || mySide === my[otherSide] ? atLength : 0) - (atSide === CENTER ? targetLength / 2 : 0); 2594 2595 // shift 2596 if(isShift) { 2597 tipAdjust = tip && tip.corner && tip.corner.precedance === otherSide ? tipLength : 0; 2598 offset = (mySide === side1 ? 1 : -1) * myLength - tipAdjust; 2599 2600 // Adjust position but keep it within viewport dimensions 2601 position[side1] += overflow1 > 0 ? overflow1 : overflow2 > 0 ? -overflow2 : 0; 2602 position[side1] = Math.max( 2603 -container.offset[side1] + viewport.offset[side1] + (tipAdjust && tip.corner[side] === CENTER ? tip.offset : 0), 2604 initialPos - offset, 2605 Math.min( 2606 Math.max(-container.offset[side1] + viewport.offset[side1] + viewport[lengthName], initialPos + offset), 2607 position[side1] 2608 ) 2609 ); 2610 } 2611 2612 // flip/flipinvert 2613 else { 2614 // Update adjustment amount depending on if using flipinvert or flip 2615 adjust *= (type === FLIPINVERT ? 2 : 0); 2616 2617 // Check for overflow on the left/top 2618 if(overflow1 > 0 && (mySide !== side1 || overflow2 > 0)) { 2619 position[side1] -= offset + adjust; 2620 newMy.invert(side, side1); 2621 } 2622 2623 // Check for overflow on the bottom/right 2624 else if(overflow2 > 0 && (mySide !== side2 || overflow1 > 0) ) { 2625 position[side1] -= (mySide === CENTER ? -offset : offset) + adjust; 2626 newMy.invert(side, side2); 2627 } 2628 2629 // Make sure we haven't made things worse with the adjustment and reset if so 2630 if(position[side1] < viewportScroll && -position[side1] > overflow2) { 2631 position[side1] = initialPos; newMy = my.clone(); 2632 } 2633 } 2634 2635 return position[side1] - initialPos; 2636 } 2637 2638 // Set newMy if using flip or flipinvert methods 2639 if(methodX !== 'shift' || methodY !== 'shift') { newMy = my.clone(); } 2640 2641 // Adjust position based onviewport and adjustment options 2642 adjusted = { 2643 left: methodX !== 'none' ? calculate( X, Y, methodX, adjust.x, LEFT, RIGHT, WIDTH, targetWidth, elemWidth ) : 0, 2644 top: methodY !== 'none' ? calculate( Y, X, methodY, adjust.y, TOP, BOTTOM, HEIGHT, targetHeight, elemHeight ) : 0 2645 }; 2646 2647 // Set tooltip position class if it's changed 2648 if(newMy && cache.lastClass !== (newClass = NAMESPACE + '-pos-' + newMy.abbrev())) { 2649 tooltip.removeClass(api.cache.lastClass).addClass( (api.cache.lastClass = newClass) ); 2650 } 2651 2652 return adjusted; 2653};;})); 2654}( window, document )); 2655 2656 2657