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 22(function($){ 23 $.fn.tipTip = function(options) { 24 var defaults = { 25 activation: "hover", 26 keepAlive: false, 27 maxWidth: "400px", 28 edgeOffset: 3, 29 defaultPosition: "bottom", 30 delay: 400, 31 fadeIn: 200, 32 fadeOut: 200, 33 attribute: "title", 34 content: false, // HTML or String to fill TipTIp with 35 enter: function(){}, 36 exit: function(){} 37 }; 38 var opts = $.extend(defaults, options); 39 40 // Setup tip tip elements and render them to the DOM 41 if($("#tiptip_holder").length <= 0){ 42 var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>'); 43 var tiptip_content = $('<div id="tiptip_content"></div>'); 44 //var tiptip_arrow = $('<div id="tiptip_arrow"></div>'); 45 //$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>'))); 46 $("body").append(tiptip_holder.html(tiptip_content)); 47 } else { 48 var tiptip_holder = $("#tiptip_holder"); 49 var tiptip_content = $("#tiptip_content"); 50 //var tiptip_arrow = $("#tiptip_arrow"); 51 } 52 53 return this.each(function(){ 54 var org_elem = $(this); 55 if(opts.content){ 56 var org_title = opts.content; 57 } else { 58 var org_title = org_elem.attr(opts.attribute); 59 } 60 if(org_title != ""){ 61 if(!opts.content){ 62 org_elem.removeAttr(opts.attribute); //remove original Attribute 63 } 64 var timeout = false; 65 66 if(opts.activation == "hover"){ 67 org_elem.hover(function(){ 68 active_tiptip(); 69 }, function(){ 70 if(!opts.keepAlive){ 71 deactive_tiptip(); 72 } 73 }); 74 if(opts.keepAlive){ 75 tiptip_holder.hover(function(){}, function(){ 76 deactive_tiptip(); 77 }); 78 } 79 } else if(opts.activation == "focus"){ 80 org_elem.focus(function(){ 81 active_tiptip(); 82 }).blur(function(){ 83 deactive_tiptip(); 84 }); 85 } else if(opts.activation == "click"){ 86 org_elem.click(function(){ 87 active_tiptip(); 88 return false; 89 }).hover(function(){},function(){ 90 if(!opts.keepAlive){ 91 deactive_tiptip(); 92 } 93 }); 94 if(opts.keepAlive){ 95 tiptip_holder.hover(function(){}, function(){ 96 deactive_tiptip(); 97 }); 98 } 99 } 100 101 function active_tiptip(){ 102 opts.enter.call(this); 103 tiptip_content.html(org_title); 104 tiptip_holder.hide().removeAttr("class").css("margin","0"); 105 //tiptip_arrow.removeAttr("style"); 106 107 var top = parseInt(org_elem.offset()['top']); 108 var left = parseInt(org_elem.offset()['left']); 109 var org_width = parseInt(org_elem.outerWidth()); 110 var org_height = parseInt(org_elem.outerHeight()); 111 var tip_w = tiptip_holder.outerWidth(); 112 var tip_h = tiptip_holder.outerHeight(); 113 var w_compare = Math.round((org_width - tip_w) / 2); 114 var h_compare = Math.round((org_height - tip_h) / 2); 115 var marg_left = Math.round(left + w_compare); 116 var marg_top = Math.round(top + org_height + opts.edgeOffset); 117 var t_class = ""; 118 var arrow_top = ""; 119 var arrow_left = Math.round(tip_w - 12) / 2; 120 121 if(opts.defaultPosition == "bottom"){ 122 t_class = "_bottom"; 123 } else if(opts.defaultPosition == "top"){ 124 t_class = "_top"; 125 } else if(opts.defaultPosition == "left"){ 126 t_class = "_left"; 127 } else if(opts.defaultPosition == "right"){ 128 t_class = "_right"; 129 } 130 131 var right_compare = (w_compare + left) < parseInt($(window).scrollLeft()); 132 var left_compare = (tip_w + left) > parseInt($(window).width()); 133 134 if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){ 135 t_class = "_right"; 136 arrow_top = Math.round(tip_h - 13) / 2; 137 arrow_left = -12; 138 marg_left = Math.round(left + org_width + opts.edgeOffset); 139 marg_top = Math.round(top + h_compare); 140 } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){ 141 t_class = "_left"; 142 arrow_top = Math.round(tip_h - 13) / 2; 143 arrow_left = Math.round(tip_w); 144 marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5)); 145 marg_top = Math.round(top + h_compare); 146 } 147 148 var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop()); 149 var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0; 150 151 if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){ 152 if(t_class == "_top" || t_class == "_bottom"){ 153 t_class = "_top"; 154 } else { 155 t_class = t_class+"_top"; 156 } 157 arrow_top = tip_h;
158 marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset)); 159 } else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){ 160 if(t_class == "_top" || t_class == "_bottom"){ 161 t_class = "_bottom"; 162 } else { 163 t_class = t_class+"_bottom"; 164 } 165 arrow_top = -12; 166 marg_top = Math.round(top + org_height + opts.edgeOffset); 167 } 168 169 if(t_class == "_right_top" || t_class == "_left_top"){ 170 marg_top = marg_top + 5; 171 } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){ 172 marg_top = marg_top - 5; 173 } 174 if(t_class == "_left_top" || t_class == "_left_bottom"){ 175 marg_left = marg_left + 5; 176 } 177 //tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"}); 178 tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class); 179 180 if (timeout){ clearTimeout(timeout); } 181 timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay); 182 } 183 184 function deactive_tiptip(){ 185 opts.exit.call(this); 186 if (timeout){ clearTimeout(timeout); } 187 tiptip_holder.fadeOut(opts.fadeOut); 188 } 189 } 190 }); 191 } 192})(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.