Craga89/qTip2 — Issue #297: two qtip on the same element
Author: enghelewa
Created: 2012-01-16 12:45:37+00:00
State: open

hello,,
thanks for hard work done to make us this beautiful plugin :)
i have an element lets say <a> in the page. and i one qtip is binded to it on hover or mouse enter to show as a tipsy tooltip.
and another qtip is binded to show on click an open as modal.

unfortunately this wont work with me :(
how to do that ?
here is my code:

the first qtip:(tipsy to view the title)

$(".loadMembers").qtip({
id: true,
style: {classes: 'ui-tooltip-rounded ui-tooltip-tipsy ui-tooltip-shadow app_id'},
position: {
my: 'bottom center', // Position my top left...
at: 'top center'
},
show: {
event: 'mouseenter',
solo: false
}
});

the second qtip to open a modal box:

$('.loadMems').each(function(){
$(this).qtip({
content: {
text: '',
ajax: {
type:'post',
url: 'url',
data:{'session':$(this).closest('tr').attr('data-id')}
},
title: {
text: 'My Company Members',
button: true
}
},
position: {
at: 'center center', // Position the tooltip above the link
my: 'cenet center',
target:$(window),
viewport: $(window), // Keep the tooltip on-screen at all times
effect: false // Disable positioning animation
},
show: {
event: 'click',
solo: false, // Only show one tooltip at a time
modal: {
on: true,
blur: false,
escape: false
}
},
hide: {target:$('.ui-tooltip-close')},
style: {
classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
},
events: {
render: function(event, api) {
$(this).draggable({handel:'.ui-tooltip-titlebar',cancel:'.ui-tooltip-content,.ui-tooltip-titlebar *:not(div)',containment:'document'});
}
}
});
});