Add tipTip js tooltips
This commit is contained in:
Fabio Comuni
parent
9ab9c28b01
commit
14125ce67b
5 changed files with 175 additions and 2 deletions
11
js/main.js
11
js/main.js
|
|
@ -34,7 +34,16 @@
|
||||||
|
|
||||||
msie = $.browser.msie ;
|
msie = $.browser.msie ;
|
||||||
|
|
||||||
/* setup navbar menus */
|
/* setup tooltips */
|
||||||
|
$("a,.tt").each(function(){
|
||||||
|
var e = $(this);
|
||||||
|
var pos="bottom";
|
||||||
|
if (e.hasClass("tttop")) pos="top";
|
||||||
|
if (e.hasClass("ttbottom")) pos="bottom";
|
||||||
|
if (e.hasClass("ttleft")) pos="left";
|
||||||
|
if (e.hasClass("ttright")) pos="right";
|
||||||
|
e.tipTip({defaultPosition: pos});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
30
library/tiptip/README
Normal file
30
library/tiptip/README
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
http://code.drewwilson.com/entry/tiptip-jquery-plugin
|
||||||
|
|
||||||
|
License
|
||||||
|
This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses.
|
||||||
|
|
||||||
|
|
||||||
|
ChangeLog
|
||||||
|
Version 1.3 (Mar. 23, 2010)
|
||||||
|
|
||||||
|
Added defaultPoistion option that enables you to set the default orientation TipTip should show up as.
|
||||||
|
Added attribute option that enables you to set the HTML attribute that TipTip should pull it's content from.
|
||||||
|
Added content option. This will be used as the content for the TipTip and will overwrite any content pulled form any HTML attribute.
|
||||||
|
Added activation option enables you to specify the jQuery method TipTip is activated with: hover, focus or click. Now you can use TipTip on forms and for validation!
|
||||||
|
Added keepAlive option that when set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it. Allowing for hyperlinks inside your TipTip content to be accessible.
|
||||||
|
|
||||||
|
Version 1.2 (Jan. 13, 2010)
|
||||||
|
|
||||||
|
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
|
||||||
|
Tightened up spacing margins in JS.
|
||||||
|
Updated margins in CSS file.
|
||||||
|
|
||||||
|
Version 1.1 (Jan. 03, 2010)
|
||||||
|
|
||||||
|
Swapped dynamically added orientation CSS class names ('_left' & '_right') to make better sense.
|
||||||
|
Added in some tighter spacing for the tooltip in JS.
|
||||||
|
|
||||||
|
Version 1.0 (Jan. 02, 2010)
|
||||||
|
|
||||||
|
Initial release.
|
||||||
|
|
||||||
21
library/tiptip/jquery.tipTip.minified.js
Normal file
21
library/tiptip/jquery.tipTip.minified.js
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
/*
|
||||||
|
* 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
|
||||||
|
*/
|
||||||
|
(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');var tiptip_content=$('<div id="tiptip_content"></div>');var tiptip_arrow=$('<div id="tiptip_arrow"></div>');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)<parseInt($(window).scrollLeft());var left_compare=(tip_w+left)>parseInt($(window).width());if((right_compare&&w_compare<0)||(t_class=="_right"&&!left_compare)||(t_class=="_left"&&left<(tip_w+opts.edgeOffset+5))){t_class="_right";arrow_top=Math.round(tip_h-13)/2;arrow_left=-12;marg_left=Math.round(left+org_width+opts.edgeOffset);marg_top=Math.round(top+h_compare)}else if((left_compare&&w_compare<0)||(t_class=="_left"&&!right_compare)){t_class="_left";arrow_top=Math.round(tip_h-13)/2;arrow_left=Math.round(tip_w);marg_left=Math.round(left-(tip_w+opts.edgeOffset+5));marg_top=Math.round(top+h_compare)}var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window).height()+$(window).scrollTop());var bottom_compare=((top+org_height)-(opts.edgeOffset+tip_h+8))<0;if(top_compare||(t_class=="_bottom"&&top_compare)||(t_class=="_top"&&!bottom_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_top"}else{t_class=t_class+"_top"}arrow_top=tip_h;marg_top=Math.round(top-(tip_h+5+opts.edgeOffset))}else if(bottom_compare|(t_class=="_top"&&bottom_compare)||(t_class=="_bottom"&&!top_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_bottom"}else{t_class=t_class+"_bottom"}arrow_top=-12;marg_top=Math.round(top+org_height+opts.edgeOffset)}if(t_class=="_right_top"||t_class=="_left_top"){marg_top=marg_top+5}else if(t_class=="_right_bottom"||t_class=="_left_bottom"){marg_top=marg_top-5}if(t_class=="_left_top"||t_class=="_left_bottom"){marg_left=marg_left+5}tiptip_arrow.css({"margin-left":arrow_left+"px","margin-top":arrow_top+"px"});tiptip_holder.css({"margin-left":marg_left+"px","margin-top":marg_top+"px"}).attr("class","tip"+t_class);if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn)},opts.delay)}function deactive_tiptip(){opts.exit.call(this);if(timeout){clearTimeout(timeout)}tiptip_holder.fadeOut(opts.fadeOut)}}})}})(jQuery);
|
||||||
113
library/tiptip/tipTip.css
Normal file
113
library/tiptip/tipTip.css
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
/* TipTip CSS - Version 1.2 */
|
||||||
|
|
||||||
|
#tiptip_holder {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_top {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_bottom {
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_right {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_left {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_content {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 2px #000;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid rgba(255,255,255,0.25);
|
||||||
|
background-color: rgb(25,25,25);
|
||||||
|
background-color: rgba(25,25,25,0.92);
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
|
||||||
|
border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
box-shadow: 0 0 3px #555;
|
||||||
|
-webkit-box-shadow: 0 0 3px #555;
|
||||||
|
-moz-box-shadow: 0 0 3px #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_arrow, #tiptip_arrow_inner {
|
||||||
|
position: absolute;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 6px;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_top #tiptip_arrow {
|
||||||
|
border-top-color: #fff;
|
||||||
|
border-top-color: rgba(255,255,255,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_bottom #tiptip_arrow {
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
border-bottom-color: rgba(255,255,255,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_right #tiptip_arrow {
|
||||||
|
border-right-color: #fff;
|
||||||
|
border-right-color: rgba(255,255,255,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_left #tiptip_arrow {
|
||||||
|
border-left-color: #fff;
|
||||||
|
border-left-color: rgba(255,255,255,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiptip_holder.tip_top #tiptip_arrow_inner {
|
||||||
|
margin-top: -7px;
|
||||||
|
margin-left: -6px;
|
||||||
|
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-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-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-left-color: rgb(25,25,25);
|
||||||
|
border-left-color: rgba(25,25,25,0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Webkit Hacks */
|
||||||
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||||
|
#tiptip_content {
|
||||||
|
padding: 4px 8px 5px 8px;
|
||||||
|
background-color: rgba(45,45,45,0.88);
|
||||||
|
}
|
||||||
|
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
|
||||||
|
border-bottom-color: rgba(45,45,45,0.88);
|
||||||
|
}
|
||||||
|
#tiptip_holder.tip_top #tiptip_arrow_inner {
|
||||||
|
border-top-color: rgba(20,20,20,0.92);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
<div class="tool">
|
<div class="tool">
|
||||||
<div class="fn label">$profile.name</div>
|
<div class="fn label">$profile.name</div>
|
||||||
{{ if $profile.edit }}<a class="icon s16 edit" href="$profile.edit.0" title="$profile.edit.3"><span>$profile.edit.1</span></a>{{ endif }}
|
{{ if $profile.edit }}<a class="icon s16 edit ttright" href="$profile.edit.0" title="$profile.edit.3"><span>$profile.edit.1</span></a>{{ endif }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ if $pdesc }}<div class="title">$profile.pdesc</div>{{ endif }}
|
{{ if $pdesc }}<div class="title">$profile.pdesc</div>{{ endif }}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue