無法獲得boostraps jQuery工具提示出現

開始感到沮喪，這使得它很難看到我可能會出錯的地方，但本質上我試圖讓Bootstrap的jQuery工具提示在圖像懸停在內容中工作我的頁面。無法獲得boostraps jQuery工具提示出現

HTML身體：

<div class="tooltip-demo well"> 
<a title="Tooltip Text Goes Here" rel="tooltip" class="pennant-task" href="#"> 
<img src="/ssawp/wp-content/themes/wordpress-bootstrap/images/tasks/ytool-boatparts.jpg" /> 
</a> 
</div>

頁眉：

<script type="text/javascript"> 
    $('.tooltip-demo.well').tooltip({ 
     selector: "a[rel=tooltip]" 
    }) 
</script> 
<script src="bootstrap.js" type="text/javascript"></script>

我已經縮短了路徑，使其更容易瀏覽，但隨時檢查出的問題直播上：

http://okamistudio.com/ssawp/pennants/

我試圖實現小船上的工具提示我在「黃色三角旗」文本塊之下。

任何幫助或指導將不勝感激。

來源

2013-02-09 InsomniaBass

首先，在編寫自己的代碼之前，您需要包含bootstrap.js。其次，你需要將你的代碼包裝在一個文檔就緒處理程序中。

此外，您還沒有將它包含在您的示例中，因此爲了完整起見，我還包含了所需的jquery.js。試試這個：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="bootstrap.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('.tooltip-demo.well').tooltip({ 
      selector: "a[rel=tooltip]" 
     }); 
    }); 
</script>

來源

2013-02-09 11:18:55

我有bootstrap.js包括（見第二源代碼段的底部），缺少文件準備好處理程序（如果是這樣的$函數（）{位），似乎我我一直在使用jQuery（1.2.3）的過時版本，這也沒有幫助。謝謝你，我沒有太多JS的工作知識，這就是爲什麼我錯過了這個開場白。你介意簡單地解釋一下它的作用 - 將它創建爲一個函數而不是純腳本？我得等8分鐘才能回答，但你解決了。非常感激。 – InsomniaBass 2013-02-09 11:23:21

很高興幫助。文檔就緒處理程序（您是corerct，它是'$（function（）{...}）;'wrapper）意味着該塊中的代碼在DOM準備好之前不會執行。之前，您的代碼在DOM存在之前正在尋找DOM中的'.tooltip-demo.well'元素，這就是爲什麼它不起作用。 – 2013-02-09 11:25:55

啊哈，太棒了。感謝您花時間解釋這一點！祝你有美好的一天。 – InsomniaBass 2013-02-09 11:43:26

無法獲得boostraps jQuery工具提示出現

回答

相關問題