diff --git a/README.md b/README.md index 80fafb1..03fd36d 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ To use css3 animation effects please include [Animate.css](http://daneden.github | maxWidth | '' | max-width of the tooltip in px or % (for % add the value in quotes ex.'50%'). For usage you need to set width to '', false or null | | delay | 200 | Delay before showing the tooltip in ms | | hideDelay | 0 | Delay before hiding the tooltip in ms | +| autoHide | 0 | Automatically hide tooltip after _n_ ms | animationIn | '' | CSS3 animation effect to show the tooltip using [Animate.css](http://daneden.github.io/animate.css) | | animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/animate.css) | | offsetX | 0 | Offset value of the tooltip on X axis | diff --git a/demo/index.html b/demo/index.html index a710362..f3bc8ef 100644 --- a/demo/index.html +++ b/demo/index.html @@ -193,6 +193,25 @@ jQuery('.default').tipso({ size: 'default' }); jQuery('.large').tipso({ size: 'large' }); + jQuery('.width-limited').tipso({ + titleContent: 'Arbitrary Width Tipso', + content: [ + '

This tooltip will size itself to 500px wide, or 50% ', + 'of the screen width, whichever is narrower

', + '

Lorem ipsum dolor sit amet, consectetur adipisicing ', + 'elit. Asperiores velit, animi necessitatibus? Odio ', + 'repudiandae vero

' + ].join(''), + width: '500', + maxWidth: '50%' + }); + + jQuery('.auto-hide').tipso({ + titleContent: 'Auto-Hiding Tipso', + content: 'This tooltip will automatically hide itself after 2 seconds', + autoHide: 2000, + }); + jQuery('.page-load').tipso({ position: 'bottom', background: '#55b555', @@ -364,6 +383,55 @@

Size option

jQuery('.top').tipso({ size: 'tiny' }); + + + + +
+
+

Width and maxWidth options

+

+ Tipso’s width and maxWidth may be specified + in px or percent. If a maxWidth is provided, + it will act as a limit to Tipso’s width +

+

+ This example tooltip + will provide a tooltip 500px wide, or 50% of the screen + width - whichever is smaller. +

+
+
+
Code Example
+
+jQuery('.top').tipso({
+  width: '500',
+  maxWidth: '50%'
+});
+
+					
+
+
+ +
+
+

Auto-hide after a specified delay

+

+ Tipso can be set to automatically hide the tooltip + after a specified number of ms, by using the + “autoHide” option. +

+

+ This example tooltip + will display for 2 seconds, and then close itself. +

+
+
+
Code Example
+
+jQuery('.top').tipso({
+  autoHide: 2000
+});
 
 					
diff --git a/src/tipso.js b/src/tipso.js index 83b9999..d68ea12 100644 --- a/src/tipso.js +++ b/src/tipso.js @@ -32,6 +32,7 @@ maxWidth : '', delay : 200, hideDelay : 0, + autoHide : 0, animationIn : '', animationOut : '', offsetX : 0, @@ -242,6 +243,10 @@ $win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler'); }); } + + if (obj.settings.autoHide > 0) + obj.setAutoHideTimeout(); + }, obj.settings.delay); } }, @@ -299,6 +304,15 @@ $e.removeData(pluginName); $e.removeClass('tipso_style').attr('title', this._title); }, + setAutoHideTimeout: function() { + var obj = this; + if (typeof(obj.autoHideTimeout) !== 'undefined') { + window.clearTimeout(obj.autoHideTimeout); + } + obj.autoHideTimeout = window.setTimeout(function() { + obj.close(); + }, obj.settings.autoHide); + }, titleContent: function() { var content, $e = this.$element, @@ -976,6 +990,7 @@ } } + $[pluginName] = $.fn[pluginName] = function(options) { var args = arguments; if (options === undefined || typeof options === 'object') {