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 @@+ 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%'
+});
+
+
+ + 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
+});