如何在Rails中使用Twitter-Bootstrap hover popover

Question

我是rails的新手,我想在我的rails应用程序中使用Twitter-Bootstrap悬停popover.我有以下部分:

<div class="field">
    <%= f.label :first_name, {:class => 'label'}%>&nbsp;
    <%= f.text_field :first_name ,{:class => 'span3',}%>
</div>

如果用户将鼠标悬停在:first_name标签上,则会显示一条消息,告诉他某事.但我不知道在我的应用程序中放置内容,如js文件引用或函数.

我尝试了这个例子并将其放在javascript_include_taglayout/application.html.erb中

但似乎我不知道如何让它起作用.所以我需要有关如何使用它的详细说明.

Answer 1

有几个*Rails*Bootstrap*项目可用于集成Bootstrap.

如果您希望手动执行此操作,一个选项是将文件(包括您要使用的任何插件,在您的情况下将是bootstrap-tooltip.js和bootstrap-popover.js)放入/vendor/assets/javascripts并包含在您的application.js喜欢中:

//= require bootstrap-min.js
//= require bootstrap-tooltip.js
//= require bootstrap-popover.js

bootstrap.css通过/vendor/assets/stylesheets在/app/assets/stylesheets/application.css下面添加以下行将其放入并包含在CSS文件中,执行相同的操作*= require_self:

*= require bootstrap

我个人更喜欢使用完整bootstrap.css文件而不是缩小文件,bootstrap-min因为我偶尔想浏览源代码.无论哪种方式,当您部署到生产环境时,Rails会通过资产管道自动缩小CSS.

一旦加载了Bootstrap,就可以使用以下代码片段来初始化您选择的元素上的popover插件:

$('.label-with-popover').popover(placement: 'right') # Note: 'right' is default

您可以将上面的代码段放在您的底部,application.js但推荐的方法是将其放在与您正在使用的脚手架相对应的.coffee文件中,例如users.js.coffee

最后......

  <label class="label-with-popover"
         data-content="popover content"
         data-title="popover title">

  ...