Advanced Search

jQuery Tooltip: SmashingMag.com

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. (function($) {
  2. 	$(document).ready(function() {
  3. 		for (var i = 1; i <= 4; i++) {
  4. 			(function() {
  5. 				var $symbol = $(".symbol-" + i);
  6. 				var $tooltip = $(".tooltip-" + i);
  7. 				var is_visible = false;
  8. 				var timeout = null;
  9. 				function update_visibility(new_visibility) {
  10. 					if (timeout) {
  11. 						window.clearTimeout(timeout);
  12. 						timeout = null;
  13. 					}
  14. 					timeout = window.setTimeout(function () {
  15. 						if (is_visible != new_visibility) {
  16. 							if (new_visibility) {
  17. 								if (jQuery.browser.msie) { // IE6 z-index BUG!!!!
  18. 									$("#navigation > ul").css("z-index", "-1");
  19. 									$("#content").css("z-index", "-1");
  20. 								}
  21. 								$tooltip.fadeIn();
  22. 							} else {
  23. 								if (jQuery.browser.msie) { // IE6 z-index BUG!!!!
  24. 									$("#navigation > ul").css("z-index", "10");
  25. 									$("#content").css("z-index", "1");
  26. 								}
  27. 								$tooltip.fadeOut();
  28. 							}
  29. 							is_visible = new_visibility;
  30. 						}
  31. 					}, 100);
  32. 				}
  33. 				$tooltip.hover(
  34. 					function() {
  35. 						update_visibility(true);
  36. 					},
  37. 					function() {
  38. 						update_visibility(false);
  39. 					}
  40. 				);
  41. 				$symbol.hover(
  42. 					function() { update_visibility(true); },
  43. 					function() { update_visibility(false); }
  44. 				);
  45. 			})();
  46. 		}
  47.  
  48. 		$('.smash-button').mousedown(
  49. 			function () {
  50. 				$(this).addClass('active');
  51. 			}
  52. 		).mouseup(
  53. 			function () {
  54. 				$(this).removeClass('active');
  55. 			}
  56. 		).hover(
  57. 			function () {
  58. 				$(this).addClass("hover");
  59. 			},
  60. 			function () {
  61. 				$(this).removeClass("hover");
  62. 			}
  63. 		);
  64. 	});
  65. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.