jquery.tipTip.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /*
  2. * TipTip
  3. * Copyright 2010 Drew Wilson
  4. * www.drewwilson.com
  5. * code.drewwilson.com/entry/tiptip-jquery-plugin
  6. *
  7. * Version 1.3 - Updated: Mar. 23, 2010
  8. *
  9. * This Plug-In will create a custom tooltip to replace the default
  10. * browser tooltip. It is extremely lightweight and very smart in
  11. * that it detects the edges of the browser window and will make sure
  12. * the tooltip stays within the current window size. As a result the
  13. * tooltip will adjust itself to be displayed above, below, to the left
  14. * or to the right depending on what is necessary to stay within the
  15. * browser window. It is completely customizable as well via CSS.
  16. *
  17. * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
  18. * http://www.opensource.org/licenses/mit-license.php
  19. * http://www.gnu.org/licenses/gpl.html
  20. */
  21. (function($){
  22. $.fn.tipTip = function(options) {
  23. var defaults = {
  24. activation: "hover",
  25. keepAlive: false,
  26. maxWidth: "200px",
  27. edgeOffset: 3,
  28. defaultPosition: "bottom",
  29. delay: 400,
  30. fadeIn: 200,
  31. fadeOut: 200,
  32. attribute: "title",
  33. content: false, // HTML or String to fill TipTIp with
  34. enter: function(){},
  35. exit: function(){}
  36. };
  37. var opts = $.extend(defaults, options);
  38. // Setup tip tip elements and render them to the DOM
  39. if($("#tiptip_holder").length <= 0){
  40. var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');
  41. var tiptip_content = $('<div id="tiptip_content"></div>');
  42. var tiptip_arrow = $('<div id="tiptip_arrow"></div>');
  43. $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
  44. } else {
  45. var tiptip_holder = $("#tiptip_holder");
  46. var tiptip_content = $("#tiptip_content");
  47. var tiptip_arrow = $("#tiptip_arrow");
  48. }
  49. return this.each(function(){
  50. var org_elem = $(this);
  51. if(opts.content){
  52. var org_title = opts.content;
  53. } else {
  54. var org_title = org_elem.attr(opts.attribute);
  55. }
  56. if(org_title != ""){
  57. if(!opts.content){
  58. org_elem.removeAttr(opts.attribute); //remove original Attribute
  59. }
  60. var timeout = false;
  61. if(opts.activation == "hover"){
  62. org_elem.hover(function(){
  63. active_tiptip();
  64. }, function(){
  65. if(!opts.keepAlive){
  66. deactive_tiptip();
  67. }
  68. });
  69. if(opts.keepAlive){
  70. tiptip_holder.hover(function(){}, function(){
  71. deactive_tiptip();
  72. });
  73. }
  74. } else if(opts.activation == "focus"){
  75. org_elem.focus(function(){
  76. active_tiptip();
  77. }).blur(function(){
  78. deactive_tiptip();
  79. });
  80. } else if(opts.activation == "click"){
  81. org_elem.click(function(){
  82. active_tiptip();
  83. return false;
  84. }).hover(function(){},function(){
  85. if(!opts.keepAlive){
  86. deactive_tiptip();
  87. }
  88. });
  89. if(opts.keepAlive){
  90. tiptip_holder.hover(function(){}, function(){
  91. deactive_tiptip();
  92. });
  93. }
  94. }
  95. function active_tiptip(){
  96. opts.enter.call(this);
  97. tiptip_content.html(org_title);
  98. tiptip_holder.hide().removeAttr("class").css("margin","0");
  99. tiptip_arrow.removeAttr("style");
  100. var top = parseInt(org_elem.offset()['top']);
  101. var left = parseInt(org_elem.offset()['left']);
  102. var org_width = parseInt(org_elem.outerWidth());
  103. var org_height = parseInt(org_elem.outerHeight());
  104. var tip_w = tiptip_holder.outerWidth();
  105. var tip_h = tiptip_holder.outerHeight();
  106. var w_compare = Math.round((org_width - tip_w) / 2);
  107. var h_compare = Math.round((org_height - tip_h) / 2);
  108. var marg_left = Math.round(left + w_compare);
  109. var marg_top = Math.round(top + org_height + opts.edgeOffset);
  110. var t_class = "";
  111. var arrow_top = "";
  112. var arrow_left = Math.round(tip_w - 12) / 2;
  113. if(opts.defaultPosition == "bottom"){
  114. t_class = "_bottom";
  115. } else if(opts.defaultPosition == "top"){
  116. t_class = "_top";
  117. } else if(opts.defaultPosition == "left"){
  118. t_class = "_left";
  119. } else if(opts.defaultPosition == "right"){
  120. t_class = "_right";
  121. }
  122. var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
  123. var left_compare = (tip_w + left) > parseInt($(window).width());
  124. if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
  125. t_class = "_right";
  126. arrow_top = Math.round(tip_h - 13) / 2;
  127. arrow_left = -12;
  128. marg_left = Math.round(left + org_width + opts.edgeOffset);
  129. marg_top = Math.round(top + h_compare);
  130. } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
  131. t_class = "_left";
  132. arrow_top = Math.round(tip_h - 13) / 2;
  133. arrow_left = Math.round(tip_w);
  134. marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
  135. marg_top = Math.round(top + h_compare);
  136. }
  137. var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
  138. var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
  139. if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){
  140. if(t_class == "_top" || t_class == "_bottom"){
  141. t_class = "_top";
  142. } else {
  143. t_class = t_class+"_top";
  144. }
  145. arrow_top = tip_h;
  146. marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
  147. } else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
  148. if(t_class == "_top" || t_class == "_bottom"){
  149. t_class = "_bottom";
  150. } else {
  151. t_class = t_class+"_bottom";
  152. }
  153. arrow_top = -12;
  154. marg_top = Math.round(top + org_height + opts.edgeOffset);
  155. }
  156. if(t_class == "_right_top" || t_class == "_left_top"){
  157. marg_top = marg_top + 5;
  158. } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
  159. marg_top = marg_top - 5;
  160. }
  161. if(t_class == "_left_top" || t_class == "_left_bottom"){
  162. marg_left = marg_left + 5;
  163. }
  164. tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
  165. tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
  166. if (timeout){ clearTimeout(timeout); }
  167. timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
  168. }
  169. function deactive_tiptip(){
  170. opts.exit.call(this);
  171. if (timeout){ clearTimeout(timeout); }
  172. tiptip_holder.fadeOut(opts.fadeOut);
  173. }
  174. }
  175. });
  176. }
  177. })(jQuery);