在基于 PHP 的系统上正确使用 Bootstrap 3 工具提示

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 标记的底部，并且页面的一部分正在动态加载，您可以尝试在 head 标记中调用 JQuery 和 Bootstrap，而不是在您的CSS:

<!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 的模板解析器解释为变量表达式。如果是这种情况，我希望您会收到错误消息。其次，正如 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 片段包装在 non-jquery domready 侦听器中，如下所示：

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

在基于 PHP 的系统上正确使用 Bootstrap 3 工具提示

Proper use of Bootstrap 3 Tooltip on a PHP based system

php

jquery

silverstripe

twitter-bootstrap-tooltip