如何使用 popper.js 和 bootstrap 初始化工具提示

Question

I am using bootstrap tooltip as explained @ https://getbootstrap.com/docs/4.3/components/tooltips/我正在使用引导工具提示，如@ https://getbootstrap.com/docs/4.3/components/tooltips/

I have successfully created tooltip but tooltip is appearing un-formatted.我已成功创建工具提示，但工具提示显示为未格式化。 I believe this is because the tooltip is not getting initialized.我相信这是因为工具提示没有被初始化。 I have the code added as shown on the page below.Tried initialization code at different places on page as well.我添加了如下页面所示的代码。在页面的不同位置也尝试了初始化代码。


<!-- # TBD - Make this page look like https://getbootstrap.com/docs/4.0/examples/sign-in/ -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Martious">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <title>Start Your Data Science Journey Here...</title>
    <!-- Bootstrap Core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Additional Custom Style CSS -->
    <link href="/static/css/starter-template.css" rel="stylesheet">
    <link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
</head>

<body>

<!--

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #00aeef;">
  <a class="navbar-brand" href="/"> Martious Data Science Hub </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-link inactive">
        &nbsp
      </li>
      <!--
      <li class="nav-link inactive">
        |
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#"><i class="fa fa-minus-circle"></i> Score Card</a>
      </li>
      -->

    </ul>
    <ul class="navbar-nav navbar-right">

      <li class="nav-item active">
        <a class="nav-link" href="#">Welcome, "Test User!"<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-link inactive">
        |
      </li>
<!--
      <li class="nav-item active">
        <a class="nav-link" href="#"> <i class="fa fa-user"></i> My Profile <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#"> <i class="fa fa-user"></i> My Team <span class="sr-only">(current)</span></a>
      </li>
-->
      <li class="nav-item active">
        <a class="nav-link" href="/authorization/logout/"> <i class="fa fa-sign-out"></i> Logout <span class="sr-only">(current)</span></a>
      </li>

    </ul>

  </div>
</nav>



<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});
</script>

<div class="mx-auto" style="max-width: 70%">

    <div class="container text-center text-muted">
        <div class="container align-middle">
            <BR><BR><BR>
            <div class="display-4">Sentiment Analysis
            <!--&nbsp; <span class="text-warning"><small>&#9432;</small></span>-->
                <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" data-placement="right" title="<b>Upload a text (*.txt) file to analyze sentiment using Vader algorithm</b>">
                    <span class="oi oi-info" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>

</div>

<!-- https://www.npmjs.com/package/bs-custom-file-input -->
<script src="/static/js/bs-custom-file-input.min.js"></script>
<script>
  bsCustomFileInput.init();
</script>


<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.bundle.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

</body>
</html>

Tooltip style is not picked up as shown on bootstrap page.如引导页面所示，未选择工具提示样式。

Tooltip Rendered渲染的工具提示

Expected Tooltip预期的工具提示

I cannot find what is wrong with code.我找不到代码有什么问题。 Looking for help...寻求帮助...

Answer 1

I was able to fix this issue by adding bootstrap import in head 我可以通过在头部添加引导导入来解决此问题

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Martious">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <title>Start Your Data Science Journey Here...</title>
    <!-- Bootstrap Core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Additional Custom Style CSS -->
    <link href="/static/css/starter-template.css" rel="stylesheet">
    <link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

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

</head>

This is NOT as per bootstrap recommendation ( https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template ), but it works. 这不是按照引导建议（ https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template ）进行的，但是可以使用。

The fix came from code described @ https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp 该修复程序来自@ https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp中描述的代码

Answer 2

I suggest you to just use the bundle Popper + Bootstrap: bootstrap.bundle.min.js or bootstrap.bundle.js .我建议您只使用捆绑 Popper + Bootstrap： bootstrap.bundle.min.js或bootstrap.bundle.js 。 That should bypass any problem you may have with correct file order initialization.这应该绕过正确的文件顺序初始化可能遇到的任何问题。 I mean, whether you place your files in header and/or body (in my case, it worked after placing the bundle at the bottom of the body, before closing the body tag).我的意思是，无论您将文件放在 header 和/或正文中（在我的情况下，它在将捆绑包放在正文底部之后，在关闭正文标签之前工作）。

https://getbootstrap.com/docs/5.1/components/tooltips/#overview https://getbootstrap.com/docs/5.1/components/tooltips/#overview

And remember to initialize the tooltips correctly from your local scripts:并记住从本地脚本正确初始化工具提示：

https://getbootstrap.com/docs/5.1/components/tooltips/#example-enable-tooltips-everywhere https://getbootstrap.com/docs/5.1/components/tooltips/#example-enable-tooltips-everywhere

This Vanila JS code should be enough for that:这个 Vanila JS 代码应该足够了：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

By the way, I placed this code after the aforementioned bundle.顺便说一句，我把这段代码放在了前面提到的包之后。

如何使用 popper.js 和 bootstrap 初始化工具提示

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-08-03 03:52:41

解决方案2
0 2022-08-10 18:02:22

如何使用 popper.js 和 bootstrap 初始化工具提示

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-08-03 03:52:41

解决方案2 0 2022-08-10 18:02:22

解决方案1
0 已采纳 2019-08-03 03:52:41

解决方案2
0 2022-08-10 18:02:22