堆棧內存溢出
  簡體   English   中英

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

[英]How to initialize tooltip with popper.js and bootstrap

 原文  2019-08-03 00:55:16  8   2    javascript/ tooltip/ popper.js

問題描述

我正在使用引導工具提示，如@ https://getbootstrap.com/docs/4.3/components/tooltips/

我已成功創建工具提示，但工具提示顯示為未格式化。 我相信這是因為工具提示沒有被初始化。 我添加了如下頁面所示的代碼。在頁面的不同位置也嘗試了初始化代碼。


<!-- # 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>

如引導頁面所示，未選擇工具提示樣式。

渲染的工具提示

預期的工具提示

我找不到代碼有什么問題。 尋求幫助...

2 個解決方案

解決方案1
 0 已采納  2019-08-03 03:52:41

我可以通過在頭部添加引導導入來解決此問題 

<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>

這不是按照引導建議（ https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template ）進行的，但是可以使用。

該修復程序來自@ https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp中描述的代碼

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

我建議您只使用捆綁 Popper + Bootstrap： bootstrap.bundle.min.js或bootstrap.bundle.js 。 這應該繞過正確的文件順序初始化可能遇到的任何問題。 我的意思是，無論您將文件放在 header 和/或正文中（在我的情況下，它在將捆綁包放在正文底部之后，在關閉正文標簽之前工作）。

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

並記住從本地腳本正確初始化工具提示：

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

這個 Vanila JS 代碼應該足夠了：

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

順便說一句，我把這段代碼放在了前面提到的包之后。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何從Bootstrap 4配置Popper.JS 關閉手動觸發的 Bootstrap 4 Popper.js 工具提示 如何使用 popper.js 實現多個工具提示顯示事件 如何在 angular 項目中包含 popper.js 和 bootstrap.js 如何使用popper.js 如何為Bootstrap4彈出窗口和工具提示（Popper.js）配置Webpack Bootstrap 4 Popper.js：如何動態更新彈出窗口的內容？ 如何將 popper.js 添加到 Laravel 8 with Bootstrap 5 項目？ 如何導入 popper.js？ Bootstrap，popper.js和vue.js
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM