Hi folks,
first message on this forum. I would like to know: how do you show a tip the first time only (I mean when the tip is loaded), for a couple of seconds? Thanks in advance!
To show the tip when it is initialized,
set the show.ready property to true.
You could also just use
an API call to display it after it's been initialized instead.
JS Code
$('.selector').qtip('show');
In either case, you'll probably want to tell the tooltip to not hide automatically as well by setting hide to false.
With qTip v1, I think the best way to hide after a period of time is to use the Javascript setTimeout function in your
onShow callback. In the function called at the end of the timeout, use the API to hide it the tip. Something like:
JS Code
onShow: function() {
// After 1000ms, hide the qTip
setTimeout (function() {
$('.selector').qtip('hide');
}, 1000);
}
You might want to consider upgrading to v2 if possible. It's still not officially released, but there is a hide.inactive property you can set to automatically hide a tooltip after a period of inactivity. Not to mention that it is faster, less buggy and more elegant (from a coding perspective) IMO.
Thanks for your exhaustive reply! But there is still some issues with this one.
JS Code
jQuery(target).qtip({
content: 'content',
style: {
name: 'light'
},
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
},
adjust: {
y: 8
}
}
});If I embed
show: { ready: true } in my code, the tip doesn't appear centered on the bottom of the target (that's what I've been expecting). And if I put
jQuery(target).qtip('show'); after that code block, the tip doesn't appear at all. But everything works fine when the tip is displayed on mouse over event.