showing a single qtip when different events of different targets are triggered? - jquery-plugins

Question

I have few input and select controls in my form that each of them have a small question mark icon in front of them that will show a tool tip when mouse is over that gif with help of excellent jquery jquery.qtip-1.0.0-rc3.js(with jquery-1.3.2.min.js) plug-in like this :
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
});
I also want to show tool tip when ever that corresponding input field get focused and hide when get blurred . the following one do the trick but without showing the tool tip when mouse is over that gif
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: { target: $('#input1'), event: 'focus'} }
, hide: { when: { target: $('#input1'), event: 'blur'} }
});
but the problem is that something like does not work.
show: { when: { target: $('#input1'), event: 'focus'},
{ target: $('#questionmark1'), event: 'focus'} }
in short the preceding first 2 blocks of code works fine and i can add both to achieve my goal but i want do it the right way .
how can i target multiple targets'events for showing a single tool tip ?

Answer 1

You don't have to wire up all of the show/hide events inside of the call to qtip(). I'd define the mouseover event as the event that triggers the qtip by default:
$('#questionmark1').qtip({
content: {text:'sample help content', prerender: true}
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: 'mouseover' }
});
(Note the prerender option I added)
And then manually define event handlers for the input that you want to show the qtip for:
$("#input1").bind("focusin", function() {
$("#questionmark1").qtip("show");
}).bind("blur", function() {
$("#" + this.id + "-tip").qtip("hide");
});
See an example here: http://jsfiddle.net/andrewwhitaker/wCgAM/
The only odd thing is that you can make both tooltips show up by focusing the first input and then mousing over the second question mark. This is probably easy enough to fix though.
Hope that helps.