如何在twitter-bootstrap中編寫popovers？

Question

你如何在twitter-bootstrap中編寫popovers？我正在尋找一組步驟來激活JavaScript的popover。

Answer 1

我把它從引導例如頁面的源代碼：

$(function() { 
    $("a[rel=popover]") 
    .popover({ 
     offset: 10, 
     html: true 
    }) 
    .click(function(e) { 
     e.preventDefault() 
    }) 
}) 

您也可以嘗試改變這種

$("a[rel=popover]")

到應該顯示酥料餅的元素。

Answer 2

我還沒有關於JavaScript的知識，但這裏是我如何設法實現引導彈窗。

確保您的文件已經連起來的酥料餅的插件和工具提示插件，如果沒有則用做一個鏈接到這些文件如下：

<script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 

插入剛剛結束標記上面的上面的代碼，像這樣：

<script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 

    </body> 

然後插入該腳本的結束標記上面：

<script type="text/javascript"> 
    $(function() {$("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 

因此，所有的一切，你粘貼代碼應當是這樣的：

<script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
     $("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 
    </script> 

    </body> 

現在，標記你的錨標籤爲流行的功能。像這樣：

<a href="#" class="pop" title="Pop!" data-content="Some Content"> 

說明，data-content=""包含彈出窗口的內容。 title="Pop!"包含標題標題。

的class="pop"是您選擇的任何類的名稱，但可以肯定的名稱在上面的腳本中發現的類名，也就是匹配，$("a.pop")

如果你喜歡使用一個ID，那麼它應像這樣，

<a href="#" id="pop" title="Pop!" data-content="Some Content"> 

和...

<script type="text/javascript"> 
     $(function() { 
     $("a#pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 
    </script> 

此示例代碼將作出離開酥料餅的，如果你想在彈出它到另一側，然後CH ange placement：'left'to place placement：'top'