Bootstrap JS无法在Rails 4中运行

时间:2015-10-06 01:43:26

标签: javascript jquery css ruby-on-rails twitter-bootstrap

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

what is showing up

的Gemfile

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>

1 个答案:

答案 0 :(得分:1)

你需要enable popovers通过JS:

模板(已添加 Composite topBar = new Composite(parent, SWT.None); topBar.setLayout(new GridLayout(3, false)); Label title = new Label(topBar, SWT.NONE); title.setLayoutData(new GridData(GridData.FILL, GridData.CENTER, true, false)); Label x = new Label(topBar, SWT.NONE); Label y = new Label(topBar, SWT.NONE); Composite graphArea = new Composite(parent, SWT.NONE); graphArea.setLayout(new GridLayout(2, false)); Canvas xAxis = new Canvas(graphArea, SWT.NONE); GridData gd = new GridData(GridData.CENTER, GridData.FILL, false, true); gd.widthHint = 10; xAxis.setLayoutData(gd); xAxis.addPaintListener(new PaintListener() { @Override public void paintControl(PaintEvent e) { drawXAxis(); } }); Canvas graph = new Canvas(graphArea, SWT.NONE); graph.addPaintListener(new PaintListener() { public void paintControl(PaintEvent e) { drawGraph(e); } }); Label emptySpace = new Label(graphArea, SWT.NONE); Canvas yAxis = new Canvas(graphArea, SWT.NONE); GridData gd = new GridData(GridData.FILL, GridData.CENTER, true, false); gd.heightHint = 10; xAxis.setLayoutData(gd); yAxis.addPaintListener(new PaintListener() { @Override public void paintControl(PaintEvent e) { drawYAxis(); } }); 但您可以使用class或其他):

id

JS代码:

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

如果您计划对所有弹出窗口使用相同的选项,则可以使用以下选择器:

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