diff --git a/README.md b/README.md index 56070f5..a0d3360 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,9 @@ finalMessage| A message that appears at the end of the action for the confirm | finalMessageDuration| Duration of the final message in ms |1000 onYes| Function that is triggered when clicking ‘Yes’ on confirm |empty onNo | Function that is triggered when clicking ‘No’ on confirm |empty +onlyOne | Always make the only one of the tool tip is open |false +autoClose | After a specified time has elapsed, it closed with automatic | false +autoCloseDuration | Number of milliseconds elapsed before it closes automatically | 3000 ###Demo and examples [rubentd.com/darktooltip](http://rubentd.com/darktooltip) diff --git a/js/jquery.darktooltip.js b/js/jquery.darktooltip.js index c0550d8..c2f8cbf 100644 --- a/js/jquery.darktooltip.js +++ b/js/jquery.darktooltip.js @@ -1,15 +1,15 @@ /* - * DarkTooltip v0.3.2 + * DarkTooltip v0.3.2.1 * Simple customizable tooltip with confirm option and 3d effects * (c)2014 Rubén Torres - rubentdlh@gmail.com * Released under the MIT license */ (function($) { - function DarkTooltip(element, options){ this.bearer = element; this.options = options; + this.showEvent; this.hideEvent; this.mouseOverMode=(this.options.trigger == "hover" || this.options.trigger == "mouseover" || this.options.trigger == "onmouseover"); } @@ -33,6 +33,16 @@ dt.hide(); }); } + else { + if (this.options.autoClose) { + if (this.showEvent) { + clearTimeout(dt.showEvent); + } + dt.showEvent = setTimeout(function(){ + dt.tooltip.hide(); + }, this.options.autoCloseDuration); + } + } }, hide: function(){ @@ -93,7 +103,10 @@ } this.contentType='html'; }else{ - this.contentType='text'; + this.contentType = this.options.defaultContentType; + if (this.contentType == '') { + this.contentType='text'; + } } tooltipId = ""; if(this.bearer.attr("id") != ""){ @@ -172,6 +185,9 @@ this.bearer.click( function(e){ e.preventDefault(); dt.setPositions(); + if (dt.options.onlyOne) { + $('.dark-tooltip:visible').hide(); + } dt.toggle(); e.stopPropagation(); }); @@ -259,7 +275,11 @@ yes: 'Yes', autoTop: true, autoLeft: true, - onClose: function(){} + onClose: function(){}, + onlyOne: false, + autoClose: false, + autoCloseDuration: 3000, + defaultContentType: 'html' }; })(jQuery); diff --git a/js/jquery.darktooltip.min.js b/js/jquery.darktooltip.min.js index 04c68f2..19a4d3a 100644 --- a/js/jquery.darktooltip.min.js +++ b/js/jquery.darktooltip.min.js @@ -1 +1,20 @@ -(function(e){function t(e,t){this.bearer=e;this.options=t;this.hideEvent;this.mouseOverMode=this.options.trigger=="hover"||this.options.trigger=="mouseover"||this.options.trigger=="onmouseover"}t.prototype={show:function(){var e=this;if(this.options.modal){this.modalLayer.css("display","block")}this.tooltip.css("display","block");if(e.mouseOverMode){this.tooltip.mouseover(function(){clearTimeout(e.hideEvent)});this.tooltip.mouseout(function(){clearTimeout(e.hideEvent);e.hide()})}},hide:function(){var e=this;this.hideEvent=setTimeout(function(){e.tooltip.hide()},100);if(e.options.modal){e.modalLayer.hide()}this.options.onClose()},toggle:function(){if(this.tooltip.is(":visible")){this.hide()}else{this.show()}},addAnimation:function(){switch(this.options.animation){case"none":break;case"fadeIn":this.tooltip.addClass("animated");this.tooltip.addClass("fadeIn");break;case"flipIn":this.tooltip.addClass("animated");this.tooltip.addClass("flipIn");break}},setContent:function(){e(this.bearer).css("cursor","pointer");if(this.options.content){this.content=this.options.content}else if(this.bearer.attr("data-tooltip")){this.content=this.bearer.attr("data-tooltip")}else{return}if(this.content.charAt(0)=="#"){if(this.options.delete_content){var t=e(this.content).html();e(this.content).html("");this.content=t;delete t}else{e(this.content).hide();this.content=e(this.content).html()}this.contentType="html"}else{this.contentType="text"}tooltipId="";if(this.bearer.attr("id")!=""){tooltipId="id='darktooltip-"+this.bearer.attr("id")+"'"}this.modalLayer=e("");this.tooltip=e("
"+this.content+"
");this.tip=this.tooltip.find(".tip");e("body").append(this.modalLayer);e("body").append(this.tooltip);if(this.contentType=="html"){this.tooltip.css("max-width","none")}this.tooltip.css("opacity",this.options.opacity);this.addAnimation();if(this.options.confirm){this.addConfirm()}},setPositions:function(){var e=this.bearer.offset().left;var t=this.bearer.offset().top;switch(this.options.gravity){case"south":e+=this.bearer.outerWidth()/2-this.tooltip.outerWidth()/2;t+=-this.tooltip.outerHeight()-this.tip.outerHeight()/2;break;case"west":e+=this.bearer.outerWidth()+this.tip.outerWidth()/2;t+=this.bearer.outerHeight()/2-this.tooltip.outerHeight()/2;break;case"north":e+=this.bearer.outerWidth()/2-this.tooltip.outerWidth()/2;t+=this.bearer.outerHeight()+this.tip.outerHeight()/2;break;case"east":e+=-this.tooltip.outerWidth()-this.tip.outerWidth()/2;t+=this.bearer.outerHeight()/2-this.tooltip.outerHeight()/2;break}if(this.options.autoLeft){this.tooltip.css("left",e)}if(this.options.autoTop){this.tooltip.css("top",t)}},setEvents:function(){var t=this;var n=t.options.hoverDelay;var r;if(t.mouseOverMode){this.bearer.mouseenter(function(){r=setTimeout(function(){t.setPositions();t.show()},n)}).mouseleave(function(){clearTimeout(r);t.hide()})}else if(this.options.trigger=="click"||this.options.trigger=="onclik"){this.tooltip.click(function(e){e.stopPropagation()});this.bearer.click(function(e){e.preventDefault();t.setPositions();t.toggle();e.stopPropagation()});e("html").click(function(){t.hide()})}},activate:function(){this.setContent();if(this.content){this.setEvents()}},addConfirm:function(){this.tooltip.append("");this.setConfirmEvents()},setConfirmEvents:function(){var e=this;this.tooltip.find("li.darktooltip-yes").click(function(t){e.onYes();t.stopPropagation()});this.tooltip.find("li.darktooltip-no").click(function(t){e.onNo();t.stopPropagation()})},finalMessage:function(){if(this.options.finalMessage){var e=this;e.tooltip.find("div:first").html(this.options.finalMessage);e.tooltip.find("ul").remove();e.setPositions();setTimeout(function(){e.hide();e.setContent()},e.options.finalMessageDuration)}else{this.hide()}},onYes:function(){this.options.onYes(this.bearer);this.finalMessage()},onNo:function(){this.options.onNo(this.bearer);this.hide()}};e.fn.darkTooltip=function(n){return this.each(function(){n=e.extend({},e.fn.darkTooltip.defaults,n);var r=new t(e(this),n);r.activate()})};e.fn.darkTooltip.defaults={animation:"none",confirm:false,content:"",finalMessage:"",finalMessageDuration:1e3,gravity:"south",hoverDelay:0,modal:false,no:"No",onNo:function(){},onYes:function(){},opacity:.9,size:"medium",theme:"dark",trigger:"hover",yes:"Yes",autoTop:true,autoLeft:true,onClose:function(){}}})(jQuery) + +(function($){function DarkTooltip(element,options){this.bearer=element;this.options=options;this.showEvent;this.hideEvent;this.mouseOverMode=(this.options.trigger=="hover"||this.options.trigger=="mouseover"||this.options.trigger=="onmouseover");} +DarkTooltip.prototype={show:function(){var dt=this;if(this.options.modal){this.modalLayer.css('display','block');} +this.tooltip.css('display','block');if(dt.mouseOverMode){this.tooltip.mouseover(function(){clearTimeout(dt.hideEvent);});this.tooltip.mouseout(function(){clearTimeout(dt.hideEvent);dt.hide();});} +else{if(this.options.autoClose){if(this.showEvent){clearTimeout(dt.showEvent);} +dt.showEvent=setTimeout(function(){dt.tooltip.hide();},this.options.autoCloseDuration);}}},hide:function(){var dt=this;this.hideEvent=setTimeout(function(){dt.tooltip.hide();},100);if(dt.options.modal){dt.modalLayer.hide();} +this.options.onClose();},toggle:function(){if(this.tooltip.is(":visible")){this.hide();}else{this.show();}},addAnimation:function(){switch(this.options.animation){case'none':break;case'fadeIn':this.tooltip.addClass('animated');this.tooltip.addClass('fadeIn');break;case'flipIn':this.tooltip.addClass('animated');this.tooltip.addClass('flipIn');break;}},setContent:function(){$(this.bearer).css('cursor','pointer');if(this.options.content){this.content=this.options.content;}else if(this.bearer.attr("data-tooltip")){this.content=this.bearer.attr("data-tooltip");}else{return;} +if(this.content.charAt(0)=='#'){if(this.options.delete_content){var content=$(this.content).html();$(this.content).html('');this.content=content;delete content;} +else{$(this.content).hide();this.content=$(this.content).html();} +this.contentType='html';}else{this.contentType=this.options.defaultContentType;if(this.contentType==''){this.contentType='text';}} +tooltipId="";if(this.bearer.attr("id")!=""){tooltipId="id='darktooltip-"+this.bearer.attr("id")+"'";} +this.modalLayer=$("");this.tooltip=$("
"+this.content+"
");this.tip=this.tooltip.find(".tip");$("body").append(this.modalLayer);$("body").append(this.tooltip);if(this.contentType=='html'){this.tooltip.css('max-width','none');} +this.tooltip.css('opacity',this.options.opacity);this.addAnimation();if(this.options.confirm){this.addConfirm();}},setPositions:function(){var leftPos=this.bearer.offset().left;var topPos=this.bearer.offset().top;switch(this.options.gravity){case'south':leftPos+=this.bearer.outerWidth()/2-this.tooltip.outerWidth()/2;topPos+=-this.tooltip.outerHeight()-this.tip.outerHeight()/2;break;case'west':leftPos+=this.bearer.outerWidth()+this.tip.outerWidth()/2;topPos+=this.bearer.outerHeight()/2-(this.tooltip.outerHeight()/2);break;case'north':leftPos+=this.bearer.outerWidth()/2-(this.tooltip.outerWidth()/2);topPos+=this.bearer.outerHeight()+this.tip.outerHeight()/2;break;case'east':leftPos+=-this.tooltip.outerWidth()-this.tip.outerWidth()/2;topPos+=this.bearer.outerHeight()/2-this.tooltip.outerHeight()/2;break;} +if(this.options.autoLeft){this.tooltip.css('left',leftPos);} +if(this.options.autoTop){this.tooltip.css('top',topPos);}},setEvents:function(){var dt=this;var delay=dt.options.hoverDelay;var setTimeoutConst;if(dt.mouseOverMode){this.bearer.mouseenter(function(){setTimeoutConst=setTimeout(function(){dt.setPositions();dt.show();},delay);}).mouseleave(function(){clearTimeout(setTimeoutConst);dt.hide();});}else if(this.options.trigger=="click"||this.options.trigger=="onclik"){this.tooltip.click(function(e){e.stopPropagation();});this.bearer.click(function(e){e.preventDefault();dt.setPositions();if(dt.options.onlyOne){$('.dark-tooltip:visible').hide();} +dt.toggle();e.stopPropagation();});$('html').click(function(){dt.hide();})}},activate:function(){this.setContent();if(this.content){this.setEvents();}},addConfirm:function(){this.tooltip.append("");this.setConfirmEvents();},setConfirmEvents:function(){var dt=this;this.tooltip.find('li.darktooltip-yes').click(function(e){dt.onYes();e.stopPropagation();});this.tooltip.find('li.darktooltip-no').click(function(e){dt.onNo();e.stopPropagation();});},finalMessage:function(){if(this.options.finalMessage){var dt=this;dt.tooltip.find('div:first').html(this.options.finalMessage);dt.tooltip.find('ul').remove();dt.setPositions();setTimeout(function(){dt.hide();dt.setContent();},dt.options.finalMessageDuration);}else{this.hide();}},onYes:function(){this.options.onYes(this.bearer);this.finalMessage();},onNo:function(){this.options.onNo(this.bearer);this.hide();}} +$.fn.darkTooltip=function(options){return this.each(function(){options=$.extend({},$.fn.darkTooltip.defaults,options);var tooltip=new DarkTooltip($(this),options);tooltip.activate();});} +$.fn.darkTooltip.defaults={animation:'none',confirm:false,content:'',finalMessage:'',finalMessageDuration:1000,gravity:'south',hoverDelay:0,modal:false,no:'No',onNo:function(){},onYes:function(){},opacity:0.9,size:'medium',theme:'dark',trigger:'hover',yes:'Yes',autoTop:true,autoLeft:true,onClose:function(){},onlyOne:false,autoClose:false,autoCloseDuration:3000,defaultContentType:'html'};})(jQuery); \ No newline at end of file