Skip to content

Option to hide displayed tip after specified delay #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jameyc wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Option to hide displayed tip after specified delay #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
68 changes: 68 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,25 @@
jQuery('.default').tipso({ size: 'default' });
jQuery('.large').tipso({ size: 'large' });

jQuery('.width-limited').tipso({
titleContent: 'Arbitrary Width Tipso',
content: [
'<p>This tooltip will size itself to 500px wide, or 50% ',
'of the screen width, whichever is <em>narrower</em></p>',
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing ',
'elit. Asperiores velit, animi necessitatibus? Odio ',
'repudiandae vero</p>'
].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',
Expand Down Expand Up @@ -364,6 +383,55 @@ <h4>Size option</h4>
jQuery('.top').tipso({
size: 'tiny'
});
</code>
</pre>
</div>
</div>
<div class="row demo-section">
<div class="c6">
<h4>Width and maxWidth options</h4>
<p>
Tipso&rsquo;s width and maxWidth may be specified
in px or percent. If a maxWidth is provided,
it will act as a limit to Tipso&rsquo;s width
</p>
<p>
This example <span class="width-limited">tooltip</span>
will provide a tooltip 500px wide, or 50% of the screen
width - whichever is smaller.
</p>
</div>
<div class="c6">
<pre><span>Code Example</span>
<code type="javascript">
jQuery('.top').tipso({
width: '500',
maxWidth: '50%'
});
</code>
</pre>
</div>
</div>

<div class="row demo-section">
<div class="c6">
<h4>Auto-hide after a specified delay</h4>
<p>
Tipso can be set to automatically hide the tooltip
after a specified number of ms, by using the
&ldquo;autoHide&rdquo; option.
</p>
<p>
This example <span class="auto-hide">tooltip</span>
will display for 2 seconds, and then close itself.
</p>
</div>
<div class="c6">
<pre><span>Code Example</span>
<code type="javascript">
jQuery('.top').tipso({
autoHide: 2000
});
</code>
</pre>
</div>
Expand Down
15 changes: 15 additions & 0 deletions src/tipso.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
maxWidth : '',
delay : 200,
hideDelay : 0,
autoHide : 0,
animationIn : '',
animationOut : '',
offsetX : 0,
Expand Down Expand Up @@ -242,6 +243,10 @@
$win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
});
}

if (obj.settings.autoHide > 0)
obj.setAutoHideTimeout();

}, obj.settings.delay);
}
},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -976,6 +990,7 @@
}

}

$[pluginName] = $.fn[pluginName] = function(options) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
Expand Down