Permalink
Browse files

Second Commit?

  • Loading branch information...
1 parent 92ccc33 commit 49503f331fab117bffbec8e11ea9baf90e68296d @star2dev committed Oct 20, 2011
View
Oops, something went wrong.
View
479 demo.html
Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,191 @@
+ /*
+ * 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: -100,
+ fadeIn: -200,
+ fadeOut: -200,
+ attribute: "title",
+ content: false, // HTML or String to fill TipTIp with
+ enter: function(){},
+ exit: function(){}
+ };
+ var opts = $.extend(defaults, options);
+
+ // Setup tip tip elements and render them to the DOM
+ 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); //remove original 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);
View
BIN tile.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,96 @@
+/* TipTip CSS - Version 1.2 (Modified) */
+
+#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: bold 11px Helvetica, Arial, sans-serif;
+ color: #FFF;
+ padding: 7px;
+ background: #000;
+ border: 1px solid #FFF;
+}
+
+#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;
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow {
+ border-bottom-color: #fff;
+}
+
+#tiptip_holder.tip_right #tiptip_arrow {
+ border-right-color: #fff;
+}
+
+#tiptip_holder.tip_left #tiptip_arrow {
+ border-left-color: #fff;
+}
+
+#tiptip_holder.tip_top #tiptip_arrow_inner {
+ margin-top: -7px;
+ margin-left: -6px;
+ border-top-color: #000;
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow_inner {
+ margin-top: -5px;
+ margin-left: -6px;
+ border-bottom-color: #000;
+}
+
+#tiptip_holder.tip_right #tiptip_arrow_inner {
+ margin-top: -6px;
+ margin-left: -5px;
+ border-right-color: #000;
+}
+
+#tiptip_holder.tip_left #tiptip_arrow_inner {
+ margin-top: -6px;
+ margin-left: -7px;
+ border-left-color: #000;
+}
+
+/* Webkit Hacks */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ #tiptip_content {
+ padding: 4px 8px 5px 8px;
+ background-color: #000;
+ }
+ #tiptip_holder.tip_bottom #tiptip_arrow_inner {
+ border-bottom-color: #000;
+ }
+ #tiptip_holder.tip_top #tiptip_arrow_inner {
+ border-top-color: #000;
+ }
+}

0 comments on commit 49503f3

Please sign in to comment.