1/** 2 * Zebra_Tooltips 3 * 4 * Zebra_Tooltips is a lightweight (around 5KB minified, 1.9KB gzipped) and accessible jQuery tooltips plugin for creating 5 * simple but smart and visually attractive tooltips, featuring nice transitions, 4 themes, and offering a wide range of 6 * configuration options. 7 * 8 * Besides the default behavior of tooltips showing when user hovers the element, tooltips may also be shown and hidden 9 * programmatically. When shown programmatically, the tooltips feature a "close" button and clicking it will be the only 10 * way of closing tooltips opened this way. This is useful for drawing users' attention to specific areas of a page 11 * (like error messages after validating a form). 12 * 13 * Tooltips can be aligned left, center or right, relative to the parent element, as well as above or below the parent 14 * element. The library detects the browser window's edges and will make sure that the tooltips are always in the viewport. 15 * 16 * The tooltips are created using NO IMAGES and falls back gracefully for browsers that don't support all the fancy stuff; 17 * also, tooltips can be attached to any element not just anchor tags! 18 * 19 * Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+ 20 * 21 * Read more {@link https://github.com/stefangabos/Zebra_Tooltips/ here} 22 * 23 * @author Stefan Gabos <[email protected]> 24 * @version 2.2.0 (last revision: November 12, 2021) 25 * @copyright (c) 2012 - 2021 Stefan Gabos 26 * @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU LESSER GENERAL PUBLIC LICENSE 27 * @package Zebra_Tooltips 28 */ 29 (function($) { 30 31 'use strict'; 32 33 $.Zebra_Tooltips = function(elements, options) { 34 35 // so you can tell the version number even if all you have is the minified source 36 this.version = '2.2
vendor: 18,727 bytes, lines 36-387
36.0'; 37 38 var defaults = { 39 40 animation_speed: 250, // The speed (in milliseconds) of the animation used to show/hide tooltips. 41 // 42 // Default is 250 43 44 animation_offset: 20, // The number of pixels the tooltips should use to "slide" into position. 45 // 46 // Set to 0 for no sliding. 47 // 48 // Default is 20 49 50 close_on_click: true, // By default, if the users clicks when over a tooltip, the tooltip will 51 // close (if the tooltip was not open using the API, that is) 52 // 53 // Set this property to FALSE to prevent this behavior. 54 // 55 // Default is TRUE 56 57 content: false, // The content of the tooltip. 58 // 59 // By default, the content of the tooltip is taken from the "title" 60 // attribute of the element the tooltip is attached to and has priority 61 // over this property (meaning that if the "title" attribute is set, 62 // the value of this property is ignored). 63 // 64 // Use this property to set the content of the tooltip when you can't 65 // or don't want to use the "title" attribute. 66 // 67 // Default is FALSE 68 69 hide_delay: 100, // The delay (in milliseconds) after which to hide the tooltip once the 70 // mouse moves away from the trigger element or the tooltip. 71 // 72 // Default is 100 73 74 keep_visible: true, // Should tooltips remain visible also when the mouse cursor is over 75 // the tooltips or should the tooltips be visible strictly when the mouse 76 // cursor is over the parent elements. 77 // 78 // Default is TRUE 79 80 max_width: 250, // Maximum width of the tooltip's content; 81 // 82 // Default is 250 83 84 opacity: '.95', // The tooltip's opacity. 85 // 86 // Must be a value between 0 (completely transparent) and 1 (completely 87 // opaque) 88 // 89 // Default is .85 90 91 position: 'center', // The tooltip's position, relative to the trigger element. 92 // 93 // Can be 'center', 'left' or 'right'. 94 // 95 // Default is 'center' 96 97 prerender: false, // If set to TRUE, tooltips will be created on document load, rather than 98 // only when needed. 99 // 100 // Default is FALSE 101 102 show_delay: 100, // The delay (in milliseconds) after which to show the tooltip once the 103 // mouse is over the trigger element. 104 // 105 // Default is 100 106 107 vertical_alignment: 'above', // By default, tooltips are shown above the elements they are attached to 108 // and are shown below only if there isn't enough space above. 109 // 110 // Set the value of this property to "below" if you want to reverse the 111 // default behavior so that tooltips will be shown below the elements 112 // they are attached to and will be shown above only there isn't enough 113 // space below. 114 // 115 // Possible values are "above" and "below". 116 // 117 // Default is "above" 118 119 vertical_offset: 0, // How close (in pixels) should the tip of the tooltip be relative to 120 // the parent element. 121 // 122 // Default is 0 123 124 onBeforeHide: null, // Event fired before a tooltip is hidden. 125 // 126 // The callback function receives as arguments the element the 127 // tooltip is attached to, and the tooltip element. 128 // 129 // If the callback function returns boolean FALSE, the tooltip will 130 // not be hidden. 131 132 onHide: null, // Event fired after a tooltip is hidden. 133 // 134 // The callback function receives as arguments the element the 135 // tooltip is attached to, and the tooltip element. 136 137 onBeforeShow: null, // Event fired before a tooltip is shown. 138 // 139 // The callback function receives as arguments the element the 140 // tooltip is attached to, and the tooltip element. 141 // 142 // If the callback function returns boolean FALSE, the tooltip will 143 // not be shown. 144 145 onShow: null // Event fired after a tooltip is shown. 146 // 147 // The callback function receives as arguments the element the 148 // tooltip is attached to, and the tooltip element. 149 150 }, 151 152 // to avoid confusions, we use "plugin" to reference the current instance of the object 153 plugin = this, 154 155 // private variables used throughout the script 156 window_width, window_height, horizontal_scroll, vertical_scroll, 157 158 /** 159 * Constructor method 160 * 161 * @return void 162 * 163 * @access private 164 */ 165 _init = function() { 166 167 // the plugin's final properties are the merged default and user-provided options (if any) 168 // iterate through the elements we need to attach the plugin to 169 elements.each(function() { 170 171 var 172 173 // reference to the jQuery version of the element 174 $element = $(this), 175 176 // the element's title attribute (if any) 177 title = $element.attr('title'), 178 179 // get any options given as data attributes 180 data_attributes = $element.data(), 181 182 data, tooltip_settings = {}; 183 184 // iterate through the element's data attributes (if any) 185 for (data in data_attributes) 186 187 // if data attribute's name starts with "ztt_" 188 if (data.indexOf('ztt_') === 0) { 189 190 // remove the "ztt_" prefix 191 data = data.replace(/^ztt\_/, ''); 192 193 // if such a property exists 194 if (undefined !== defaults[data]) 195 196 // update the property's value 197 tooltip_settings[data] = data_attributes['ztt_' + data]; 198 199 } 200 201 // the current tooltip's settings are the default ones merged with the ones set when initializing 202 // the plugin and merged with any data attributes set for the parent element 203 tooltip_settings = $.extend(defaults, options, tooltip_settings); 204 205 // if the element's title attribute is set, that has the highest priority for content 206 if (title) tooltip_settings.content = $element.attr('title'); 207 208 // if tooltip has any content 209 if (undefined !== tooltip_settings.content && tooltip_settings.content.trim() !== '') { 210 211 // when mouse cursor enters the parent element (or element receives focus) 212 $element.on('mouseenter focus', function() { 213 214 // clear the "title" attribute (if present) to prevent browser's default behavior 215 if (title) $(this).attr('title', ''); 216 217 // show the attached tooltip 218 _show($element); 219 220 }); 221 222 // when mouse cursor leaves the parent element (or looses focus) 223 $element.on('mouseleave blur', function() { 224 225 // hide the attached tooltip 226 _hide($element); 227 228 // if "title" attribute was present, set it back to its original state 229 if (title) $(this).attr('title', title); 230 231 }); 232 233 // initialize and cache tooltip data 234 $element.data('Zebra_Tooltip', $.extend({ 235 tooltip: null, 236 show_timeout: null, 237 hide_timeout: null, 238 sticky: false, 239 destroy: false, 240 muted: false 241 }, tooltip_settings)); 242 243 // if tooltips are to be pre-generated, generate them now 244 if (tooltip_settings.prerender) _create_tooltip($element); 245 246 } 247 248 }); 249 250 }, 251 252 /** 253 * Generates a tooltip's HTML code and inserts it into the DOM. 254 * It returns an object containing references to the tooltip's components. 255 * 256 * If the tooltip already exists, the method will simply return the object with references to the tooltip's 257 * components. 258 * 259 * @param jQuery $element The jQuery version of a DOM element to which to attach the tooltip to. 260 * 261 * @return object Returns an object containing references to the tooltip's components. 262 * 263 * @access private 264 */ 265 _create_tooltip = function($element) { 266 267 // get a reference to the tooltip and its components, if available 268 var tooltip_settings = $element.data('Zebra_Tooltip'), 269 tooltip, message, arrow_container, arrow, tooltip_width, tooltip_height, arrow_width, arrow_height, 270 tmp_width, tmp_height, browser_window = $(window), element_position, tooltip_left, tooltip_top, arrow_left; 271 272 // if tooltip's HTML was not yet created 273 if (!tooltip_settings.tooltip) { 274 275 // create the tooltip's main container 276 tooltip = $('<div>', { 277 278 class: 'Zebra_Tooltip', 279 280 css: { 281 opacity: 0, 282 display: 'block' 283 } 284 285 }); 286 287 // create the tooltip's message container 288 message = $('<div>', { 289 290 class: 'Zebra_Tooltip_Message', 291 292 css: { 293 maxWidth: tooltip_settings.max_width 294 } 295 296 // add the content of the tooltip 297 // using either the message given as argument when instantiating the object, 298 // or the message contained in the "title" attribute of the parent element 299 }).html(tooltip_settings.content) 300 301 // append the element to the main container 302 .appendTo(tooltip); 303 304 // create the tooltip's arrow container 305 arrow_container = $('<div>', { 306 307 class: 'Zebra_Tooltip_Arrow' 308 309 // append the element to the main container 310 }).appendTo(tooltip); 311 312 // the actual arrow will consist of 2 divs 313 // a larger one for emulating the border... 314 arrow = $('<div>').addClass('Zebra_Tooltip_Arrow_Border').appendTo(arrow_container); 315 316 // ...and another one for emulating the tooltip's background 317 $('<div>').appendTo(arrow_container); 318 319 // if tooltip is to be kept visible when mouse cursor is over the tooltip 320 if (tooltip_settings.keep_visible) { 321 322 // when mouse leaves the tooltip's surface or the tooltip is clicked 323 tooltip.on('mouseleave' + (tooltip_settings.close_on_click ? ' click' : ''), function() { 324 325 // hide the tooltip 326 _hide($element); 327 328 }); 329 330 // when mouse enters the tooltip's surface 331 tooltip.on('mouseenter', function() { 332 333 // keep the tooltip visible 334 _show($element); 335 336 }); 337 338 } 339 340 // inject the tooltip into the DOM 341 // (so that we can get its dimensions) 342 tooltip.appendTo('body'); 343 344 // if the "close" button needs to be shown 345 // we need to add a class to extend the padding on the right side of the tooltip in order to accommodate the button's presence 346 if (tooltip_settings.sticky) message.addClass('Zebra_Tooltip_Has_Close'); 347 348 // get tooltip's width and height 349 tooltip_width = tooltip.outerWidth(); 350 tooltip_height = tooltip.outerHeight(); 351 352 // get arrow's width and height 353 arrow_width = arrow.outerWidth(); 354 arrow_height = arrow.outerHeight(); 355 356 // in IE9, after hard-coding the width (see below), the box's actual width changes with a few pixels, 357 // but enough to sometimes trigger the wrapping of the text; this results in the "message" element having 358 // a greater actual height than the one we're just about to hard-coded and this, in turn, results in the 359 // arrow not being visible; therefore, save the values now 360 tmp_width = message.outerWidth(); 361 tmp_height = message.outerHeight(); 362 363 // group all data together 364 tooltip_settings = { 365 tooltip: tooltip, 366 tooltip_width: tooltip_width, 367 tooltip_height: tooltip_height + (arrow_height / 2), 368 message: message, 369 arrow_container: arrow_container, 370 arrow_width: arrow_width, 371 arrow_height: arrow_height, 372 arrow: arrow 373 }; 374 375 // hard-code the tooltip's width and height so it doesn't gets broken due to word wrapping when the 376 // tooltip is too close to the edges of the browser's window 377 tooltip.css({ 378 width: tooltip_settings.tooltip_width, 379 height: tooltip_settings.tooltip_height 380 }); 381 382 // adjust, if needed, the values representing the tooltip's width/height 383 tooltip_settings.tooltip_width = tooltip_settings.tooltip_width + (message.outerWidth() - tmp_width); 384 tooltip_settings.tooltip_height = tooltip_settings.tooltip_height + (message.outerHeight() - tmp_height); 385 386 // adjust, if needed, the tooltip's width/height, and hide it for now 387
387tooltip.css({ 388 width: tooltip_settings.tooltip_width
vendor: 21,188 bytes, lines 388-860
388, 389 height: tooltip_settings.tooltip_height, 390 display: 'none' 391 }); 392 393 // merge new tooltip data with tooltip data created when instantiating the library 394 tooltip_settings = $.extend($element.data('Zebra_Tooltip'), tooltip_settings); 395 396 // cache updated tooltip data 397 $element.data('Zebra_Tooltip', tooltip_settings); 398 399 } 400 401 // if tooltip was triggered programmatically and the "close" button was not yet added 402 if (tooltip_settings.sticky && !tooltip_settings.close) { 403 404 // create the "close" button 405 $('<a>', { 406 407 class: 'Zebra_Tooltip_Close', 408 href: 'javascript:void(0)' 409 410 // when the button is clicked 411 }).html('×').on('click', function(e) { 412 413 e.preventDefault(); 414 415 // get a reference to the attached tooltip and its components 416 var tooltip_settings = $element.data('Zebra_Tooltip'); 417 418 // set this flag to FALSE so we can hide the tooltip 419 tooltip_settings.sticky = false; 420 421 // cache updated tooltip data 422 $element.data('Zebra_Tooltip', tooltip_settings); 423 424 // hide the tooltip 425 _hide($element); 426 427 // add the "close" button to the tooltip 428 }).appendTo(tooltip_settings.message); 429 430 // make sure we only create the "close" button once 431 tooltip_settings.close = true; 432 433 // update tooltip data 434 tooltip_settings = $.extend($element.data('Zebra_Tooltip'), tooltip_settings); 435 436 // cache updated tooltip data 437 $element.data('Zebra_Tooltip', tooltip_settings); 438 439 } 440 441 // get the browser window's width 442 window_width = browser_window.width(); 443 444 // get the browser window's height 445 window_height = browser_window.height(); 446 447 // get the element's position, relative to the document 448 element_position = $element.offset(); 449 450 // cache element's position and size 451 $.extend(tooltip_settings, { 452 453 element_left: element_position.left, 454 element_top: element_position.top, 455 element_width: $element.outerWidth(), 456 element_height: $element.outerHeight() 457 458 }); 459 460 // get the browser window's horizontal and vertical scroll offsets 461 vertical_scroll = browser_window.scrollTop(); 462 horizontal_scroll = browser_window.scrollLeft(); 463 464 // compute tooltip's and the arrow's positions 465 tooltip_left = tooltip_settings.position === 'left' ? tooltip_settings.element_left - tooltip_settings.tooltip_width + tooltip_settings.arrow_width : 466 (tooltip_settings.position === 'right' ? tooltip_settings.element_left + tooltip_settings.element_width - tooltip_settings.arrow_width : 467 (tooltip_settings.element_left + (tooltip_settings.element_width - tooltip_settings.tooltip_width) / 2)); 468 469 tooltip_top = tooltip_settings.element_top - tooltip_settings.tooltip_height; 470 471 arrow_left = tooltip_settings.position === 'left' ? tooltip_settings.tooltip_width - tooltip_settings.arrow_width - (tooltip_settings.arrow_width / 2) : 472 (tooltip_settings.position === 'right' ? (tooltip_settings.arrow_width / 2) : 473 ((tooltip_settings.tooltip_width - tooltip_settings.arrow_width) / 2)); 474 475 // if tooltip's right side is outside te visible part of the browser's window 476 if (tooltip_left + tooltip_settings.tooltip_width > window_width + horizontal_scroll) { 477 478 // adjust the arrow's position 479 arrow_left -= (window_width + horizontal_scroll) - (tooltip_left + tooltip_settings.tooltip_width) - 6; 480 481 // adjust the tooltip's position 482 tooltip_left = (window_width + horizontal_scroll) - tooltip_settings.tooltip_width - 6; 483 484 // if after the adjustment, the arrow still needs to be adjusted 485 if (arrow_left + tooltip_settings.arrow_width > tooltip_settings.tooltip_width - 6) 486 487 // adjust the arrow's position 488 arrow_left = tooltip_settings.tooltip_width - 6 - tooltip_settings.arrow_width; 489 490 // if there is no space to show the arrow, hide it 491 if (tooltip_left + arrow_left + (tooltip_settings.arrow_width / 2) < tooltip_settings.element_left) arrow_left = -10000; 492 493 } 494 495 // if tooltip's left side is outside te visible part of the browser's window 496 if (tooltip_left < horizontal_scroll) { 497 498 // adjust the arrow's position 499 arrow_left -= horizontal_scroll - tooltip_left; 500 501 // adjust the tooltip's position 502 tooltip_left = horizontal_scroll + 2; 503 504 // if after the adjustment, the arrow still needs to be adjusted 505 if (arrow_left < 0) 506 507 // adjust the arrow's position 508 arrow_left = (tooltip_settings.arrow_width / 2); 509 510 // if there is no space to show the arrow, hide it 511 if (tooltip_left + arrow_left + (tooltip_settings.arrow_width / 2) > tooltip_settings.element_left + tooltip_settings.element_width) arrow_left = -10000; 512 513 } 514 515 // by default, we assume the tooltip is centered above the element and therefore the arrow is at bottom of the tooltip 516 // (we remove everything that might have been set on a previous iteration) 517 tooltip_settings.message.css('margin-top', ''); 518 519 // in this case, the arrow need to point downwards rather than upwards 520 // and be placed beneath the body of the tooltip and not above 521 tooltip_settings.arrow_container.removeClass('Zebra_Tooltip_Arrow_Top').addClass('Zebra_Tooltip_Arrow_Bottom'); 522 523 // if 524 if ( 525 526 // top of the tooltip is outside the visible part of the browser's window OR 527 tooltip_top < vertical_scroll || 528 529 // tooltips are to be shown from below the element, and there is enough space below the element to show the tooltip 530 (tooltip_settings.vertical_alignment === 'below' && tooltip_settings.element_top + tooltip_settings.element_height + tooltip_settings.vertical_offset + tooltip_settings.tooltip_height + tooltip_settings.animation_offset < window_height + vertical_scroll) 531 532 ) { 533 534 // place the tooltip beneath the element, rather than above, also account for the offset 535 tooltip_top = tooltip_settings.element_top + tooltip_settings.element_height - tooltip_settings.vertical_offset; 536 537 // the tooltip will slide upwards, rather than downwards 538 tooltip_settings.animation_offset = Math.abs(tooltip_settings.animation_offset); 539 540 // the body of the tooltip needs to be vertically aligned at the bottom 541 tooltip_settings.message.css('margin-top', (tooltip_settings.arrow_height / 2)); 542 543 // in this case, the arrow need to point upwards rather than downwards 544 // and be placed above the body of the tooltip and not beneath 545 tooltip_settings.arrow_container.removeClass('Zebra_Tooltip_Arrow_Bottom').addClass('Zebra_Tooltip_Arrow_Top'); 546 547 // if top of the tooltip is inside the visible part of the browser's window 548 } else { 549 550 // the tooltip will slide downwards 551 tooltip_settings.animation_offset = -Math.abs(tooltip_settings.animation_offset); 552 553 // account for the offset 554 tooltip_top += tooltip_settings.vertical_offset; 555 556 } 557 558 // set the arrow's horizontal position within the tooltip 559 tooltip_settings.arrow_container.css('left', arrow_left); 560 561 // set the tooltip's final position 562 tooltip_settings.tooltip.css({ 563 left: tooltip_left, 564 top: tooltip_top 565 }); 566 567 // update tooltip data 568 $.extend(tooltip_settings, { 569 570 tooltip_left: tooltip_left, 571 tooltip_top: tooltip_top, 572 arrow_left: arrow_left 573 574 }); 575 576 // update tooltip data 577 tooltip_settings = $.extend($element.data('Zebra_Tooltip'), tooltip_settings); 578 579 // cache updated tooltip data 580 $element.data('Zebra_Tooltip', tooltip_settings); 581 582 // return an object with tooltip data 583 return tooltip_settings; 584 585 }, 586 587 /** 588 * Shows the tooltip attached to the element given as argument. 589 * 590 * @param jQuery $element The jQuery version of a DOM element for which to show the attached plugin 591 * 592 * @return void 593 * 594 * @access private 595 */ 596 _show = function($element) { 597 598 // get a reference to the attached tooltip and its components 599 var tooltip_settings = $element.data('Zebra_Tooltip'); 600 601 // if there is already a timeout for showing the tooltip, cancel it 602 clearTimeout(tooltip_settings.show_timeout); 603 604 // if tooltip is not "muted" (case in which can only be shown using the API) 605 if (!tooltip_settings.muted) { 606 607 // clear the timeout for hiding the tooltip (if any) 608 clearTimeout(tooltip_settings.hide_timeout); 609 610 // show the tooltip, using the specified delay (if any) 611 tooltip_settings.show_timeout = setTimeout(function() { 612 613 // if not already created, create the tooltip 614 tooltip_settings = _create_tooltip($element); 615 616 // if a callback function exists to be run before showing a tooltip 617 if (tooltip_settings.onBeforeShow && typeof tooltip_settings.onBeforeShow === 'function') 618 619 // execute the callback function 620 // don't go further if the callback function returned boolean FALSE 621 if (tooltip_settings.onBeforeShow($element, tooltip_settings.tooltip) === false) return; 622 623 // if tooltip is not already being animated 624 if (tooltip_settings.tooltip.css('display') !== 'block') 625 626 // set the tooltip's top so we can "slide" it in 627 tooltip_settings.tooltip.css({ 628 top: tooltip_settings.tooltip_top + tooltip_settings.animation_offset 629 }); 630 631 // set the tooltip's "display" property to "block" 632 tooltip_settings.tooltip.css('display', 'block'); 633 634 // if the tooltip was in the midst of an animation, stop that 635 tooltip_settings.tooltip.stop(); 636 637 // animate the tooltip 638 tooltip_settings.tooltip.animate({ 639 640 top: tooltip_settings.tooltip_top, 641 opacity: tooltip_settings.opacity 642 643 // using the specified speed 644 }, tooltip_settings.animation_speed, function() { 645 646 // if a callback function exists to be run after showing a tooltip 647 if (tooltip_settings.onShow && typeof tooltip_settings.onShow === 'function') 648 649 // execute the callback function 650 tooltip_settings.onShow($element, tooltip_settings.tooltip); 651 652 }); 653 654 // the delay after which to show the plugin 655 }, tooltip_settings.show_delay); 656 657 } 658 659 }, 660 661 /** 662 * Hides the tooltip attached to the element given as argument. 663 * 664 * @param jQuery $element The jQuery version of a DOM element for which to hide the attached plugin 665 * 666 * @return void 667 * 668 * @access private 669 */ 670 _hide = function($element) { 671 672 // get information about the tooltip attached to the element given as argument 673 var tooltip_settings = $element.data('Zebra_Tooltip'); 674 675 // if there is already a timeout for hiding the tooltip, cancel it 676 clearTimeout(tooltip_settings.hide_timeout); 677 678 // if tooltip is not sticky (when it can only be closed by the user) 679 if (!tooltip_settings.sticky) { 680 681 // clear the timeout for showing the tooltip (if any) 682 clearTimeout(tooltip_settings.show_timeout); 683 684 // hide the tooltip, using the specified delay (if any) 685 tooltip_settings.hide_timeout = setTimeout(function() { 686 687 // if there is a tooltip attached to the element 688 // (as one can call the hide() method method prior of the tooltip being ever shown) 689 if (tooltip_settings.tooltip) { 690 691 // if a callback function exists to be run before hiding a tooltip 692 if (tooltip_settings.onBeforeHide && typeof tooltip_settings.onBeforeHide === 'function') 693 694 // execute the callback function 695 // don't go further if the callback function returned boolean FALSE 696 if (tooltip_settings.onBeforeHide($element, tooltip_settings.tooltip) === false) return; 697 698 // set this flag to FALSE so that the script knows that it has to add the "close" button again 699 // if the tooltip is shown using the API 700 tooltip_settings.close = false; 701 702 // if tooltip needs to be destroyed once it fades out 703 if (tooltip_settings.destroy) 704 705 // set this flag now so that the tooltip is not shown again if the user quickly hovers 706 // the element while if fades out 707 tooltip_settings.muted = true; 708 709 // cache updated tooltip data 710 $element.data('Zebra_Tooltip', tooltip_settings); 711 712 // remove the "close" button 713 $('a.Zebra_Tooltip_Close', tooltip_settings.tooltip).remove(); 714 715 // if the tooltip was in the midst of an animation, stop that 716 tooltip_settings.tooltip.stop(); 717 718 // animate the tooltip 719 tooltip_settings.tooltip.animate({ 720 721 opacity: 0, 722 top: tooltip_settings.tooltip_top + tooltip_settings.animation_offset 723 724 // using the specified speed 725 }, tooltip_settings.animation_speed, function() { 726 727 // set the tooltip's "display" property to "none" 728 $(this).css('display', 'none'); 729 730 // if a callback function exists to be run after hiding a tooltip 731 if (tooltip_settings.onHide && typeof tooltip_settings.onHide === 'function') 732 733 // execute the callback function 734 tooltip_settings.onHide($element, tooltip_settings.tooltip); 735 736 }); 737 738 } 739 740 // the delay after which to hide the plugin 741 }, tooltip_settings.hide_delay); 742 743 } 744 745 }; 746 747 /** 748 * Hides the tooltips attached to the element(s) given as argument. 749 * 750 * @param jQuery elements A jQuery selector of element(s) for which to hide the attached tooltips. 751 * 752 * @param boolean destroy If set to TRUE, once hidden, the tooltip will be "muted" and will *not* be 753 * shown again when the user hovers the parent element with the mouse. 754 * 755 * In this case, the tooltip can be shown again only by calling the {@link show()} 756 * method. 757 * 758 * Default is FALSE 759 * 760 * @return void 761 */ 762 plugin.hide = function(elements, destroy) { 763 764 // iterate through the elements given as argument 765 elements.each(function() { 766 767 var 768 769 // the current element 770 $element = $(this), 771 772 // get a reference to the attached tooltip and its components 773 tooltip_settings = $element.data('Zebra_Tooltip'); 774 775 // if there is a tooltip attached 776 if (tooltip_settings) { 777 778 // set this flag to FALSE so we can hide the tooltip 779 tooltip_settings.sticky = false; 780 781 // set a flag if tooltip needs to be "muted" after hiding it 782 if (destroy) tooltip_settings.destroy = true; 783 784 // cache updated tooltip data 785 $element.data('Zebra_Tooltip', tooltip_settings); 786 787 // show the tooltip 788 _hide($element); 789 790 } 791 792 }); 793 794 }; 795 796 /** 797 * Shows the tooltips attached to the element(s) given as argument. 798 * 799 * When showing a tooltip using this method, the tooltip can only be closed by the user clicking on the "close" 800 * icon on the tooltip (which is automatically added when using this method) or by calling the {@link hide()} 801 * method. 802 * 803 * @param jQuery elements A jQuery selector of element(s) for which to show the attached tooltips. 804 * 805 * @param boolean destroy If set to TRUE, once the user clicks the "close" button, the tooltip will be 806 * "muted" and will *not* be shown when the user hovers the parent element with 807 * the mouse. 808 * 809 * In this case, the tooltip can be shown again only by calling this method. 810 * 811 * If set to FALSE, the tooltip will be shown whenever the user hovers the parent 812 * element with the mouse, only it will not have the "close" button anymore. 813 * 814 * Default is FALSE. 815 * 816 * @return void 817 */ 818 plugin.show = function(elements, destroy) { 819 820 // iterate through the elements given as argument 821 elements.each(function() { 822 823 var 824 825 // the current element 826 $element = $(this), 827 828 // get a reference to the attached tooltip and its components 829 tooltip_settings = $element.data('Zebra_Tooltip'); 830 831 // if there is a tooltip attached 832 if (tooltip_settings) { 833 834 // when shown using the API, the tooltip can be hidden only by clicking on the "close" button 835 tooltip_settings.sticky = true; 836 837 // set this to FALSE so we can show the tooltip 838 tooltip_settings.muted = false; 839 840 // set a flag if tooltip needs to "muted" after hiding 841 if (destroy) tooltip_settings.destroy = true; 842 843 // cache updated tooltip data 844 $element.data('Zebra_Tooltip', tooltip_settings); 845 846 // show the tooltip 847 _show($element); 848 849 } 850 851 }); 852 853 }; 854 855 // fire it up! 856 _init(); 857 858 }; 859 860})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.