jQuery Tooltip: SmashingMag.com


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



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.