我正在使用引导程序，除工具提示外一切正常
Posted
技术标签:
【中文标题】我正在使用引导程序，除工具提示外一切正常【英文标题】：I am using bootstrap and everything is working except for tooltips 【发布时间】：2021-03-28 17:21:20 【问题描述】：好的，所以我的 javascript 绝对不是重点，而且我真的坚持将工具提示集成到我的 rails 应用程序中。我已经完成了引导程序告诉我以任何可能的方式做的所有事情，但它仍然不起作用......
我取得的唯一进展是，现在当我将鼠标悬停在某物上时，我看到了应该是这样形式的工具提示的文本（你看不到鼠标）：
除此之外，当我将引导程序所说的代码插入到我的布局 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 在新：206 在 Array.map () 在新：205"
我也尝试过在他们提供的教程中使用 popper，但老实说我完全卡住了......
如果您能在这里以任何方式帮助我，我将非常感激！ 太感谢了！ 文森特
编辑：
我学习 Rails 的课程总是告诉我在名为 app/javascript/packs/application.js 的单独文件中导入引导程序。出于某种原因，导入引导程序仅适用于网站，当我将其包含为“bootstrap”、“bootstrap.bundle.js”或类似的东西不起作用时。我切换到在布局中包含引导程序作为脚本，就像引导程序文档中所说的那样。现在工具提示以某种方式工作^^。
【问题讨论】：
你可以试试这个tooltipTriggerEl.tooltip(title: 'tooltip title')
你能发布你的布局文件代码吗？ Bootstrap 是否加载在顶部？
@Rickwell Rice我添加了它，我正在我的应用程序js中导入引导程序。我也在导入 popper.js，大多数其他引导程序（如下拉菜单等）都可以正常工作
@sital haque 我应该在哪里插入那行？
【参考方案1】：
显然您说 popper.js 已导入（由您的工作下拉列表证明）。
但是我看不到您在哪里导入 bootstrap，我建议您导入 bootstrap-bundle.js（而不是 bootstrap.js），因为它会将 popper 与 bootstrap 捆绑在一起，那么您不必自己导入它，它带有引导程序使用的正确版本。
https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.jsas referred here
如果是你自己的 JS 中的代码问题，试试这个 sn-p 来全局激活工具提示：
$(document.body).tooltip(
selector: "[data-toggle='tooltip']",
trigger: "hover"
);
当然，有了这个sn-p，你必须拥有data-toggle='tooltip'属性和title="The text I want to display within tooltip"
不要忘记提供您正在使用的引导程序的版本，popper 也是如此。因为我认为你没有使用正确版本的 popper。
尝试npm install popper.js（接近 v1.14）
而不是npm install @popperjs/core
【讨论】：
不错！这不是直接的问题，而是帮助我以某种方式解决了所有问题，我将我所做的步骤放在了上面原始问题的编辑中。你能告诉我为什么我这样做是个问题吗？ 阅读您的编辑，我真的不知道为什么，因为我总是在布局中添加我的脚本，除了我使用钩子的 Wordpress。但可能是您的导入顺序导致了这个问题。以上是关于我正在使用引导程序，除工具提示外一切正常的主要内容，如果未能解决你的问题，请参考以下文章