2013-03-02 84 views
39

我無法使twitter引導工具提示的數據延遲屬性工作。我使用它喜歡:Twitter引導工具提示插件中的數據延遲

這是我如何使用它:

<a href="#" data-toggle="tooltip" data-delay="{ show: 5000, hide: 3000}">with delay</a><script>jQuery('a[data-toggle="tooltip"]').tooltip().click(function(e) { e.preventDefault(); }); </script> 

,但我沒有看到顯示/隱藏任何延遲。任何想法爲什麼?

回答

83

最後我得到它與數據屬性一起工作。

data-delay='{"show":"5000", "hide":"3000"}' 

該對象必須用單引號括起來,帶雙引號的鍵和帶有double或none的值可能取決於類型。是唯一有效的方法。

這也適用於popovers。

+2

奇怪的是,它似乎不能用雙引號和單引號相反的方式工作。 – Pepper 2014-02-23 19:26:13

+6

'data-delay'屬性看起來是JSON格式,這就是爲什麼你顯然必須雙引號的關鍵名稱。僅供參考,如果您不需要,您不必引用整數值,例如'data-delay ='{「show」:100,「hide」:1000}'' – 2014-05-12 17:38:13

+9

這應該是答案。而不是基於JavaScript的解決方案。 – 2014-05-29 17:54:45

20

爲什麼你不能這樣做?

$('a').tooltip({ 
    'delay': { show: 5000, hide: 3000 } 
}); 
+0

是它的工作@Spyros ..? – Gautam3164 2013-03-02 05:23:04

+0

它給了我一個意想不到的標記:出於某種原因的錯誤,可能是語法錯誤等等。 – Spyros 2013-03-02 05:30:06

+0

看到我的編輯.... – Gautam3164 2013-03-02 05:34:01

0

您可以使用:

<div ... popover-popup-delay="2000" ...> 
1

爲使用AngularJS(UI):

<div tooltip="Hello" tooltip-popup-delay="500"></div> 
0

我喜歡這樣說:

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip({'delay': { show: 5000, hide: 3000 } 
    }); 
});