Bootstrap подсказка $ (...). Подсказка не является функцией - PullRequest
Новая
       32

Bootstrap подсказка $ (...). Подсказка не является функцией

0 голосов
/ 07 февраля 2020

Я получаю указанную ошибку со следующим кодом. В документации сказано, что вам нужны только jQuery и Bootstrap, а затем появляется подсказка. Поппер также не нужен, если используется версия bootstrap min.

Почему это не работает? Я искал часы, и ни у кого, похоже, нет такой же проблемы. Заранее спасибо за помощь. 

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!">
</div>

Ответы [ 3 ]

0 голосов
/ 07 февраля 2020

Подсказки требуют popper.js для работы. Убедитесь, что вы включили это до bootstrap.min.js: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input type="text" data-toggle="tooltip" title="hi there!">
</div>

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
0 голосов
/ 08 февраля 2020

Вам необходимо добавить bootstrap.min.css файл, и вы также можете установить положение всплывающей подсказки с помощью атрибута data-location и установить значение top, bottom, left или right.
Bootstrap3 подсказка до c: https://getbootstrap.com/docs/3.3/javascript/#tooltips

$(document).ready(function() {
  //Tooltip initialization
  $('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<br><br>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <input type="text" class="form-control" data-toggle="tooltip" title="hi there!">
    </div>
  </div>
</div>
0 голосов
/ 07 февраля 2020

Ваш код работает. Может быть, вы не можете видеть. Измените размещение данных следующим образом: 

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!" data-placement="bottom">
</div>
...