javascript Bootstrap 工具提示不适用于我的 Web 项目

Question

提问by Alok

I'm actually in a very weird situation and somehow can't be able to figure out what non-sense is happening to me. The situation is I'm actually implementing my bootstrap tooltip fine and I have checked it on the JsFiddle, it is working fine there too, however, after a lot of efforts, it is not getting implemented on the web project, I don't know why.

我实际上处于一个非常奇怪的情况，不知何故无法弄清楚发生在我身上的无意义的事情。情况是我实际上正在很好地实施我的引导工具提示，并且我已经在上检查了它JsFiddle，它在那里也工作正常，但是，经过很多努力，它没有在网络项目中得到实施，我不知道为什么。

This is literally very weird. Here is my implementation which is working fine on 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>

And for the solutions I have done a lot of things but, unfortunately, all of them didn't work.

对于解决方案，我做了很多事情，但不幸的是，所有这些都没有奏效。

To take the class name into consideration

<script type="text/javascript">
  $(document).ready(function (){
   $(".btn-secondary").tooltip()
  })
</script>

To use the body element to target the data-toggle :

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

To use the container as body and focus on the section :

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

考虑类名

<script type="text/javascript">
  $(document).ready(function (){
   $(".btn-secondary").tooltip()
  })
</script>

要使用 body 元素来定位数据切换：

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

要将容器用作主体并关注部分：

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

This is what I'm getting on my web project:

这是我在我的网络项目中得到的：

Don't take me wrong, I'm really confused about why it ain't happening since everything is fine. Any ideas would be appreciated, I'm a noob and I know that you guys can help me on this.

不要误会我，我真的很困惑为什么它没有发生，因为一切都很好。任何想法将不胜感激，我是一个菜鸟，我知道你们可以帮助我。

EDITS

编辑

I have checked the console and got this error saying the .tooltip is not a function:

我检查了控制台并收到此错误消息，指出.tooltip 不是函数：

Answer 1

回答by Fabul

Try to call the Tooltip function in this way and pass the options as HTML attributes. You can check out some working examples here.

尝试以这种方式调用 Tooltip 函数，并将选项作为 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>

Answer 2

回答by SantoshK

You need to add few attributes inside tooltipfunction {container:'body', trigger: 'hover', placement:"bottom"}

您需要在tooltip函数内添加一些属性{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>

Answer 3

回答by Alok

Solution is this, there was an error in calling of some jQuery files which was not called properly and hence whole project was messing up. So if you are using the popups, tooltipsthen make sure you call the jquery in a correct format. Here is the answer and how I got it working, just look at the calling of jQuery files and the other files accordingly and then in body I have called the script for the tooltip :

解决方案是，调用某些未正确调用的 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>

Answer 4

回答by Christopher Reeve

use this

用这个

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

jQUERY

查询

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

get it from other thread https://stackoverflow.com/a/22569369/11934267

从其他线程获取它https://stackoverflow.com/a/22569369/11934267

Answer 5

回答by Mohsen Newtoa

you can use Popper.js

你可以使用Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

And call tooltip function:

并调用工具提示函数：

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});

javascript Bootstrap 工具提示不适用于我的 Web 项目

提问by Alok

回答by Fabul

回答by SantoshK

回答by Alok

回答by Christopher Reeve

回答by Mohsen Newtoa

相关推荐

最近更新

标签

javascript Bootstrap 工具提示不适用于我的 Web 项目

提问by Alok

回答by Fabul

回答by SantoshK

回答by Alok

回答by Christopher Reeve

回答by Mohsen Newtoa

相关推荐

javascript 反应JS。将元素附加到 DOM

javascript FireFox 无效的正则表达式组

Javascript：如何在 <p hidden> 中添加和删除隐藏

javascript 三.js - 如何设置相机位置？

相关推荐

最近更新

标签