Подсказки в Bootstrap не отображаются

Question

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

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<a class="btn btn-outline-secondary" data-toggle="tooltip" title="Title" data-placement="left" href="#" alt="EMAIL">
  <img src="email-icon.png" width=100 height=100 >
</a>

Я думаю, что я попробовал все, включая другие посты здесь.

Я добавил скрипт в самом начале моего раздела что выглядит следующим образом:

И я пытаюсь добавить всплывающую подсказку к моей кнопке, которая выглядит следующим образом:

И она абсолютно ничего не делает. Я добавил все соответствующие файлы. js, и единственное, о чем я могу думать, это то, что, может быть, тот факт, что я использую bootswatch CSS, может испортить его? Пожалуйста помоги!

Answer 1

Ваш код правильный, но шоу скрытия позиции по умолчанию слева не отображалось. Надеюсь, это поможет вам.

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a class="btn btn-outline-secondary" data-toggle="tooltip" title="Title" data-placement="left" href="#" alt="EMAIL">
                <img src="email-icon.png" width=100 height=100 >
            </a>

Answer 2

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

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<a class="btn btn-outline-secondary" data-toggle="tooltip" title="Title" data-placement="left" href="#" alt="EMAIL">
  <img src="email-icon.png" width=100 height=100 >
</a>

Answer 3

С bootstrap 4 это проще. См. Пример ниже.

Ссылочная ссылка: https://getbootstrap.com/docs/4.3/components/tooltips/#examples

Вы используете bootstrap 3, поэтому необходимо соблюдать необходимые поддерживаемые стандарты в соответствии с этой версией.

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

    <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">
  Tooltip on bottom
</button>