Featured post
jquery plugins - showing a single qtip when different events of different targets are triggered? -
i have few input , select controls in form each of them have small question mark icon in front of them show tool tip when mouse on gif of excellent jquery jquery.qtip-1.0.0-rc3.js(with jquery-1.3.2.min.js) plug-in :
$('#questionmark1').qtip({ content: 'sample content' , style: { name: 'samplestyle' } , position: { corner: { target: 'bottomleft', tooltip: 'righttop'} } });
i want show tool tip when ever corresponding input field focused , hide when blurred . following 1 trick without showing tool tip when mouse on gif
$('#questionmark1').qtip({ content: 'sample content' , style: { name: 'samplestyle' } , position: { corner: { target: 'bottomleft', tooltip: 'righttop'} } , show: { when: { target: $('#input1'), event: 'focus'} } , hide: { when: { target: $('#input1'), event: 'blur'} } });
but problem does not work.
show: { when: { target: $('#input1'), event: 'focus'}, { target: $('#questionmark1'), event: 'focus'} }
in short preceding first 2 blocks of code works fine , can add both achieve goal want right way .
how can target multiple targets'events showing single tool tip ?
you don't have wire of show/hide events inside of call qtip()
. i'd define mouseover
event event triggers qtip default:
$('#questionmark1').qtip({ content: {text:'sample content', prerender: true} , style: { name: 'samplestyle' } , position: { corner: { target: 'bottomleft', tooltip: 'righttop'} } , show: { when: 'mouseover' } });
(note prerender option added)
and manually define event handlers input want show qtip for:
$("#input1").bind("focusin", function() { $("#questionmark1").qtip("show"); }).bind("blur", function() { $("#" + this.id + "-tip").qtip("hide"); });
see example here: http://jsfiddle.net/andrewwhitaker/wcgam/
the odd thing can make both tooltips show focusing first input , mousing on second question mark. easy enough fix though.
hope helps.
- Get link
- X
- Other Apps
Comments
Post a Comment