在基於PHP的系統上正確使用Bootstrap 3 Tooltip

Question

我一直試圖讓這個工具提示代碼在頁面上初始化，我無法讓jQuery正確連接。

我們在Ubuntu上運行PHP，我們正在使用Silverstripe。 無論我在哪里或哪個文件中添加它，我都無法使用以下腳本。 我甚至嘗試從一個單獨的文件中調用它，它也沒有初始化。

如何將此代碼添加到PHP或SS文件中？ （Silverstripe CMS文件）

$(function () {

 $('[data-toggle="tooltip"]').tooltip()

})  

<button type=\"button\" class=\"btn btn-default help-tool\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Below you will find state-by-state breakdowns in Federal, State, and where available Local categories. 
            Explore the data by clicking the map or by clicking the magnifying lens in the table view.\"><i class=\"fa fa-info-circle fa-fw\"></i></button>

Answer 1

這通常是涉及調用腳本的順序的問題。

我相信你知道，你需要在Bootstrap之前調用JQuery，這似乎就是你在做的。 您的工具提示代碼位於不同的文件中，很可能在您的JQuery和Bootstrap有機會加載之前被調用。 您可以在工具提示腳本調用之前將JQuery和Bootstrap腳本調用復制到單獨的文件中來測試。

如果您的腳本調用位於body標記的底部，並且頁面的一部分是動態加載的，那么您可以嘗試在CSS標記之后調用JQuery和Bootstrap：

<!DOCTYPE html>
<html> 
<head>
<link rel="stylesheet" type="text/css" src="bootstrap.css" />
<link rel="stylesheet" type="text/css" src="main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>

<!-- 
Your separate file code that
includes tooltip
-->

<!-- Before
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
-->
</body>
</html>

Answer 2

這里有兩個原因可以想到。 首先，有可能$ SS被SS的模板解析器解釋為變量表達式。 如果是這種情況，我希望你會收到錯誤。 其次，正如Sumit Kukreja表示，jQuery和Bootstrap很可能被注入到模板的底部，而且這些代碼在加載之前就已經執行了。

選項1 ：要驗證是否發生這種情況，您可以將以下代碼添加到Page_Controller :: init（）或mysite / _config.php：

Requirements::set_write_js_to_body(false);

這將導致在<head>標記中添加所有必需的javascript。 生產不是一個好主意，但可以幫助診斷您的問題。

選項2 ：您可以使用Requirements :: customScript從控制器中包含該javascript。

選項3 ：將js片段包裝在非jquery domready監聽器中，如下所示：

document.addEventListener("DOMContentLoaded", function(event) {
    $('[data-toggle="tooltip"]').tooltip()
});

在基於PHP的系統上正確使用Bootstrap 3 Tooltip

問題描述

2 個解決方案

解決方案1
2 2015-12-29 19:52:02

解決方案2
1 已采納 2015-12-30 12:15:51

在基於PHP的系統上正確使用Bootstrap 3 Tooltip

問題描述

2 個解決方案

解決方案1 2 2015-12-29 19:52:02

解決方案2 1 已采納 2015-12-30 12:15:51

解決方案1
2 2015-12-29 19:52:02

解決方案2
1 已采納 2015-12-30 12:15:51