Bootstrap 5 工具提示、弹出窗口和 toasts 在 Rails 6 上的 Ruby 中不起作用

Question

I'm using a Railsbytes script to install bootstrap 5 alpha;我正在使用 Railsbytes 脚本来安装 bootstrap 5 alpha； https://railsbytes.com/public/templates/VB0s5v . https://railsbytes.com/public/templates/VB0s5v 。

However, I can't get any of the tooltips and popovers to work.但是，我无法使用任何工具提示和弹出窗口。 Not sure even where I should put the scripts or if I have to add anything to it in order to enable them.甚至不确定我应该把脚本放在哪里，或者我是否必须向其中添加任何东西才能启用它们。 Would anyone please be so kind and provide some guidance.任何人都请如此友善并提供一些指导。 Thanks a lot!非常感谢！

/ Jacob / 雅各布

Example of js I suspect I need to add somewhere according to https://v5.getbootstrap.com :我怀疑我需要根据https://v5.getbootstrap.com添加某处的 js 示例：

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})

Answer 1

I struggled with this too but have got them working now.我也为此苦苦挣扎，但现在已经让他们工作了。 This is my workflow for getting Bootstrap5 working with Rails6.这是我让 Bootstrap5 与 Rails6 一起工作的工作流程。

yarn add bootstrap@next
yarn add @popperjs/core
create file app/javascript/stylesheets/application.scss which is where I will add custom css创建文件app/javascript/stylesheets/application.scss这是我将添加自定义 css 的地方
add the following to the top of the new file:将以下内容添加到新文件的顶部：

# app/javascript/stylesheets/application.scss

@import "bootstrap"

In order for the application to import your custom css from the javascripts folder, add the following to your application layout file add <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> .为了让应用程序从 javascripts 文件夹导入您的自定义 css，请将以下内容添加到您的应用程序布局文件 add <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> . The pack_tag indicates that this will be handled by webpacker. pack_tag 表示这将由 webpacker 处理。 The layout file will then look like:布局文件将如下所示：

# app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

finally to get everything working add the following to the bottom of app/javascript/packs/application.js最后为了让一切正常，将以下内容添加到 app/javascript/packs/application.js 的底部

# app/javascript/packs/application.js

import * as bootstrap from 'bootstrap'
import "../stylesheets/application"

document.addEventListener("DOMContentLoaded", function(event) {
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })

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

Just as a test I then added the following Bootsrap components to my home page (or any page to test):作为测试，我将以下 Bootsrap 组件添加到我的主页（或任何要测试的页面）：

# index.html.erb

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

Answer 2

Since version 5, Bootstrap bundle files already contain Popper , so there's NO need to add this package to your package.json从版本 5 开始，Bootstrap 捆绑文件已经包含Popper ，因此无需将此 package 添加到您的package.json

You should also be able to import only what you need, for example:您还应该能够只导入您需要的内容，例如：

import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle";

// Rest of your imports and/or other JS code...
document.addEventListener("DOMContentLoaded", () => { // or "turbolinks:load"
  const tooltipTriggerList = document.querySelectorAll(
    '[data-bs-toggle="tooltip"]'
  );

  [...tooltipTriggerList].map((el) => new Tooltip(el));
});

Bootstrap 5 工具提示、弹出窗口和 toasts 在 Rails 6 上的 Ruby 中不起作用

问题描述

2 个解决方案

解决方案1
4 2021-01-15 18:29:19

解决方案2
0 2022-12-29 09:17:04

Bootstrap 5 工具提示、弹出窗口和 toasts 在 Rails 6 上的 Ruby 中不起作用

问题描述

2 个解决方案

解决方案1 4 2021-01-15 18:29:19

解决方案2 0 2022-12-29 09:17:04

解决方案1
4 2021-01-15 18:29:19

解决方案2
0 2022-12-29 09:17:04