├── .gitignore ├── HISTORY.md ├── README.md ├── jquery.miniTip.min.js ├── miniTip.jquery.json ├── miniTip.min.css └── src ├── jquery.miniTip.js └── miniTip.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | ### Version 1.5.3 (July 15, 2012) ### 2 | * Added 'stemOff' option to correct stem positioning when a large browser-radius is used (cross browser solution, thanks Jason Day). 3 | * Correctly unbind HTML click event on miniTip hide. 4 | 5 | ### Version 1.5.2 (July 13, 2012) ### 6 | * Better organized codebase with /src folder and split the changelog into its own file. 7 | * Dynamically position arrow when large border-radius is used. 8 | 9 | ### Version 1.5.1 (June 30, 2012) ### 10 | * Switched to UglifyJS for minified version. 11 | * Fixed issue that added multiple click events to the html element. 12 | * Call the hide custom function on the correct tooltip when multiple miniTips are used on the same page. 13 | 14 | ### Version 1.5.0 (December 9, 2011) ### 15 | * Fix image map compatibility for Firefox and Opera. 16 | * Allow show() callback to access options and element context for dynamically overriding content (Wolfram Arnold). 17 | 18 | ### Version 1.4.4 (November 27, 2011) ### 19 | * Enabled better clickhandling with multiple miniTips (thanks Denis Krienbühl). 20 | 21 | ### Version 1.4.3 (September 20, 2011) ### 22 | * Added a render callback which is called when the element is shown (thanks Denis Krienbühl). 23 | * Changes manual hide function from $('#id').miniTip({hide: true}); to $('#id').miniTip({doHide: true}); to fix compatibility. 24 | 25 | ### Version 1.4.2 (September 12, 2011) ### 26 | * Added function to manually hide tooltip by calling $('#id').miniTip({hide: true}); 27 | 28 | ### Version 1.4.1 (August 22, 2011) ### 29 | * A few bug fixes associated with the corners feature in 1.4.0. 30 | 31 | ### Version 1.4.0 (August 21, 2011) ### 32 | * Fixed issue with tooltips going off the screen by adding automated support for anchors on the corners of the tooltips. 33 | * Fixed issue with blank tooltips showing on elements with no content or title specified. 34 | * Fixed mixing of spaces and tabs in miniTip.css. 35 | 36 | ### Version 1.3.2 (August 3, 2011) ### 37 | * Improvement to fix in 1.3.1. 38 | 39 | ### Version 1.3.1 (August 1, 2011) ### 40 | * Click behavior now works correctly when html is used within tooltip. 41 | 42 | ### Version 1.3.0 (July 28, 2011) ### 43 | * Added support for image maps. miniTip will detect and center itself in area. 44 | 45 | ### Version 1.2.6 (July 26, 2011) ### 46 | * maxW option now works as expected. 47 | 48 | ### Version 1.2.5 (July 23, 2011) ### 49 | * Fixed odd behavior when showing new tooltip when previous was still fading out. 50 | * Fixed bug that caused tooltips to randomly hide when long delays were used. 51 | * Fixed a bug that prevented a second tooltip from showing when the previous had aHide = false. 52 | 53 | ### Version 1.2.0 (July 23, 2011) ### 54 | * Cleaned and condensed code. 55 | * Fixed bug that caused multiple tooltips on the same page to all be the same size. 56 | 57 | ### Version 1.1.0 (July 22, 2011) ### 58 | * Automatic repositioning of the tooltip anchor point now works correctly on page scroll. 59 | * Bug fixed that caused odd behavior when the anchor was flush to the right of the screen. 60 | * Correctly declare aTop variable. 61 | * Improved commenting on CSS file. 62 | 63 | ### Version 1.0.1 (July 21, 2011) ### 64 | * Added fix for z-index issues in select cases. 65 | 66 | ### Version 1.0.0 (July 21, 2011) ### 67 | * Initial release. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery miniTip Plugin (v1.5.3) 2 | --------------------- 3 | 4 | License 5 | ======== 6 | Dual licensed under the MIT and GPL licenses: 7 | 8 | * http://www.opensource.org/licenses/mit-license.php 9 | * http://www.gnu.org/licenses/gpl.html 10 | 11 | Copyright 2011, James Simpson 12 | http://goldfirestudios.com 13 | 14 | Description 15 | =========== 16 | [miniTip](http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin) is an ultra lightweight jQuery plugin that creates highly customizable tooltips without all of the fluff. 17 | 18 | ### Features ### 19 | 20 | * JS + CSS is just 4.5kb minified (1.7kb gzipped)! 21 | * No images 22 | * Automatically stays within viewport 23 | * Automatic support for image maps 24 | * Extremely easy to style 25 | * Use text or HTML from title tag, hidden element, or JS declaration 26 | * Fade in and out 27 | * Set custom delay for show/hide 28 | * Specify default anchor position 29 | * Persistent tooltip that only closes when mouse moves off of tooltip and anchor element 30 | * Support for hover and click events 31 | * Optional title bar 32 | * Tested in: IE7+, Firefox 3.5+, Safari 3+, Chrome, Opera 10+ 33 | * More features can be found at the [miniTip](http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin) home page 34 | 35 | ### Documentation ### 36 | 37 | Please go to the [miniTip](http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin) home page to view the full documentation (it is really straightforward, I promise!). 38 | 39 | Examples 40 | ======== 41 | This is the most basic usage. It displays a miniTip on mouseover of the element with ID "tip" and content of the title tag (maximum width of 250px). Mouseout of the "tip" hides the miniTip. 42 | 43 | $('#tip').miniTip(); 44 | 45 | This is a more advanced example utilizing all available options (as of v1.0). The element with ID of "tip" will be activated by click instead of mouseover. It will have a title bar with text "Title Bar" and content defined in the JS call. It will wait .5s before showing and hiding the tooltip, and the fade animation will be .5s both ways. The default anchor position is east (the right side of the anchor element). Auto-hide is set to false, so the tooltip will only hide once your mouse is off of the tooltip and the anchor element. The max width is set to 50px and the offset is 15px, so the tooltip's stem will be 15px from the edge of the anchor element. Finally, an event will fire when the tooltip is shown (alerting "Hello,"), and another will be fired when it is hidden (alerting "World!"). 46 | 47 | $('#tip').miniTip({ 48 | title: 'Title Bar', 49 | content: 'This is a test miniTip!', 50 | delay: 500, 51 | anchor: 'e', 52 | event: 'click', 53 | fadeIn: 500, 54 | fadeOut: 500, 55 | aHide: false, 56 | maxW: '50px', 57 | offset: 15, 58 | stemOff: 0, 59 | show: function(){ alert('Hello,'); }, 60 | hide: funciton(){ alert('World!'); } 61 | }); 62 | 63 | More examples and live demos can be found at [http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin](http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin) 64 | 65 | Requirements 66 | ============ 67 | * jQuery v1.3+ -------------------------------------------------------------------------------- /jquery.miniTip.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * miniTip v1.5.3 3 | * 4 | * Updated: July 15, 2012 5 | * Requires: jQuery v1.3+ 6 | * 7 | * (c) 2011, James Simpson 8 | * http://goldfirestudios.com 9 | * 10 | * Dual licensed under the MIT and GPL 11 | * 12 | * Documentation found at: 13 | * http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin 14 | */ 15 | (function(e){e.fn.miniTip=function(t){var n={title:"",content:!1,delay:300,anchor:"n",event:"hover",fadeIn:200,fadeOut:200,aHide:!0,maxW:"250px",offset:5,stemOff:0,doHide:!1},r=e.extend(n,t);e("#miniTip")[0]||e("body").append('
');var i=e("#miniTip"),s=e("#miniTip_t"),o=e("#miniTip_c"),u=e("#miniTip_a");return r.doHide?(i.stop(!0,!0).fadeOut(r.fadeOut),!1):this.each(function(){var t=e(this),n=r.content?r.content:t.attr("title");if(n!=""&&typeof n!="undefined"){window.delay=!1;var a=!1,f=!0;r.content||t.removeAttr("title"),r.event=="hover"?(t.hover(function(){i.removeAttr("click"),f=!0,l.call(this)},function(){f=!1,c()}),r.aHide||i.hover(function(){a=!0},function(){a=!1,setTimeout(function(){!f&&!i.attr("click")&&c()},20)})):r.event=="click"&&(r.aHide=!0,t.click(function(){return i.attr("click","t"),i.data("last_target")!==t?l.call(this):i.css("display")=="none"?l.call(this):c(),i.data("last_target",t),e("html").unbind("click").click(function(t){i.css("display")=="block"&&!e(t.target).closest("#miniTip").length&&(e("html").unbind("click"),c())}),!1}));var l=function(){r.show&&r.show.call(this,r),r.content&&r.content!=""&&(n=r.content),o.html(n),r.title!=""?s.html(r.title).show():s.hide(),r.render&&r.render(i),u.removeAttr("class"),i.hide().width("").width(i.width()).css("max-width",r.maxW);var a=t.is("area");if(a){var f,l=[],c=[],h=t.attr("coords").split(",");function p(e,t){return e-t}for(f=0;fparseInt(e(window).width(),10),k=w+r.offset+8>m,L=E+r.offset+8>g-e(window).scrollTop(),A=g+b+E+r.offset+8>parseInt(e(window).height()+e(window).scrollTop(),10),O=r.anchor;if(k||r.anchor=="e"&&!C){if(r.anchor=="w"||r.anchor=="e")O="e",N=Math.round(E/2-8-parseInt(i.css("borderRightWidth"),10)),T=-8-parseInt(i.css("borderRightWidth"),10),S=m+y+r.offset+8,x=Math.round(g+b/2-E/2)}else if(C||r.anchor=="w"&&!k)if(r.anchor=="w"||r.anchor=="e")O="w",N=Math.round(E/2-8-parseInt(i.css("borderLeftWidth"),10)),T=w-parseInt(i.css("borderLeftWidth"),10),S=m-w-r.offset-8,x=Math.round(g+b/2-E/2);if(A||r.anchor=="n"&&!L){if(r.anchor=="n"||r.anchor=="s")O="n",N=E-parseInt(i.css("borderTopWidth"),10),x=g-(E+r.offset+8)}else if(L||r.anchor=="s"&&!A)if(r.anchor=="n"||r.anchor=="s")O="s",N=-8-parseInt(i.css("borderBottomWidth"),10),x=g+b+r.offset+8;r.anchor=="n"||r.anchor=="s"?w/2>m?(S=S<0?T+S:T,T=0):m+w/2>parseInt(e(window).width(),10)&&(S-=T,T*=2):L?(x+=N,N=0):A&&(x-=N,N*=2),u.css({"margin-left":(T>0?T:T+parseInt(r.stemOff,10)/2)+"px","margin-top":N+"px"}).attr("class",O),delay&&clearTimeout(delay),delay=setTimeout(function(){i.css({"margin-left":S+"px","margin-top":x+"px"}).stop(!0,!0).fadeIn(r.fadeIn)},r.delay)},c=function(){if(!r.aHide&&!a||r.aHide)delay&&clearTimeout(delay),delay=setTimeout(function(){h()},r.delay)},h=function(){!r.aHide&&!a||r.aHide?(i.stop(!0,!0).fadeOut(r.fadeOut),r.hide&&r.hide.call(this)):setTimeout(function(){c()},200)}}})}})(jQuery) -------------------------------------------------------------------------------- /miniTip.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "miniTip", 3 | "title": "miniTip", 4 | "description": "Ultra lightweight jQuery tooltip plugin.", 5 | "keywords": [ 6 | "tooltip", 7 | "tip", 8 | "ui" 9 | ], 10 | "version": "1.5.3", 11 | "author": { 12 | "name": "James Simpson", 13 | "url": "http://goldfirestudios.com" 14 | }, 15 | "maintainers": [ 16 | { 17 | "name": "James Simpson", 18 | "url": "http://goldfirestudios.com" 19 | } 20 | ], 21 | "licenses": [ 22 | { 23 | "type": "MIT", 24 | "url": "https://github.com/goldfire/miniTip" 25 | }, 26 | { 27 | "type": "GPL", 28 | "url": "https://github.com/goldfire/miniTip" 29 | } 30 | ], 31 | "bugs": "https://github.com/goldfire/miniTip/issues", 32 | "homepage": "http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin", 33 | "demo": "http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin", 34 | "docs": "http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin", 35 | "download": "http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin", 36 | "dependencies": { 37 | "jquery": ">=1.3" 38 | } 39 | } -------------------------------------------------------------------------------- /miniTip.min.css: -------------------------------------------------------------------------------- 1 | /*! miniTip CSS - v1.5.3 */ 2 | #miniTip{background-color:#f8f5ca;border:4px solid #eae4b4;color:#927847;font-size:.9em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:none;position:absolute;top:0;left:0;z-index:99999}#miniTip_t{background-color:#f5edc2;font-weight:700;padding:4px 6px}#miniTip_c{padding:4px 8px}#miniTip_a{width:0;height:0;position:absolute;top:0;left:0}#miniTip .n{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #eae4b4;border-bottom:0}#miniTip .s{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #eae4b4;border-top:0}#miniTip .e{border-bottom:8px solid transparent;border-top:8px solid transparent;border-right:8px solid #eae4b4;border-left:0}#miniTip .w{border-bottom:8px solid transparent;border-top:8px solid transparent;border-left:8px solid #eae4b4;border-right:0} -------------------------------------------------------------------------------- /src/jquery.miniTip.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * miniTip v1.5.3 3 | * 4 | * Updated: July 15, 2012 5 | * Requires: jQuery v1.3+ 6 | * 7 | * (c) 2011, James Simpson 8 | * http://goldfirestudios.com 9 | * 10 | * Dual licensed under the MIT and GPL 11 | * 12 | * Documentation found at: 13 | * http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin 14 | */ 15 | 16 | (function($){ 17 | $.fn.miniTip = function(opts) { 18 | // declare the default option values 19 | var d = { 20 | title: '', // if left blank, no title bar will show 21 | content: false, // the content of the tooltip 22 | delay: 300, // how long to wait before showing and hiding the tooltip (ms) 23 | anchor: 'n', // n (top), s (bottom), e (right), w (left) 24 | event: 'hover', // can be 'hover' or 'click' 25 | fadeIn: 200, // speed of fade in animation (ms) 26 | fadeOut: 200, // speed of fade out animation (ms) 27 | aHide: true, // set to false to only hide when the mouse moves away from the anchor and tooltip 28 | maxW: '250px', // max width of tooltip 29 | offset: 5, // offset in pixels of stem from anchor 30 | stemOff: 0, // x-axis offset of stem, set to value of border-radius to adjust for viewport correction 31 | doHide: false // call $('#id').miniTip({hide: true}); to manually hide the tooltip 32 | }, 33 | 34 | // merge the defaults with the user declared options 35 | o = $.extend(d, opts); 36 | 37 | // add the tip elements to the DOM 38 | if (!$('#miniTip')[0]) 39 | $('body').append('
'); 40 | 41 | // declare the containers 42 | var tt_w = $('#miniTip'), 43 | tt_t = $('#miniTip_t'), 44 | tt_c = $('#miniTip_c'), 45 | tt_a = $('#miniTip_a'); 46 | 47 | // manually hide the tooltip if $('#id').miniTip({hide: true}); is called 48 | if (o.doHide) { 49 | tt_w.stop(true,true).fadeOut(o.fadeOut); 50 | return false; 51 | } 52 | 53 | // initialize the tooltip 54 | return this.each(function(){ 55 | // make sure the anchor element can be referred to below 56 | var el = $(this); 57 | 58 | // if content is set to false, use the title attribute 59 | var cont = o.content ? o.content : el.attr('title'); 60 | 61 | // if the tooltip isn't empty 62 | if (cont != '' && typeof cont != 'undefined') { 63 | // declare the delay variable and make sure it is global 64 | window.delay = false; 65 | 66 | // declare the variables that check if the mouse is still on the tooltip 67 | var tHov = false, 68 | aHov = true; 69 | 70 | // if you are using the title attribute, remove it from the anchor 71 | if (!o.content) 72 | el.removeAttr('title'); 73 | 74 | if (o.event == 'hover') { 75 | // add the hover event 76 | el.hover( 77 | function(){ 78 | // make sure we know this wasn't activated by click 79 | tt_w.removeAttr('click'); 80 | 81 | // show the tooltip 82 | aHov = true; 83 | show.call(this); 84 | }, 85 | function(){ 86 | aHov = false; 87 | hide(); 88 | } 89 | ); 90 | 91 | // add a hover event for the tooltip if aHide is false 92 | if (!o.aHide) { 93 | tt_w.hover( 94 | function() { 95 | tHov = true; 96 | }, 97 | function() { 98 | tHov = false; 99 | setTimeout(function(){if (!aHov && !tt_w.attr('click')) hide()}, 20); 100 | } 101 | ); 102 | } 103 | } else if (o.event == 'click') { 104 | // make sure auto hide is set to false automatically 105 | o.aHide = true; 106 | 107 | // add the click event to the anchor 108 | el.click(function(){ 109 | // make sure we know this was activated by click 110 | tt_w.attr('click', 't'); 111 | 112 | if (tt_w.data('last_target') !== el) { 113 | // rerender the tooltip if the target changed 114 | show.call(this); 115 | } else { 116 | // show the tooltip, unless it is already showing, then close it 117 | if (tt_w.css('display') == 'none') show.call(this); else hide(); 118 | } 119 | 120 | tt_w.data('last_target', el); 121 | 122 | // clear the tooltip if anywhere but the tooltip itself is clicked 123 | $('html').unbind('click').click(function(e){ 124 | if (tt_w.css('display') == 'block' && !$(e.target).closest('#miniTip').length) { 125 | $('html').unbind('click'); 126 | hide(); 127 | } 128 | }); 129 | 130 | return false; 131 | }); 132 | } 133 | 134 | // show the tooltip 135 | var show = function() { 136 | // call the show callback function 137 | if (o.show) o.show.call(this, o); 138 | 139 | // use content set by callback, if any 140 | if (o.content && o.content != '') { 141 | cont = o.content; 142 | } 143 | 144 | // add in the content 145 | tt_c.html(cont); 146 | 147 | // insert the title (or hide if none is set) 148 | if (o.title != '') 149 | tt_t.html(o.title).show(); 150 | else 151 | tt_t.hide(); 152 | 153 | // call the render callback function 154 | if (o.render) o.render(tt_w); 155 | 156 | // reset arrow position 157 | tt_a.removeAttr('class'); 158 | 159 | // make sure the tooltip is the right width even if the anchor is flush to the right of the screen 160 | // set the max width 161 | tt_w.hide().width('').width(tt_w.width()).css('max-width', o.maxW); 162 | 163 | // add support for image maps 164 | var isArea = el.is('area'); 165 | if (isArea) { 166 | // declare variables to determine coordinates 167 | var i, 168 | x = [], 169 | y = [], 170 | c = el.attr('coords').split(','); 171 | 172 | // sortin funciton for coordinates 173 | function num (a, b) { 174 | return a - b; 175 | } 176 | 177 | // loop through the coordinates and populate x & y arrays 178 | for (i=0; i < c.length; i++){ 179 | x.push(c[i++]); 180 | y.push(c[i]); 181 | } 182 | 183 | // get the center coordinates of the area 184 | var mapImg = el.parent().attr('name'), 185 | mapOff = $('img[usemap=\\#' + mapImg + ']').offset(), 186 | left = parseInt(mapOff.left, 10) + parseInt((parseInt(x.sort(num)[0], 10) + parseInt(x.sort(num)[x.length-1], 10)) / 2, 10), 187 | top = parseInt(mapOff.top, 10) + parseInt((parseInt(y.sort(num)[0], 10) + parseInt(y.sort(num)[y.length-1], 10)) / 2, 10); 188 | } else { 189 | // get the coordinates of the element 190 | var top = parseInt(el.offset().top, 10), 191 | left = parseInt(el.offset().left, 10); 192 | } 193 | 194 | // get width and height of the anchor element 195 | var elW = isArea ? 0 : parseInt(el.outerWidth(), 10), 196 | elH = isArea ? 0 : parseInt(el.outerHeight(), 10), 197 | 198 | // get width and height of the tooltip 199 | tipW = tt_w.outerWidth(), 200 | tipH = tt_w.outerHeight(), 201 | 202 | // calculate position for tooltip 203 | mLeft = Math.round(left + Math.round((elW - tipW) / 2)), 204 | mTop = Math.round(top + elH + o.offset + 8), 205 | 206 | // position of the arrow 207 | aLeft = (Math.round(tipW - 16) / 2) - parseInt(tt_w.css('borderLeftWidth'), 10), 208 | aTop = 0, 209 | 210 | // figure out if the tooltip will go off of the screen 211 | eOut = (left + elW + tipW + o.offset + 8) > parseInt($(window).width(), 10), 212 | wOut = (tipW + o.offset + 8) > left, 213 | nOut = (tipH + o.offset + 8) > top - $(window).scrollTop(), 214 | sOut = (top + elH + tipH + o.offset + 8) > parseInt($(window).height() + $(window).scrollTop(), 10), 215 | 216 | // default anchor position 217 | elPos = o.anchor; 218 | 219 | // calculate where the anchor should be (east & west) 220 | if (wOut || o.anchor == 'e' && !eOut) { 221 | if (o.anchor == 'w' || o.anchor == 'e') { 222 | elPos = 'e'; 223 | aTop = Math.round((tipH / 2) - 8 - parseInt(tt_w.css('borderRightWidth'), 10)); 224 | aLeft = -8 - parseInt(tt_w.css('borderRightWidth'), 10); 225 | mLeft = left + elW + o.offset + 8; 226 | mTop = Math.round((top + elH / 2) - (tipH / 2)); 227 | } 228 | } else if (eOut || o.anchor == 'w' && !wOut) { 229 | if (o.anchor == 'w' || o.anchor == 'e') { 230 | elPos = 'w'; 231 | aTop = Math.round((tipH / 2) - 8 - parseInt(tt_w.css('borderLeftWidth'), 10)); 232 | aLeft = tipW - parseInt(tt_w.css('borderLeftWidth'), 10); 233 | mLeft = left - tipW - o.offset - 8; 234 | mTop = Math.round((top + elH / 2) - (tipH / 2)); 235 | } 236 | } 237 | 238 | // calculate where the anchor should be (north & south) 239 | if (sOut || o.anchor == 'n' && !nOut) { 240 | if (o.anchor == 'n' || o.anchor == 's') { 241 | elPos = 'n'; 242 | aTop = tipH - parseInt(tt_w.css('borderTopWidth'), 10); 243 | mTop = top - (tipH + o.offset + 8); 244 | } 245 | } else if (nOut || o.anchor == 's' && !sOut) { 246 | if (o.anchor == 'n' || o.anchor == 's') { 247 | elPos = 's'; 248 | aTop = -8 - parseInt(tt_w.css('borderBottomWidth'), 10); 249 | mTop = top + elH + o.offset + 8; 250 | } 251 | } 252 | 253 | // if it is going to go off on the sides, use corner 254 | if (o.anchor == 'n' || o.anchor == 's') { 255 | if ((tipW / 2) > left) { 256 | mLeft = mLeft < 0 ? aLeft + mLeft : aLeft; 257 | aLeft = 0; 258 | } else if ((left + tipW / 2) > parseInt($(window).width(), 10)) { 259 | mLeft -= aLeft; 260 | aLeft *= 2; 261 | } 262 | } else { 263 | if (nOut) { 264 | mTop = mTop + aTop 265 | aTop = 0; 266 | } else if (sOut) { 267 | mTop -= aTop; 268 | aTop *= 2; 269 | } 270 | } 271 | 272 | // position the arrow 273 | tt_a.css({'margin-left': (aLeft > 0 ? aLeft : aLeft + parseInt(o.stemOff, 10) / 2) + 'px', 'margin-top': aTop + 'px'}).attr('class', elPos); 274 | 275 | // clear delay timer if exists 276 | if (delay) clearTimeout(delay); 277 | 278 | // position the tooltip and show it 279 | delay = setTimeout(function(){ tt_w.css({"margin-left": mLeft+"px", "margin-top": mTop + 'px'}).stop(true,true).fadeIn(o.fadeIn); }, o.delay); 280 | } 281 | 282 | // hide the tooltip 283 | var hide = function() { 284 | if (!o.aHide && !tHov || o.aHide) { 285 | // clear delay timer if exists 286 | if (delay) clearTimeout(delay); 287 | 288 | // fade out the tooltip 289 | delay = setTimeout(function(){hide2()}, o.delay); 290 | } 291 | } 292 | 293 | // make a second hide function if the tooltip is set to not auto hide 294 | var hide2 = function() { 295 | // if the mouse isn't on the tooltip or the anchor, hide it, otherwise loop back through 296 | if (!o.aHide && !tHov || o.aHide) { 297 | // fade out the tooltip 298 | tt_w.stop(true,true).fadeOut(o.fadeOut); 299 | 300 | // call the show callback function 301 | if (o.hide) o.hide.call(this); 302 | } else 303 | setTimeout(function(){hide()}, 200); 304 | } 305 | } 306 | }); 307 | } 308 | })(jQuery); -------------------------------------------------------------------------------- /src/miniTip.css: -------------------------------------------------------------------------------- 1 | /*! miniTip CSS - v1.5.3 */ 2 | 3 | #miniTip { 4 | /* main styles for tooltip */ 5 | background-color: #f8f5ca; 6 | border: 4px solid #eae4b4; 7 | color: #927847; 8 | font-size: .9em; 9 | -webkit-border-radius: 3px; 10 | -moz-border-radius: 3px; 11 | border-radius: 3px; 12 | /* end editing style */ 13 | display: none; 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | z-index: 99999; 18 | } 19 | 20 | /* title bar style */ 21 | #miniTip_t { 22 | background-color: #f5edc2; 23 | font-weight: 700; 24 | padding: 4px 6px; 25 | } 26 | 27 | /* main content style */ 28 | #miniTip_c { padding: 4px 8px } 29 | 30 | 31 | /* arrow holder, no need to edit */ 32 | #miniTip_a { 33 | width: 0; 34 | height: 0; 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | } 39 | 40 | /* arrow pointing down, change border-top color to change color of the arrow */ 41 | #miniTip .n { 42 | border-left: 8px solid transparent; 43 | border-right: 8px solid transparent; 44 | border-top: 8px solid #eae4b4; 45 | border-bottom: 0; 46 | } 47 | 48 | /* arrow pointing up, change border-bottom color to change color of the arrow */ 49 | #miniTip .s { 50 | border-left: 8px solid transparent; 51 | border-right: 8px solid transparent; 52 | border-bottom: 8px solid #eae4b4; 53 | border-top: 0; 54 | } 55 | 56 | /* arrow pointing left, change border-right color to change color of the arrow */ 57 | #miniTip .e { 58 | border-bottom: 8px solid transparent; 59 | border-top: 8px solid transparent; 60 | border-right: 8px solid #eae4b4; 61 | border-left: 0; 62 | } 63 | 64 | /* arrow pointing right, change border-left color to change color of the arrow */ 65 | #miniTip .w { 66 | border-bottom: 8px solid transparent; 67 | border-top: 8px solid transparent; 68 | border-left: 8px solid #eae4b4; 69 | border-right: 0; 70 | } --------------------------------------------------------------------------------