文章/答案/技术大牛

发布

社区首页 >问答首页 >在Rails 6中不起作用的引导5工具提示、弹出和祝酒词

问在Rails 6中不起作用的引导5工具提示、弹出和祝酒词
EN

Stack Overflow用户

提问于 2020-11-10 22:54:44

回答 1查看 2.8K关注 0票数 4

我使用一个Rails字节脚本来安装引导程序5 alpha；https://railsbytes.com/public/templates/VB0s5v。

然而，我无法得到任何的工具提示和弹出的工作。不确定，即使我应该把脚本放在哪里，或者我是否需要添加任何东西来启用它们。能不能请你这么客气，并提供一些指导。非常感谢!

/雅各布

我怀疑我需要根据https://v5.getbootstrap.com添加一个js示例

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

javascript

ruby-on-rails

twitter-bootstrap

webpacker

回答 1

Stack Overflow用户

发布于 2021-01-15 18:29:19

我也和这件事做了斗争，但现在我已经让他们开始工作了。这是我让Bootstrap5使用Rails6的工作流程。

yarn add bootstrap@next
yarn add @popperjs/core
create文件app/javascript/stylesheets/application.scss，我将在其中添加自定义css
，将以下内容添加到新文件的顶部：

# app/javascript/stylesheets/application.scss

@import "bootstrap"

为了让应用程序从javascripts文件夹导入您的自定义css，将以下内容添加到应用程序布局文件add

中。pack_tag表示这将由webpacker处理。然后布局文件将如下所示：

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

最后，为了使一切正常工作，将以下内容添加到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)
  })
});

作为测试，我随后在主页(或任何要测试的页面)中添加了以下：

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

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64777987

复制

相似问题

问在Rails 6中不起作用的引导5工具提示、弹出和祝酒词
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Rails 6中不起作用的引导5工具提示、弹出和祝酒词EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Rails 6中不起作用的引导5工具提示、弹出和祝酒词
EN