2

我有很少的輸入和選擇控件在我的窗體中,他們每個人都有一個小問號圖標在他們面前,當鼠標在jquery jquery.qtip-1.0.0的幫助下顯示一個工具提示時-rc3.js(使用jQuery-1.3.2.min.js)插件是這樣的:當不同目標的不同事件被觸發時顯示單個qtip?

$('#questionmark1').qtip({ 
     content: 'sample help content' 
     , style: { name: 'sampleStyle' } 
     , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }   
    }); 

我也想顯示工具提示當過相應的輸入字段中得到集中和隱藏得模糊時。下面一個這樣的伎倆,但沒有顯示工具提示時鼠標移到該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'} } 
    }); 

但問題是,像不起作用。

show: { when: { target: $('#input1'), event: 'focus'}, 
       { target: $('#questionmark1'), event: 'focus'} } 

短的代碼前面的第一2塊工作正常,我可以同時將實現我的目標,但我想這樣做的正確方法。
我如何針對多個目標的事件顯示單個工具提示?

+0

這個問題有什麼問題,我必須得到一個Tumbleweed?請任何幫助。 – 2010-12-28 15:28:03

回答

3

您不必將電話中的所有顯示/隱藏事件連接到qtip()。我定義mouseover事件作爲默認觸發qtip事件:

$('#questionmark1').qtip({ 
     content: {text:'sample help content', prerender: true} 
     , style: { name: 'sampleStyle' } 
     , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }   
     , show: { when: 'mouseover' } 
    }); 

(注意我說的預渲染選項)

,然後手動定義要顯示輸入的事件處理程序

$("#input1").bind("focusin", function() { 
    $("#questionmark1").qtip("show"); 
}).bind("blur", function() { 
    $("#" + this.id + "-tip").qtip("hide"); 
}); 

在這裏看到的例子:對於qtip http://jsfiddle.net/andrewwhitaker/wCgAM/

唯一奇怪的是,你可以讓機器人通過聚焦第一個輸入,然後將鼠標懸停在第二個問號上,h工具提示就會顯示出來。這可能很容易解決。

希望有所幫助。

+0

感謝您的幫助和info.at首先我的問題是,我使用jquery-1.3.2.min.js作爲qtip默認安裝,當我將其更改爲1.4.2時也無濟於事。但只有1.4.4的作品,我發現它通過與你優秀的jsfiddle.net鏈接工作。謝謝@Andrew – 2011-01-03 07:30:21

+0

實際上,我將它恢復原狀並將其綁定到我的輸入並選擇控件,因爲我只是在發現它剛剛從輸入移動到相關的questionmark1時發現了它的錯誤 – 2011-01-03 07:38:08

相關問題