javascript - Bootstrap JS 在 Rails 4 中不起作用

Question

我遇到了一个问题，即 Bootstrap 的 Javascript 部分无法与我的 Rails 应用程序一起使用。例如，下面的代码应该使用 Bootstrap version of the popover ，但是，当我将鼠标悬停在我的链接上时，我只是得到一个基本的工具提示。我错过了什么？

gem 文件

gem "bootstrap-sass"

application.js

//= require modernizr
//= require jquery
//= require jquery_ujs
//= require jquery.cookie
//= require jquery.piechart
//= require jquery.dlmenu
//= require jquery.tooltipster
//= require bootstrap-sprockets
//= require mithril
//= require_tree .

application.css.scss

/*
*= require bootstrap
*= require font-awesome.min
*= require tooltipster
*= require_self
*/

@import "normalize";
@import "util";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "fonts";
@import "app";
@import "media-queries";
@import "login";
@import "header";
@import "alerts";
@import "hero";
@import "feedback";
@import "reports";
@import "main-content";
@import "popovers";
@import "push-menus";
@import "footer";

index.html.erb

<a tabindex="0" role="button" 
  data-toggle="popover" data-trigger="focus" 
  title="Severity Score" data-content="Severity score is...">
  <%= image_tag("tooltips/tooltip-question.png") %>
</a>

Answer 1

您需要enable popovers通过 JS:

模板(添加了 class 但您可以使用 id 或其他):

<a class="popover" tabindex="0" role="button" 
  data-toggle="popover" data-trigger="focus" 
  title="Severity Score" data-content="Severity score is...">
  <%= image_tag("tooltips/tooltip-question.png") %>
</a>

JS代码:

$(function() {
    $('.popover').popover();
});

如果您计划对所有弹出框使用相同的选项，您可以使用以下选择器:

$("[data-toggle=popover]").popover({placement: 'right'});