我正在使用 bootstrap，除工具提示外一切正常

Question

好吧，我的 javascript 绝对不是重点，我真的坚持将工具提示集成到我的 rails 应用程序中。我已经以任何可能的方式完成了 bootstrap 告诉我要做的所有事情，但它仍然不起作用...

我取得的唯一进步是，现在当我将鼠标悬停在某处时，我会看到应该是工具提示的文本，格式如下（您看不到鼠标）：

除此之外，当我将 bootstrap 所说的代码插入到我的布局脚本 application.html.erb 中时，到处都会激活工具提示

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Joind</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
    <%= favicon_link_tag asset_path('favicon-nobg.png'), style:"border-radius: 50px" %>
  </head>

  <body style="padding: 80px 0 200px 0">
    <% if notice %>
     <p class="alert alert-success"><%= notice %></p>
    <% end %>
    <% if alert %>
     <p class="alert alert-danger"><%= alert %></p>
    <% end %>
    <%= render 'shared/navbar' %>
    <%= yield %>
    <%= render 'shared/footer' %>
  </body>
      <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      })
    </script>
</html>

我仍然在 chrome 中收到错误，说“new:206 Uncaught ReferenceError: bootstrap is not defined 在 new:206 在 Array.map () 在 new:205"

我也试过在他们提供的教程中使用 popper，但老实说我完全被卡住了...

如果您能在这里以任何方式帮助我，我将不胜感激！太感谢了！文森特

编辑：

我学习 rails 的课程总是告诉我在一个名为 app/javascript/packs/application.js 的单独文件中导入 bootstrap。出于某种原因，导入 bootstrap 仅在我将其包含为 'bootstrap'、'bootstrap.bundle.js' 或类似内容时才适用于网站。我转而将 bootstrap 作为脚本包含在布局中，就像 bootstrap 文档中所说的那样。现在工具提示以某种方式工作^^。

Answer 1

显然你说 popper.js 是导入的（由你的工作下拉列表证明）。

但是我没看到你在哪里导入bootstrap，我建议你导入bootstrap-bundle.js (而不是 bootstrap.js)，因为它将 popper 与 bootstrap 捆绑在一起，那么您就不必自己导入它，并且它附带 bootstrap。 https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.jsas referred here

如果是您自己的 JS 中的代码问题，请尝试使用此代码段来全局激活工具提示：

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

当然，对于此代码段，您必须具有属性 data-toggle='tooltip' 和 title="The text I want to display within tooltip"

不要忘记提供您正在使用的 bootstrap 的版本，popper 也一样。因为我认为您没有使用正确版本的 popper。

尝试 npm install popper.js（v1.14 附近）
而不是npm install @popperjs/core

我正在使用 bootstrap，除工具提示外一切正常

I am using bootstrap and everything is working except for tooltips

javascript

ruby-on-rails

twitter-bootstrap

popper.js