Skip to content
Browse files

First release

  • Loading branch information...
0 parents commit 997e7c5a2246cff625c97a39c340ca002caa7b23 Elliot Lings committed Jun 29, 2012
Showing with 449 additions and 0 deletions.
  1. +29 −0 README.md
  2. +98 −0 css/tooltip.css
  3. BIN img/arrows.png
  4. BIN img/closelabel.png
  5. +310 −0 js/jquery.lingsTooltip.js
  6. +12 −0 js/jquery.lingsTooltip.min.js
29 README.md
@@ -0,0 +1,29 @@
+lingsTooltip
+============
+
+Another jQuery Tooltip plugin.
+
+Requires jQuery 1.7 or later.
+
+Why
+---
+Someone said to me, "I wish there was a jQuery Tooltip plugin which required no initializing at all". So I created this tooltip to do that, but also with the functionality that I wanted; to be able to customize the tooltip in many different ways.
+
+How to use
+==========
+
+Please visit http://elliotlings.com/jquery/tooltip/ for instructions.
+
+Bugs
+====
+
+If you find any bugs, please create an issue on Github at https://github.com/elliotlings/tooltip/issues
+
+License
+=======
+
+Copyright Elliot Lings 2012 - elliotlings.com/jquery/tooltip/
+This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License
+http://creativecommons.org/licenses/by-nc/3.0/
+
+More information at http://elliotlings.com/jquery/tooltip/
98 css/tooltip.css
@@ -0,0 +1,98 @@
+body {
+ font-family: Tahoma;
+ font-size: 14px;
+ line-height: 18px;
+ margin: 0;
+ padding: 0;
+}
+
+.clear:before,
+.clear:after {
+ content:"";
+ display:table;
+}
+.clear:after {
+ clear:both;
+}
+/* For IE 6/7 (trigger hasLayout) */
+.clear {
+ zoom:1;
+}
+
+/* Tooltip */
+.tooltip-container {
+ background-clip: padding-box;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background: rgb(25,25,25);
+ background: rgba(25,25,25,0.92);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(25,25,25,0.8)), to(rgba(25,25,25,0.9)));
+ background: -webkit-linear-gradient(top, rgba(25,25,25,0.8), rgba(25,25,25,0.9));
+ background: -moz-linear-gradient(top, rgba(25,25,25,0.8), rgba(25,25,25,0.9));
+ background: o-linear-gradient(top, rgba(25,25,25,0.8), rgba(25,25,25,0.9));
+ background: linear-gradient(to bottom, rgba(25,25,25,0.8), rgba(25,25,25,0.9));
+ border: 1px solid #1c1c1c;
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ box-shadow: 0 1px 3px #666, inset 0 1px 0 rgba(255,255,255,0.3);
+ color: #fff;
+ left: 40px;
+ padding: 10px;
+ position: absolute;
+ top: 40px;
+ text-shadow: 0 1px 0 #000;
+ z-index: 190;
+}
+.tooltip-close {
+ background: url(../img/closelabel.png) 0 0 no-repeat;
+ display: block;
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+ height: 8px;
+ overflow: hidden;
+ text-indent: -9999px;
+ width: 8px;
+}
+.tooltip-container .arrow {
+ background: url(../img/arrows.png) no-repeat;
+ position: absolute;
+ z-index: 200;
+}
+.tooltip-container.n .arrow {
+ background-position: top center;
+ height: 9px;
+ left: 50%;
+ margin-left: -9px;
+ top: -9px;
+ width: 18px;
+}
+.tooltip-container.s .arrow {
+ background-position: bottom center;
+ bottom: -10px;
+ height: 10px;
+ left: 50%;
+ margin-left: -9px;
+ width: 18px;
+ z-index: 200;
+}
+.tooltip-container.e .arrow {
+ background-position: center right;
+ height: 18px;
+ margin-top: -7px;
+ position: absolute;
+ right: -9px;
+ top: 50%;
+ width: 9px;
+ z-index: 200;
+}
+.tooltip-container.w .arrow {
+ background-position: center left;
+ height: 18px;
+ left: -9px;
+ margin-top: -7px;
+ position: absolute;
+ top: 50%;
+ width: 9px;
+ z-index: 200;
+}
BIN img/arrows.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN img/closelabel.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
310 js/jquery.lingsTooltip.js
@@ -0,0 +1,310 @@
+/*
+ * lingsTooltip.js
+ * @version 2.0
+ * @requires jQuery v1.7 or later
+ * @author Elliot Lings
+ *
+ * The following copyright notice and license information must stay intact.
+ * Copyright Elliot Lings 2012 - elliotlings.com/jquery/tooltip
+ * This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License - http://creativecommons.org/licenses/by-nc/3.0/
+ */
+;(function($, window, document, undefined){
+ "use strict";
+
+ var W = $(document);
+
+ $.fn.extend({
+ tooltip: function(options, arg) {
+ options = options || {};
+ if (options && typeof(options) == 'object') {
+ options = $.extend( {}, $.tooltip.defaults, options );
+ }
+
+ this.each(function() {
+ new $.tooltip(this, options, arg);
+ });
+ return;
+ }
+ });
+
+ $.tooltip = function(ele, options, arg) {
+
+ var ele,
+ options,
+ arg,
+ method,
+ methods = {
+ open: function(){
+ if(typeof options.onOpen == 'function'){
+ options.onOpen.call(this, ele, options);
+ }
+
+ if(options.unique) this.closeAllTooltips();
+ this.bindCloseEvent();
+ if(options.autoPosition) this.position();
+ if(options.ajax&&!options.preload) this.ajaxRequest();
+
+ options.tooltip.stop(true).fadeTo(options.fade, 1, function(){
+ if(typeof options.onOpened == 'function'){
+ options.onOpened.call(this, ele, options);
+ }
+ });
+
+ },
+ close: function(){
+ if(typeof options.onClose == 'function'){
+ options.onClose.call(this, ele, options);
+ }
+
+ this.bindOpenEvent();
+ options.tooltip.stop(true).fadeTo(options.fade, 0, function(){
+ if(typeof options.onClosed == 'function'){
+ options.onClosed.call(this, ele, options);
+ }
+ });
+
+ },
+ closeAllTooltips: function(){
+ $($.tooltip.tips).each(function(){
+ var data = $(this).data('tooltip');
+ if(!data.stayOpen) $(this).tooltip('close');
+ });
+ },
+ position: function(animate,g,prevent){
+ options.gravity = g || options.gravity;
+ animate = animate || false;
+
+ var anchor = $(ele),
+ anchorX = anchor.offset().left,
+ anchorY = anchor.offset().top,
+ anchorW = anchor.outerWidth(),
+ anchorH = anchor.outerHeight(),
+ anchorHalfW = anchorW/2;
+
+ var tooltip = options.tooltip,
+ tooltipW = tooltip.outerWidth(),
+ tooltipH = tooltip.outerHeight(),
+ tooltipHalfW = tooltipW/2;
+
+
+ if(options.autoGravity){
+ var windowWidth = W.width(),
+ windowHeight = W.height();
+ if((anchorY + anchorH + tooltipH + options.offsetY < windowHeight) && ((tooltipHalfW - anchorHalfW)<=anchorX)){
+ options.gravity = 'n';
+ }
+ else if((tooltipW + options.offsetX < anchorX) && (tooltipH/2 + anchorY + anchorH/2 < windowHeight)){
+ options.gravity = 'e';
+ }
+ else if((tooltipH + options.offsetY < anchorY) && (tooltipHalfW - anchorHalfW<=anchorX)){
+ options.gravity = 's';
+ }
+ else if((tooltipW + options.offsetX + anchorW + anchorX < windowWidth) && (tooltipH/2 + anchorY + anchorH/2 < windowHeight)){
+ options.gravity = 'w';
+ }
+ }
+
+ if(tooltip.hasClass(options.gravity)&&prevent) return;
+
+ tooltip.removeClass('n e w s');
+ tooltip.addClass(options.gravity);
+
+ if(animate){
+ switch(options.gravity){
+ case 'n': default: tooltip.stop().animate({'top': anchorY + anchorH + options.offsetY, 'left': anchorX + anchorW/2 - tooltipHalfW}); break;
+ case 's': tooltip.stop().animate({'top': anchorY - tooltipH - options.offsetY, 'left': anchorX + anchorW/2 - tooltipHalfW }); break;
+ case 'w': tooltip.stop().animate({'top': anchorY + anchorH/2 - tooltipH/2, 'left': anchorX + anchorW + options.offsetX }); break;
+ case 'e': tooltip.stop().animate({'top': anchorY + anchorH/2 - tooltipH/2, 'left': anchorX - tooltipW - options.offsetX }); break;
+ }
+ }
+ else {
+ switch(options.gravity){
+ case 'n': default: tooltip.css({'top': anchorY + anchorH + options.offsetY, 'left': anchorX + anchorW/2 - tooltipHalfW}); break;
+ case 's': tooltip.css({'top': anchorY - tooltipH - options.offsetY, 'left': anchorX + anchorW/2 - tooltipHalfW }); break;
+ case 'w': tooltip.css({'top': anchorY + anchorH/2 - tooltipH/2, 'left': anchorX + anchorW + options.offsetX }); break;
+ case 'e': tooltip.css({'top': anchorY + anchorH/2 - tooltipH/2, 'left': anchorX - tooltipW - options.offsetX }); break;
+ }
+ }
+
+ if(typeof options.onPosition == 'function'){
+ options.onPosition.call(this, ele, options);
+ }
+
+ },
+ bindCloseEvent: function(){
+ $(ele).off('.lingstip');
+ if(options.closeTrigger){
+ $(ele).on((options.closeTrigger+'.lingstip'), function(e){
+ if(options.preventDefault) e.preventDefault();
+ $(ele).tooltip('close');
+ });
+ }
+ },
+ bindOpenEvent: function(){
+ $(ele).off('.lingstip');
+ if(options.openTrigger){
+ $(ele).on((options.openTrigger+'.lingstip'), function(e){
+ if(options.preventDefault) e.preventDefault();
+ $(ele).tooltip('open');
+ });
+ }
+ },
+ ajaxRequest: function(ajaxObject){
+ var that = this;
+ ajaxObject = ajaxObject || options.ajax;
+ $.ajax(ajaxObject).done(function(msg){
+ options.content = msg;
+ that.updateContent(msg);
+ }).fail(function(jqXHR, textStatus){
+ options.content = textStatus;
+ that.updateContent(textStatus);
+ });
+ options.preload = true;
+ },
+ updateOptions: function(updated){
+ $.extend(options, updated);
+ },
+ updateContent: function(content){
+ options.tooltip.find('.tooltip-contents').html(content);
+ this.position();
+ },
+ remove: function(){
+ options.tooltip.remove();
+ $(ele).removeData(options.closeTrigger+'.lingstip,'+options.openTrigger+'.lingstip');
+ $(ele).off(options.closeTrigger)
+ $.tooltip.tips.splice(options.tid,1);
+ $.tooltip.iterator--;
+ return false;
+ }
+ };
+
+ if (options && typeof(options) == 'string') {
+ if(typeof $(ele).data('tooltip') == 'undefined'){
+ console.log("Cannot apply this method to tooltip. Tooltip doesn't exist.");
+ return;
+ }
+ method = options;
+ options = $(ele).data('tooltip');
+ methods[method](arg);
+ return this;
+ }
+ else if(options && typeof(options) == 'object'){
+
+ if(typeof options.onCreate == 'function'){
+ options.onCreate.call(this, ele, options);
+ }
+
+ options.tid = $.tooltip.iterator;
+
+ $.tooltip.tips[$.tooltip.iterator] = ele;
+
+ if(options.ajax){
+ if(options.preload) methods.ajaxRequest();
+ }
+
+ var tooltip = $(options.template.replace('{{content}}', options.content)).addClass('.tooltip-'+options.tid, options.classes).attr('id',options.id);
+ if(options.closeButton) tooltip.prepend($(options.closeButtonContents).click(function(e){ e.preventDefault(); methods.close(); }));
+ options.tooltip = tooltip.hide();
+ options.fade = options.fade || 0;
+
+ methods.bindOpenEvent();
+
+ if(options.autoPosition){
+ $(window).on('resize', function(){
+ $($.tooltip.tips).each(function(){
+ var me = this;
+ if(typeof timer == 'undefined'){
+ var timer = setTimeout(function(){ $(me).tooltip('position', false,'',true) }, 2000);
+ }
+ });
+ });
+ }
+
+ $('body').append(options.tooltip);
+
+ methods.position();
+
+ $.tooltip.iterator++;
+
+ }
+
+ $(ele).data('tooltip', options);
+
+
+ };
+
+ $.tooltip.iterator = 0;
+ $.tooltip.tips = [];
+ $.tooltip.reposition = function(animate){
+ animate = animate || false;
+ $($.tooltip.tips).each(function(){
+ $(this).tooltip('position',animate);
+ });
+ };
+
+ $.tooltip.defaults = {
+ 'content':"Empty",
+ 'classes':null,
+ 'id':null,
+ 'openTrigger':'click',
+ 'closeTrigger':'click',
+ 'preventDefault':true,
+ 'closeButton':false,
+ 'fade':500,
+ 'gravity':'n',
+ 'autoGravity':true,
+ 'autoPosition':true,
+ 'unique':true,
+ 'stayOpen':false,
+ 'offsetY': 10,
+ 'offsetX': 15,
+ 'ajax':null,
+ 'preload':false,
+ 'template':'\
+ <div class="tooltip-container">\
+ <div class="tooltip-contents">{{content}}</div>\
+ <div class="arrow"></div>\
+ </div>',
+ 'closeButtonContents':'<a href="#" class="tooltip-close">Close</a>',
+ 'onCreate':function(){},
+ 'onOpen':function(){},
+ 'onOpened':function(){},
+ 'onClose':function(){},
+ 'onClosed':function(){},
+ 'onPosition':function(){}
+ };
+
+ $.tooltip.autoTipDefaults = {
+ 'autoTip':true,
+ 'autoTipSelector':'.tip'
+ };
+
+ $.tooltip.setDefaults = function(defaults){
+ $.extend($.tooltip.defaults, defaults);
+ };
+
+ $.tooltip.autoTip = function(){
+ var createTooltip = function(selector){
+ $(selector).tooltip({
+ 'unique':false,
+ 'openTrigger':'mouseover',
+ 'closeTrigger':'mouseout',
+ 'stayOpen':true,
+ 'closeButton':false,
+ 'onCreate': function(ele, options){
+ options.content = $(ele).attr("title");
+ $(ele).attr("title",null);
+ }
+ });
+ }
+ $($.tooltip.autoTipDefaults.autoTipSelector).each(function(){ createTooltip(this); });
+
+ $($.tooltip.autoTipDefaults.autoTipSelector).live('DOMNodeInserted', function(){
+ if($.tooltip.autoTipDefaults.autoTip) createTooltip(this);
+ });
+
+ }
+
+ $(document).ready($.tooltip.autoTip);
+
+})(jQuery, window, document);
12 js/jquery.lingsTooltip.min.js
@@ -0,0 +1,12 @@
+/* Copyright Elliot Lings 2012 - elliotlings.com/jquery/tooltip
+ * This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License - http://creativecommons.org/licenses/by-nc/3.0/ */
+(function(b,s,q){var r=b(q);b.fn.extend({tooltip:function(c,a){(c=c||{})&&"object"==typeof c&&(c=b.extend({},b.tooltip.defaults,c));this.each(function(){new b.tooltip(this,c,a)})}});b.tooltip=function(c,a,l){var o,j={open:function(){"function"==typeof a.onOpen&&a.onOpen.call(this,c,a);a.unique&&this.closeAllTooltips();this.bindCloseEvent();a.autoPosition&&this.position();a.ajax&&!a.preload&&this.ajaxRequest();a.tooltip.stop(!0).fadeTo(a.fade,1,function(){"function"==typeof a.onOpened&&a.onOpened.call(this,
+c,a)})},close:function(){"function"==typeof a.onClose&&a.onClose.call(this,c,a);this.bindOpenEvent();a.tooltip.stop(!0).fadeTo(a.fade,0,function(){"function"==typeof a.onClosed&&a.onClosed.call(this,c,a)})},closeAllTooltips:function(){b(b.tooltip.tips).each(function(){b(this).data("tooltip").stayOpen||b(this).tooltip("close")})},position:function(k,d,l){a.gravity=d||a.gravity;var k=k||!1,e=b(c),d=e.offset().left,g=e.offset().top,i=e.outerWidth(),e=e.outerHeight(),j=i/2,f=a.tooltip,n=f.outerWidth(),
+h=f.outerHeight(),m=n/2;if(a.autoGravity){var o=r.width(),p=r.height();g+e+h+a.offsetY<p&&m-j<=d?a.gravity="n":n+a.offsetX<d&&h/2+g+e/2<p?a.gravity="e":h+a.offsetY<g&&m-j<=d?a.gravity="s":n+a.offsetX+i+d<o&&h/2+g+e/2<p&&(a.gravity="w")}if(!f.hasClass(a.gravity)||!l){f.removeClass("n e w s");f.addClass(a.gravity);if(k)switch(a.gravity){default:f.stop().animate({top:g+e+a.offsetY,left:d+i/2-m});break;case "s":f.stop().animate({top:g-h-a.offsetY,left:d+i/2-m});break;case "w":f.stop().animate({top:g+
+e/2-h/2,left:d+i+a.offsetX});break;case "e":f.stop().animate({top:g+e/2-h/2,left:d-n-a.offsetX})}else switch(a.gravity){default:f.css({top:g+e+a.offsetY,left:d+i/2-m});break;case "s":f.css({top:g-h-a.offsetY,left:d+i/2-m});break;case "w":f.css({top:g+e/2-h/2,left:d+i+a.offsetX});break;case "e":f.css({top:g+e/2-h/2,left:d-n-a.offsetX})}"function"==typeof a.onPosition&&a.onPosition.call(this,c,a)}},bindCloseEvent:function(){b(c).off(".lingstip");if(a.closeTrigger)b(c).on(a.closeTrigger+".lingstip",
+function(k){a.preventDefault&&k.preventDefault();b(c).tooltip("close")})},bindOpenEvent:function(){b(c).off(".lingstip");if(a.openTrigger)b(c).on(a.openTrigger+".lingstip",function(k){a.preventDefault&&k.preventDefault();b(c).tooltip("open")})},ajaxRequest:function(c){var d=this,c=c||a.ajax;b.ajax(c).done(function(b){a.content=b;d.updateContent(b)}).fail(function(b,c){a.content=c;d.updateContent(c)});a.preload=!0},updateOptions:function(c){b.extend(a,c)},updateContent:function(b){a.tooltip.find(".tooltip-contents").html(b);
+this.position()},remove:function(){a.tooltip.remove();b(c).removeData(a.closeTrigger+".lingstip,"+a.openTrigger+".lingstip");b(c).off(a.closeTrigger);b.tooltip.tips.splice(a.tid,1);b.tooltip.iterator--;return!1}};if(a&&"string"==typeof a){if("undefined"==typeof b(c).data("tooltip")){console.log("Cannot apply this method to tooltip. Tooltip doesn't exist.");return}o=a;a=b(c).data("tooltip");j[o](l);return this}if(a&&"object"==typeof a){"function"==typeof a.onCreate&&a.onCreate.call(this,c,a);a.tid=
+b.tooltip.iterator;b.tooltip.tips[b.tooltip.iterator]=c;a.ajax&&a.preload&&j.ajaxRequest();l=b(a.template.replace("{{content}}",a.content)).addClass(".tooltip-"+a.tid,a.classes).attr("id",a.id);a.closeButton&&l.prepend(b(a.closeButtonContents).click(function(a){a.preventDefault();j.close()}));a.tooltip=l.hide();a.fade=a.fade||0;j.bindOpenEvent();if(a.autoPosition)b(s).on("resize",function(){b(b.tooltip.tips).each(function(){var a=this;if("undefined"==typeof c)var c=setTimeout(function(){b(a).tooltip("position",
+!1,"",!0)},2E3)})});b("body").append(a.tooltip);j.position();b.tooltip.iterator++}b(c).data("tooltip",a)};b.tooltip.iterator=0;b.tooltip.tips=[];b.tooltip.reposition=function(c){c=c||!1;b(b.tooltip.tips).each(function(){b(this).tooltip("position",c)})};b.tooltip.defaults={content:"Empty",classes:null,id:null,openTrigger:"click",closeTrigger:"click",preventDefault:!0,closeButton:!1,fade:500,gravity:"n",autoGravity:!0,autoPosition:!0,unique:!0,stayOpen:!1,offsetY:10,offsetX:15,ajax:null,preload:!1,
+template:'<div class="tooltip-container"><div class="tooltip-contents">{{content}}</div><div class="arrow"></div></div>',closeButtonContents:'<a href="#" class="tooltip-close">Close</a>',onCreate:function(){},onOpen:function(){},onOpened:function(){},onClose:function(){},onClosed:function(){},onPosition:function(){}};b.tooltip.autoTipDefaults={autoTip:!0,autoTipSelector:".tip"};b.tooltip.setDefaults=function(c){b.extend(b.tooltip.defaults,c)};b.tooltip.autoTip=function(){var c=function(a){b(a).tooltip({unique:!1,
+openTrigger:"mouseover",closeTrigger:"mouseout",stayOpen:!0,closeButton:!1,onCreate:function(a,c){c.content=b(a).attr("title");b(a).attr("title",null)}})};b(b.tooltip.autoTipDefaults.autoTipSelector).each(function(){c(this)});b(b.tooltip.autoTipDefaults.autoTipSelector).live("DOMNodeInserted",function(){b.tooltip.autoTipDefaults.autoTip&&c(this)})};b(q).ready(b.tooltip.autoTip)})(jQuery,window,document);

0 comments on commit 997e7c5

Please sign in to comment.
Something went wrong with that request. Please try again.