diff --git a/README.txt b/README.txt index 537e4d3..bf733c5 100644 --- a/README.txt +++ b/README.txt @@ -2,6 +2,10 @@ TipTip Copyright 2010 Drew Wilson +Modified by: indyone (https://github.com/indyone/TipTip) +Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 +Modified by: Alan Hussey/EnergySavvy (https://github.com/EnergySavvy/TipTip) - Updated: Mar. 18, 2013 + http://www.drewwilson.com http://code.drewwilson.com/entry/tiptip-jquery-plugin @@ -60,4 +64,27 @@ What's New: * The option "activation" can have the value "manual". In this case no events will be applied to the element and the developer will be responsible to show or not the tooltip. But you can always use the show and hide methods to show or hide the tooltip ;-) -* Created an alternate look & feel for TipTip, you can use it by setting the option "cssClass" to "alternative". \ No newline at end of file +* Created an alternate look & feel for TipTip, you can use it by setting the option "cssClass" to "alternative". + +------------------------------------------------------------------- + +More updates (Jul. 27, 2012): + +* Fixed tooltip flickering that occurred when hovering over the edge of a tooltip's trigger element. +This was being caused by the tiptip_arrow overlapping the trigger element. CSS and arrow positioning +have been modified to resolve this. CSS was inspired by Toorshia's CSS in TipTip discussion thread +(see https://drew.tenderapp.com/discussions/tiptip/32-tool-tip-flickers-when-hovering-the-border-of-a-tiptip-link). + +* When keepAlive option is set to true, tooltip now hides both when the mouse leaves the tiptip_holder (like before) +as well as when mouse is clicked anywhere other than the tooltip itself. (Appropriated from James Simpson's miniTip plugin: +http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin). + +------------------------------------------------------------------- + +More updates (Mar. 18, 2013): + +* Added two new options, hideOnClick and delayHide: + +* hideOnClick takes a feature previously added to keepAlive, and makes it optional. + +* delayHide adds an optional delay before the tooltip will be hidden. This option pairs well with hideOnClick. \ No newline at end of file diff --git a/jquery.tipTip.js b/jquery.tipTip.js index fb75bab..a822d29 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -1,37 +1,44 @@ /* -* TipTip -* Copyright 2010 Drew Wilson -* www.drewwilson.com -* code.drewwilson.com/entry/tiptip-jquery-plugin -* -* Version 1.3 - Updated: Mar. 23, 2010 -* -* This Plug-In will create a custom tooltip to replace the default -* browser tooltip. It is extremely lightweight and very smart in -* that it detects the edges of the browser window and will make sure -* the tooltip stays within the current window size. As a result the -* tooltip will adjust itself to be displayed above, below, to the left -* or to the right depending on what is necessary to stay within the -* browser window. It is completely customizable as well via CSS. -* -* This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses: -* http://www.opensource.org/licenses/mit-license.php -* http://www.gnu.org/licenses/gpl.html -*/ + * TipTip + * Copyright 2010 Drew Wilson + * www.drewwilson.com + * code.drewwilson.com/entry/tiptip-jquery-plugin + * + * Modified by: indyone (https://github.com/indyone/TipTip) + * Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 + * Modified by: Alan Hussey/EnergySavvy (https://github.com/EnergySavvy/TipTip) - Updated: Mar. 18, 2013 + * + * Version 1.3 - Updated: Mar. 23, 2010 + * + * This Plug-In will create a custom tooltip to replace the default + * browser tooltip. It is extremely lightweight and very smart in + * that it detects the edges of the browser window and will make sure + * the tooltip stays within the current window size. As a result the + * tooltip will adjust itself to be displayed above, below, to the left + * or to the right depending on what is necessary to stay within the + * browser window. It is completely customizable as well via CSS. + * + * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + */ (function ($) { $.fn.tipTip = function (options) { var defaults = { activation: 'hover', // How to show (and hide) the tooltip. Can be: hover, focus, click and manual. - keepAlive: false, // When true the tooltip won't disapper when the mouse moves away from the element. Instead it will be hidden when it leaves the tooltip. + keepAlive: false, // When true the tooltip won't disappear when the mouse moves away from the element. Instead it will be hidden when it leaves the tooltip. maxWidth: '200px', // The max-width to set on the tooltip. You may also use the option cssClass to set this. edgeOffset: 0, // The offset between the tooltip arrow edge and the element that has the tooltip. defaultPosition: 'bottom', // The position of the tooltip. Can be: top, right, bottom and left. delay: 400, // The delay in msec to show a tooltip. + delayHover: 500, //The delay in msec to prevent quick hover + delayHide: 0, // The delay in msec to hide a tooltip. + hideOnClick: false, // When true, clicking outside of the tooltip will hide it immediately. Works well with keepAlive and delayHide fadeIn: 200, // The length in msec of the fade in. fadeOut: 200, // The length in msec of the fade out. attribute: 'title', // The attribute to fetch the tooltip text if the option content is false. - content: false, // HTML or String or Function (that returns HTML or String) to fill TipTIp with + content: false, // HTML or String or Function (that returns HTML or String) to fill TipTip with enter: function () { }, // Callback function before a tooltip is shown. afterEnter: function () { }, // Callback function after a tooltip is shown. exit: function () { }, // Callback function before a tooltip is hidden. @@ -53,12 +60,21 @@ tiptip_arrow = $('#tiptip_arrow'); } + // shared timeout to track delayed hide, because we only have one #tiptip_holder + var timeoutHide = false; + return this.each(function () { var org_elem = $(this), data = org_elem.data('tipTip'), opts = data && data.options || $.extend({}, defaults, options), callback_data = { holder: tiptip_holder, content: tiptip_content, arrow: tiptip_arrow, options: opts }; + // caching and removing the opts.attribute, to prevent browser from showing native tooltip + if (!opts.content && !$.isFunction(opts.content)) { + opts.content = org_elem.attr(opts.attribute); + org_elem.removeAttr(opts.attribute); //remove original attribute + } + if (data) { switch (options) { case 'show': @@ -75,44 +91,66 @@ } } else { var timeout = false; - + var timeoutHover = false; org_elem.data('tipTip', { options: opts }); if (opts.activation == 'hover') { org_elem.bind('mouseenter.tipTip', function () { - active_tiptip(); + if (opts.delayHover){ + timeoutHover = setTimeout( function(){ active_tiptip() }, opts.delayHover); + }else{ + active_tiptip(); + } }).bind('mouseleave.tipTip', function () { - if (!opts.keepAlive) { - deactive_tiptip(); - } else { - tiptip_holder.one('mouseleave.tipTip', function () { + if (timeoutHover){ + clearTimeout(timeoutHover); + } + + if (!opts.keepAlive) { deactive_tiptip(); - }); - } - }); + } else { + tiptip_holder.one('mouseleave.tipTip', function () { + deactive_tiptip(); + }); + } + if (opts.hideOnClick) { + deactive_on_click(); + } + }); } else if (opts.activation == 'focus') { org_elem.bind('focus.tipTip', function () { active_tiptip(); }).bind('blur.tipTip', function () { - deactive_tiptip(); - }); + deactive_tiptip(); + }); } else if (opts.activation == 'click') { org_elem.bind('click.tipTip', function (e) { e.preventDefault(); active_tiptip(); return false; }).bind('mouseleave.tipTip', function () { - if (!opts.keepAlive) { - deactive_tiptip(); - } else { - tiptip_holder.one('mouseleave.tipTip', function () { + if (!opts.keepAlive) { deactive_tiptip(); - }); - } - }); + } else { + tiptip_holder.one('mouseleave.tipTip', function () { + deactive_tiptip(); + }); + } + deactive_on_click(); + }); } else if (opts.activation == 'manual') { // Nothing to register actually. We decide when to show or hide. } + + // hide tooltip when user clicks anywhere else but on the tooltip element + function deactive_on_click() { + $('html').off('click.tipTip').on('click.tipTip',function(e){ + if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { + $('html').off('click.tipTip'); + deactive_tiptip(0); // 0 = immediately, overriding delayHide + } + }); + } } function active_tiptip() { @@ -146,6 +184,11 @@ clearTimeout(timeout); } + // Kill delayed timeout + if (timeoutHide) { + clearTimeout(timeoutHide); + } + timeout = setTimeout(function () { tiptip_holder.stop(true, true).fadeIn(opts.fadeIn); }, opts.delay); @@ -157,7 +200,7 @@ opts.afterEnter.call(org_elem, callback_data); } - function deactive_tiptip() { + function deactive_tiptip(delay) { if (opts.exit.call(org_elem, callback_data) === false) { return; } @@ -166,13 +209,47 @@ clearTimeout(timeout); } - tiptip_holder.fadeOut(opts.fadeOut); + function hide_tiptip() { + tiptip_holder.fadeOut(opts.fadeOut, function(){ + // reset tip position and dimensions + $(this).css({ left: '', top: '', height: '', width: '' }); + }); + } + + // Visually hide the tooltip after an optional delay + var delay = (delay !== undefined) ? delay : opts.delayHide; + + if (delay == 0) { + hide_tiptip(); + // if user clicked, let's also cancel any delayed hide + if (opts.delayHide > 0) { + clearTimeout(timeoutHide); + } + } else { + + // don't hide tooltip when we hover it + tiptip_holder.one('mouseenter.tipTip', function() { + clearTimeout(timeoutHide); + tiptip_holder.on('mouseleave.tipTip', function() { + deactive_tiptip(); + }); + }); + + timeoutHide = setTimeout(function() { + hide_tiptip(); + }, delay); + + } + + // These should happen whether the tooltip is visually hidden or just moved by active_tiptip() + setTimeout(function() { + $(window).unbind('resize.tipTip scroll.tipTip'); - $(window).unbind('resize.tipTip scroll.tipTip'); + org_elem.removeClass('tiptip_visible'); - org_elem.removeClass('tiptip_visible'); + opts.afterExit.call(org_elem, callback_data); + }, delay); - opts.afterExit.call(org_elem, callback_data); } function position_tiptip() { @@ -206,7 +283,7 @@ function moveBottom() { tip_class = tip_classes.bottom; - tip_top = org_top + org_height + opts.edgeOffset + (arrow_height / 2); + tip_top = org_top + org_height + opts.edgeOffset; tip_left = org_left + ((org_width - tip_width) / 2); } @@ -219,7 +296,7 @@ function moveRight() { tip_class = tip_classes.right; tip_top = org_top + ((org_height - tip_height) / 2); - tip_left = org_left + org_width + opts.edgeOffset + (arrow_width / 2); + tip_left = org_left + org_width + opts.edgeOffset; } // Calculate the position of the tooltip. @@ -257,18 +334,18 @@ // Fix the vertical position if the tooltip is off the top or bottom sides of the window's viewport. if (tip_class == tip_classes.left || tip_class == tip_classes.right) { // If positioned left or right check if the tooltip is off the top or bottom window's viewport. if (tip_top + tip_height > win_height + win_top) { // If the bottom edge of the tooltip is off the bottom side of the window's viewport. - tip_top = org_top + org_height > win_height + win_top ? org_top + org_height - tip_height : win_height + win_top - tip_height; // Make 'bottom edge of the tooltip' == 'bottom side of the window's viewport'. + tip_top = org_top + org_height > win_height + win_top ? org_top + org_height - tip_height : win_height + win_top - tip_height - 4; // Make 'bottom edge of the tooltip' == 'bottom side of the window's viewport'. } else if (tip_top < win_top) { // If the top edge of the tooltip if off the top side of the window's viewport. - tip_top = org_top < win_top ? org_top : win_top; // Make 'top edge of the tooltip' == 'top side of the window's viewport'. + tip_top = org_top < win_top ? org_top : win_top + 4; // Make 'top edge of the tooltip' == 'top side of the window's viewport'. } } // Fix the horizontal position if the tooltip is off the right or left sides of the window's viewport. if (tip_class == tip_classes.top || tip_class == tip_classes.bottom) { if (tip_left + tip_width > win_width + win_left) { // If the right edge of the tooltip is off the right side of the window's viewport. - tip_left = org_left + org_width > win_width + win_left ? org_left + org_width - tip_width : win_width + win_left - tip_width; // Make 'right edge of the tooltip' == 'right side of the window's viewport'. + tip_left = org_left + org_width > win_width + win_left ? org_left + org_width - tip_width : win_width + win_left - tip_width - 4; // Make 'right edge of the tooltip' == 'right side of the window's viewport'. } else if (tip_left < win_left) { // If the left edge of the tooltip if off the left side of the window's viewport. - tip_left = org_left < win_left ? org_left : win_left; // Make 'left edge of the tooltip' == 'left side of the window's viewport'. + tip_left = org_left < win_left ? org_left : win_left + 4; // Make 'left edge of the tooltip' == 'left side of the window's viewport'. } } @@ -286,14 +363,14 @@ arrow_top = tip_height; // Position the arrow vertically on the top of the tooltip. arrow_left = org_left - tip_left + ((org_width - arrow_width) / 2); // Center the arrow horizontally on the center of the target element. } else if (tip_class == tip_classes.bottom) { - arrow_top = -arrow_height; // Position the arrow vertically on the bottom of the tooltip. + arrow_top = 0; // Position the arrow vertically on the bottom of the tooltip. arrow_left = org_left - tip_left + ((org_width - arrow_width) / 2); // Center the arrow horizontally on the center of the target element. } else if (tip_class == tip_classes.left) { arrow_top = org_top - tip_top + ((org_height - arrow_height) / 2); // Center the arrow vertically on the center of the target element. arrow_left = tip_width; // Position the arrow vertically on the left of the tooltip. } else if (tip_class == tip_classes.right) { arrow_top = org_top - tip_top + ((org_height - arrow_height) / 2); // Center the arrow vertically on the center of the target element. - arrow_left = -arrow_width; // Position the arrow vertically on the right of the tooltip. + arrow_left = 0; // Position the arrow vertically on the right of the tooltip. } tiptip_arrow diff --git a/jquery.tipTip.minified.js b/jquery.tipTip.minified.js index e547525..57636c1 100644 --- a/jquery.tipTip.minified.js +++ b/jquery.tipTip.minified.js @@ -1 +1,17 @@ -(function(d){d.fn.tipTip=function(g){var k={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:0,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},afterEnter:function(){},exit:function(){},afterExit:function(){},cssClass:"",detectTextDir:true};if(d("#tiptip_holder").length<=0){var i=d("
",{id:"tiptip_arrow_inner"}),j=d("
",{id:"tiptip_arrow"}).append(i),h=d("
",{id:"tiptip_content"}),f=d("
",{id:"tiptip_holder"}).append(j).append(h);d("body").append(f)}else{var f=d("#tiptip_holder"),h=d("#tiptip_content"),j=d("#tiptip_arrow")}return this.each(function(){var q=d(this),p=q.data("tipTip"),n=p&&p.options||d.extend({},k,g),m={holder:f,content:h,arrow:j,options:n};if(p){switch(g){case"show":s();break;case"hide":r();break;case"destroy":q.unbind(".tipTip").removeData("tipTip");break;case"position":l()}}else{var o=false;q.data("tipTip",{options:n});if(n.activation=="hover"){q.bind("mouseenter.tipTip",function(){s()}).bind("mouseleave.tipTip",function(){if(!n.keepAlive){r()}else{f.one("mouseleave.tipTip",function(){r()})}})}else{if(n.activation=="focus"){q.bind("focus.tipTip",function(){s()}).bind("blur.tipTip",function(){r()})}else{if(n.activation=="click"){q.bind("click.tipTip",function(t){t.preventDefault();s();return false}).bind("mouseleave.tipTip",function(){if(!n.keepAlive){r()}else{f.one("mouseleave.tipTip",function(){r()})}})}else{if(n.activation=="manual"){}}}}}function s(){if(n.enter.call(q,m)===false){return}var t;if(n.content){t=d.isFunction(n.content)?n.content.call(q,m):n.content}else{t=n.content=q.attr(n.attribute);q.removeAttr(n.attribute)}if(!t){return}h.html(t);f.hide().removeAttr("class").css({"max-width":n.maxWidth});if(n.cssClass){f.addClass(n.cssClass)}l();if(o){clearTimeout(o)}o=setTimeout(function(){f.stop(true,true).fadeIn(n.fadeIn)},n.delay);d(window).bind("resize.tipTip scroll.tipTip",l);q.addClass("tiptip_visible");n.afterEnter.call(q,m)}function r(){if(n.exit.call(q,m)===false){return}if(o){clearTimeout(o)}f.fadeOut(n.fadeOut);d(window).unbind("resize.tipTip scroll.tipTip");q.removeClass("tiptip_visible");n.afterExit.call(q,m)}function l(){var N=q.offset(),u=N.top,G=N.left,Q=q.outerWidth(),v=q.outerHeight(),y,J,L=f.outerWidth(),D=f.outerHeight(),I,P={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},F,K,x=12,R=12,B=d(window),C=B.scrollTop(),E=B.scrollLeft(),O=B.width(),H=B.height(),z=n.detectTextDir&&e(h.text());function M(){I=P.top;y=u-D-n.edgeOffset-(R/2);J=G+((Q-L)/2)}function w(){I=P.bottom;y=u+v+n.edgeOffset+(R/2);J=G+((Q-L)/2)}function t(){I=P.left;y=u+((v-D)/2);J=G-L-n.edgeOffset-(x/2)}function A(){I=P.right;y=u+((v-D)/2);J=G+Q+n.edgeOffset+(x/2)}if(n.defaultPosition=="bottom"){w()}else{if(n.defaultPosition=="top"){M()}else{if(n.defaultPosition=="left"&&!z){t()}else{if(n.defaultPosition=="left"&&z){A()}else{if(n.defaultPosition=="right"&&!z){A()}else{if(n.defaultPosition=="right"&&z){t()}else{w()}}}}}}if(I==P.left&&!z&&JE+O){t()}else{if(I==P.right&&z&&J+L>E+O){t()}else{if(I==P.top&&yC+H){M()}}}}}}if(I==P.left||I==P.right){if(y+D>H+C){y=u+v>H+C?u+v-D:H+C-D}else{if(yO+E){J=G+Q>O+E?G+Q-L:O+E-L}else{if(J=a("#tiptip_holder").length){var d=a("
",{id:"tiptip_arrow_inner"}),f=a("
",{id:"tiptip_arrow"}).append(d),g=a("
",{id:"tiptip_content"}),h=a("
",{id:"tiptip_holder"}).append(f).append(g);a("body").append(h)}else var h=a("#tiptip_holder"),g=a("#tiptip_content"),f=a("#tiptip_arrow");var i=!1;return this.each(function(){function o(){a("html").off("click.tipTip").on("click.tipTip",function(b){"block"!=h.css("display")||a(b.target).closest("#tiptip_holder").length||(a("html").off("click.tipTip"),q(0))})}function p(){if(k.enter.call(d,l)!==!1){var b;k.content?b=a.isFunction(k.content)?k.content.call(d,l):k.content:(b=k.content=d.attr(k.attribute),d.removeAttr(k.attribute)),b&&(g.html(b),h.hide().removeAttr("class").css({"max-width":k.maxWidth}),k.cssClass&&h.addClass(k.cssClass),r(),m&&clearTimeout(m),i&&clearTimeout(i),m=setTimeout(function(){h.stop(!0,!0).fadeIn(k.fadeIn)},k.delay),a(window).bind("resize.tipTip scroll.tipTip",r),d.addClass("tiptip_visible"),k.afterEnter.call(d,l))}}function q(b){function c(){h.fadeOut(k.fadeOut,function(){a(this).css({left:"",top:"",height:"",width:""})})}if(k.exit.call(d,l)!==!1){m&&clearTimeout(m);var b=void 0!==b?b:k.delayHide;0==b?(c(),k.delayHide>0&&clearTimeout(i)):(h.one("mouseenter.tipTip",function(){clearTimeout(i),h.on("mouseleave.tipTip",function(){q()})}),i=setTimeout(function(){c()},b)),setTimeout(function(){a(window).unbind("resize.tipTip scroll.tipTip"),d.removeClass("tiptip_visible"),k.afterExit.call(d,l)},b)}}function r(){function C(){q=r.top,m=c-p-k.edgeOffset-v/2,n=i+(j-o)/2}function D(){q=r.bottom,m=c+l+k.edgeOffset,n=i+(j-o)/2}function E(){q=r.left,m=c+(l-p)/2,n=i-o-k.edgeOffset-u/2}function F(){q=r.right,m=c+(l-p)/2,n=i+j+k.edgeOffset}var m,n,q,s,t,b=d.offset(),c=b.top,i=b.left,j=d.outerWidth(),l=d.outerHeight(),o=h.outerWidth(),p=h.outerHeight(),r={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},u=12,v=12,w=a(window),x=w.scrollTop(),y=w.scrollLeft(),z=w.width(),A=w.height(),B=k.detectTextDir&&e(g.text());"bottom"==k.defaultPosition?D():"top"==k.defaultPosition?C():"left"!=k.defaultPosition||B?"left"==k.defaultPosition&&B?F():"right"!=k.defaultPosition||B?"right"==k.defaultPosition&&B?E():D():F():E(),q==r.left&&!B&&y>n?F():q==r.left&&B&&y>n-o?F():q==r.right&&!B&&n>y+z?E():q==r.right&&B&&n+o>y+z?E():q==r.top&&x>m?D():q==r.bottom&&m>x+A&&C(),(q==r.left||q==r.right)&&(m+p>A+x?m=c+l>A+x?c+l-p:A+x-p-4:x>m&&(m=x>c?c:x+4)),(q==r.top||q==r.bottom)&&(n+o>z+y?n=i+j>z+y?i+j-o:z+y-o-4:y>n&&(n=y>i?i:y+4)),h.css({left:Math.round(n),top:Math.round(m)}).removeClass(r.top).removeClass(r.bottom).removeClass(r.left).removeClass(r.right).addClass(q),q==r.top?(s=p,t=i-n+(j-u)/2):q==r.bottom?(s=0,t=i-n+(j-u)/2):q==r.left?(s=c-m+(l-v)/2,t=o):q==r.right&&(s=c-m+(l-v)/2,t=0),f.css({left:Math.round(t),top:Math.round(s)})}var d=a(this),j=d.data("tipTip"),k=j&&j.options||a.extend({},c,b),l={holder:h,content:g,arrow:f,options:k};if(k.content||a.isFunction(k.content)||(k.content=d.attr(k.attribute),d.removeAttr(k.attribute)),j)switch(b){case"show":p();break;case"hide":q();break;case"destroy":d.unbind(".tipTip").removeData("tipTip");break;case"position":r()}else{var m=!1,n=!1;d.data("tipTip",{options:k}),"hover"==k.activation?d.bind("mouseenter.tipTip",function(){k.delayHover?n=setTimeout(function(){p()},k.delayHover):p()}).bind("mouseleave.tipTip",function(){n&&clearTimeout(n),k.keepAlive?h.one("mouseleave.tipTip",function(){q()}):q(),k.hideOnClick&&o()}):"focus"==k.activation?d.bind("focus.tipTip",function(){p()}).bind("blur.tipTip",function(){q()}):"click"==k.activation?d.bind("click.tipTip",function(a){return a.preventDefault(),p(),!1}).bind("mouseleave.tipTip",function(){k.keepAlive?h.one("mouseleave.tipTip",function(){q()}):q(),o()}):"manual"==k.activation}})};var b="A-Za-z\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u02b8\u0300-\u0590\u0800-\u1fff\u2c00-\ufb1c\ufdfe-\ufe6f\ufefd-\uffff",c="\u0591-\u07ff\ufb1d-\ufdfd\ufe70-\ufefc",d=RegExp("^[^"+b+"]*["+c+"]")})(jQuery); \ No newline at end of file diff --git a/tipTip.css b/tipTip.css index 6d2e874..3538f27 100644 --- a/tipTip.css +++ b/tipTip.css @@ -43,11 +43,14 @@ #tiptip_arrow, #tiptip_arrow_inner { position: absolute; + height: 0; + width: 0; +} + +#tiptip_arrow_inner { border-color: transparent; border-style: solid; border-width: 6px; - height: 0; - width: 0; } #tiptip_holder.tip_top #tiptip_arrow { @@ -71,29 +74,25 @@ } #tiptip_holder.tip_top #tiptip_arrow_inner { - margin-top: -7px; - margin-left: -6px; + border-bottom-width: 0px; border-top-color: rgb(25,25,25); border-top-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_bottom #tiptip_arrow_inner { - margin-top: -5px; - margin-left: -6px; + border-top-width: 0px; border-bottom-color: rgb(25,25,25); border-bottom-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_right #tiptip_arrow_inner { - margin-top: -6px; - margin-left: -5px; + border-left-width: 0px; border-right-color: rgb(25,25,25); border-right-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_left #tiptip_arrow_inner { - margin-top: -6px; - margin-left: -7px; + border-right-width: 0px; border-left-color: rgb(25,25,25); border-left-color: rgba(25,25,25,0.92); } @@ -129,6 +128,19 @@ border-left-color: #444444; } +#tiptip_holder.tip_top #tiptip_arrow, +#tiptip_holder.tip_right #tiptip_arrow, +#tiptip_holder.tip_bottom #tiptip_arrow, +#tiptip_holder.tip_left #tiptip_arrow +{border-color:transparent;} + #tiptip_holder.alt #tiptip_content { background-color: #444444; border: 1px solid White; border-radius: 3px; box-shadow: 0 0 3px #555555; color: #FFFFFF; font-size: 11px; padding: 4px 8px; text-shadow: 0 0 1px Black; -} \ No newline at end of file +} + +/*corner tips*/ +#tiptip_holder.tip_left_top #tiptip_arrow, +#tiptip_holder.tip_right_top #tiptip_arrow, +#tiptip_holder.tip_left_bottom #tiptip_arrow, +#tiptip_holder.tip_right_bottom #tiptip_arrow +{display:none;} \ No newline at end of file