jquery — правильное использование Bootstrap 3 Tooltip в системе на основе PHP
Я пытался заставить этот код всплывающей подсказки инициализироваться на странице, и я не могу заставить jQuery правильно подключиться.
У нас PHP работает на Ubuntu, и мы используем 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>
Решение
Здесь на ум приходят две причины. Во-первых, возможно, что $ интерпретируется синтаксическим анализатором шаблонов SS как выражение переменной. Я ожидаю, что вы получите ошибку, если это так. Во-вторых, как указал Sumit Kukreja, вполне вероятно, что jQuery и Bootstrap внедряются внизу вашего шаблона, и этот код выполняется до того, как они будут загружены.
Опция 1: Чтобы проверить, происходит ли это, вы можете добавить следующий код в Page_Controller :: init () или mysite / _config.php:
Requirements::set_write_js_to_body(false);
Что приведет к добавлению всего необходимого JavaScript в <head> тег. Не очень хорошая идея для производства, но может помочь диагностировать вашу проблему.
Вариант 2: Вы можете включить этот JavaScript из вашего контроллера с помощью Requirements :: customScript.
Вариант 3: Оберните ваш фрагмент js в слушателя, не являющегося jquery domready, вот так:
document.addEventListener("DOMContentLoaded", function(event) {
$('[data-toggle="tooltip"]').tooltip()
});
Другие решения
Обычно это проблема, связанная с порядком, в котором вызываются ваши скрипты.
Как я уверен, вы знаете, что вам нужно вызвать JQuery перед Bootstrap, что, похоже, вы делаете. Ваш код всплывающей подсказки, который находится в другом файле, скорее всего вызывается до того, как ваши JQuery и Bootstrap смогут загрузить. Вы можете проверить это, скопировав вызовы сценариев JQuery и Bootstrap в отдельный файл непосредственно перед вызовом сценария всплывающей подсказки.
Если ваши вызовы сценария находятся внизу вашего тега body и часть страницы загружается динамически, вы можете попробовать вызывать JQuery и Bootstrap в вашем теге head вместо вашего 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>