Всплывающая подсказка не работает вообще - PullRequest
0 голосов
/ 25 апреля 2018

Итак, ребята, я на самом деле в очень странной ситуации и каким-то образом не могу понять, что со мной происходит без смысла.Таким образом, ситуация в том, что я на самом деле хорошо реализую свою подсказку начальной загрузки, и я проверил ее на JsFiddle, она тоже работает нормально, однако, после многих усилий, она не реализуется в веб-проекте, который я надеваюНе знаю почему.

Это буквально очень странно.Вот моя реализация, которая отлично работает на JsFiddle.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- jQuery Script -->
    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script type="text/javascript">
      $(document).ready(function (){
        $("[data-toggle=tooltip]").tooltip()
      })
    </script>
  </head>
  <body>
     <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>
  </body>

И для решений я сделал много вещей, но, к сожалению, все они не сработали.

  1. Чтобы принять во внимание имя класса

    <script type="text/javascript">
      $(document).ready(function (){
       $(".btn-secondary").tooltip()
      })
    </script>
    
  2. Чтобы использовать элемент body для переключения данных:

    <script type="text/javascript"> $(document).ready(function (){ $("body").tooltip({ selector : '[data-toggle=tooltip]' }) }) </script>

  3. Чтобы использовать контейнер в качестве тела и сфокусироваться на разделе:

    <script type="text/javascript"> $(document).ready(function (){ $(".testimonial.home-page").tooltip({ selector : '[data-toggle=tooltip]', container : 'body' }) }) </script>

Вот что я получаю в своем веб-проекте:

Final Result on the Web Project

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

РЕДАКТИРОВАТЬ

Я проверил консоль и получил этоошибка: .tooltip не является функцией :

Error on the console

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

Решение состоит в том, что произошла ошибка при вызове некоторых файлов jQuery, которая не была вызвана должным образом, и, следовательно, весь проект не работал. Поэтому, если вы используете popups, tooltips, убедитесь, что вы вызываете jquery в правильном формате. Вот ответ и как я получил это, просто посмотрите на вызов файлов jQuery и других файлов соответственно, а затем в теле я назвал скрипт для всплывающей подсказки:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="style.css">

    <!-- SLICK SLIDER-->
    <link rel="stylesheet" type="text/css" href="assets/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="assets/slick/slick-theme.css"/>

    <!-- MATERIAL ICONS-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- jQuery first, then jQuery min.js, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </head>
  <body>
    <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>
    
    <script type="text/javascript">
      $(document).ready(function (){
        $('[data-toggle="tooltip"]').tooltip({
          container : 'body'
        })
      })
    </script>
  </body>
0 голосов
/ 25 апреля 2018

Попробуйте вызвать функцию всплывающей подсказки таким образом и передать параметры в виде атрибутов HTML.Вы можете проверить некоторые рабочие примеры здесь .

<button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Basic tooltip">Hover me</button>

<script>
 $(function () {
  $('[data-toggle="tooltip"]').tooltip()
 });
</script>
0 голосов
/ 25 апреля 2018

Вам нужно добавить несколько атрибутов внутри tooltip function {container:'body', trigger: 'hover', placement:"bottom"}

 $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(
        {container:'body', trigger: 'hover', placement:"bottom"}
        );   
    });
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- jQuery Script -->
    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    
  </head>
  <body>
     <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>
  </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...