I have a tooltip-A which loads its content via ajax. It contains a link to open another tooltip-B.
When are both tooltips opened closing of the tooltips currently works like this:
I want to achieve:
http://jsfiddle.net/GAmFK/121/
$(document).on('click', '.tooltip-a', function(event) {
$(this).qtip({
show: {
event: event.type,
ready: true
},
hide: 'unfocus',
content: {
text: function(event, api) {
// Ajax content simplified for this example
return '<h1>tooltip-A</h1> <a href="#" class="tooltip-b">open tooltip-B</a>';
}
}
});
});
$(document).on('click', '.tooltip-b', function(event) {
$(this).qtip({
show: {
event: event.type,
ready: true
},
hide: 'unfocus',
content: {
text: function(event, api) {
return '<h1>tooltip-B</h1> <span>Click inside this tooltip should NOT close tooltip-A</span>';
}
}
});
});
I figured it out:
$(document).on('click', '.tooltip-a', function(event) {
$(this).qtip({
show: {
event: event.type,
ready: true
},
hide: 'unfocus',
events: {
hide: function(event, api) {
if ($(this).nextAll('.qtip').has(event.originalEvent.target).length)
{
event.preventDefault();
}
}
}
content: {
text: function(event, api) {
// Ajax content simplified for this example
return '<h1>tooltip-A</h1> <a href="#" class="tooltip-b">open tooltip-B</a>';
}
}
});
});