jquerytt.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /**
  2. * jQuery Tooltip Plugin
  3. *@requires jQuery v1.2.6
  4. * http://www.socialembedded.com/labs
  5. *
  6. * Copyright (c) Hernan Amiune (hernan.amiune.com)
  7. * Dual licensed under the MIT and GPL licenses:
  8. * http://www.opensource.org/licenses/mit-license.php
  9. * http://www.gnu.org/licenses/gpl.html
  10. *
  11. * Version: 1.0
  12. */
  13. (function($){ $.fn.invoiceTooltip = function(options){
  14. var defaults = {
  15. cssClass: "", //CSS class or classes to style the tooltip
  16. delay : 0, //The number of milliseconds before displaying the tooltip
  17. duration : 500, //The number of milliseconds after moving the mouse cusor before removing the tooltip.
  18. xOffset : 15, //X offset will allow the tooltip to appear offset by x pixels.
  19. yOffset : 15, //Y offset will allow the tooltip to appear offset by y pixels.
  20. opacity : 0, //0 is completely opaque and 100 completely transparent
  21. fadeDuration: 400 //[toxi20090112] added fade duration in millis (default = "normal")
  22. };
  23. var options = $.extend(defaults, options);
  24. return this.each(function(index) {
  25. var $this = $(this);
  26. //use just one div for all tooltips
  27. // [toxi20090112] allow the tooltip div to be already present (would break currently)
  28. $tooltip=$("#divTooltip");
  29. if($tooltip.length == 0){
  30. $tooltip = $('<div id="divTooltip"></div>');
  31. $('body').append($tooltip);
  32. $tooltip.hide();
  33. }
  34. //displays the tooltip
  35. $this.click( function(e){
  36. //compatibility issue
  37. e = e ? e : window.event;
  38. //don't hide the tooltip if the mouse is over the element again
  39. clearTimeout($tooltip.data("hideTimeoutId"));
  40. //set the tooltip class
  41. $tooltip.removeClass($tooltip.attr("class"));
  42. $tooltip.css("width","");
  43. $tooltip.css("height","");
  44. $tooltip.addClass(options.cssClass);
  45. $tooltip.css("opacity",1-options.opacity/100);
  46. $tooltip.css("position","absolute");
  47. //save the title text and remove it from title to avoid showing the default tooltip
  48. $tooltip.data("title",$this.attr("title"));
  49. $this.attr("title","");
  50. $tooltip.data("alt",$this.attr("alt"));
  51. $this.attr("alt","");
  52. //set the tooltip content
  53. $tooltip.html($tooltip.data("title"));
  54. // [toxi20090112] only use ajax if there actually is an href attrib present
  55. var href=$this.attr("href");
  56. // [Peter] href!="" added
  57. if(href!=undefined && href!="" && href != "#")
  58. $tooltip.html($.ajax({url:$this.attr("href"),async:false}).responseText);
  59. //set the tooltip position
  60. winw = $(window).width();
  61. w = $tooltip.width();
  62. xOffset = options.xOffset;
  63. //right priority
  64. if(w+xOffset+50 < winw-e.clientX)
  65. $tooltip.css("left", $(document).scrollLeft() + e.clientX+xOffset);
  66. else if(w+xOffset+50 < e.clientX)
  67. $tooltip.css("left", $(document).scrollLeft() + e.clientX-(w+xOffset));
  68. else{
  69. //there is more space at left, fit the tooltip there
  70. if(e.clientX > winw/2){
  71. $tooltip.width(e.clientX-50);
  72. $tooltip.css("left", $(document).scrollLeft() + 25);
  73. }
  74. //there is more space at right, fit the tooltip there
  75. else{
  76. $tooltip.width((winw-e.clientX)-50);
  77. $tooltip.css("left", $(document).scrollLeft() + e.clientX+xOffset);
  78. }
  79. }
  80. winh = $(window).height();
  81. h = $tooltip.height();
  82. yOffset = options.yOffset;
  83. //top position priority
  84. if(h+yOffset + 50 < e.clientY)
  85. $tooltip.css("top", $(document).scrollTop() + e.clientY-(h+yOffset));
  86. else if(h+yOffset + 50 < winh-e.clientY)
  87. $tooltip.css("top", $(document).scrollTop() + e.clientY+yOffset);
  88. else
  89. $tooltip.css("top", $(document).scrollTop() + 10);
  90. //start the timer to show the tooltip
  91. //[toxi20090112] modified to make use of fadeDuration option
  92. $tooltip.data("showTimeoutId", setTimeout("$tooltip.fadeIn("+options.fadeDuration+")",options.delay));
  93. });
  94. $this.mouseout(function(e){
  95. //restore the title
  96. $this.attr("title",$tooltip.data("title"));
  97. $this.attr("alt",$tooltip.data("alt"));
  98. //don't show the tooltip if the mouse left the element before the delay time
  99. clearTimeout($tooltip.data("showTimeoutId"));
  100. //start the timer to hide the tooltip
  101. //[toxi20090112] modified to make use of fadeDuration option
  102. $tooltip.data("hideTimeoutId", setTimeout("$tooltip.fadeOut("+options.fadeDuration+")",options.duration));
  103. });
  104. $this.click(function(e){
  105. e.preventDefault();
  106. });
  107. });
  108. }})(jQuery);