I'm using qtip for jQuery, and I have the following code
$('#content a[href]').qtip(
{
content: 'Some basic content for the tooltip', // Give it some content, in this case a simple string
style: {
name: 'cream', // Inherit from preset style
tip: 'topLeft'
},
show: {
when: 'click', // Show it on click...
solo: true // ...and hide all others when its shown
},
hide: {
when : 'focusout',
fixed: true
}
});
The desired effect is that the tip should display when I click on the link and stay there unless if I click on some other part of the page (hence the focusout), but at the same time if I click on the tip itself, I don't want it to disappear so that I can insert interesting stuff in it, hence the fixed: true... but then even when I do this it would still disappear when I click on the tip... what am I doing wrong or is there another way to prevent the tip from disappearing when I click on it but have it disappear if I click on another part of the page?
You need to use the unfocus
event:
$('#content a[href]').qtip({
content: 'Some basic content for the tooltip',
// Give it some content, in this case a simple string
style: {
name: 'cream',
// Inherit from preset style
tip: 'topLeft'
},
show: {
when: 'click',
// Show it on click...
solo: true // ...and hide all others when its shown
},
hide: {
when: { event: 'unfocus' }
}
});
Working demo: http://jsfiddle.net/andrewwhitaker/rep87/
From the documentation:
The 'unfocus' event hides the tooltip when anywhere else on the document, except the tooltip itself, is clicked.