Twitter Bootstrap Popover不工作

问题描述：

在app/assets/javascripts中，我保存了bootstrap.js（来自twitter github）。我有一个属于酥料饼和工具提示加载引导CSS - 在app/assets/stylesheetsTwitter Bootstrap Popover不工作

从我show.html.erb在app/views/questions：

<button class="btn" id="button1"><%= @question.option_1 %></button> 
    <script type="text/javascript"> 
    $(function() { 
     $(".btn").click(function() { 
     var idname = this.id; 
     $("#"+idname).addClass("clicked"); 
     $("#"+idname).siblings().removeClass("clicked"); 
    }); 

    }); 

    $(function() { 
     $(".btn").popover(offset: 5, 
         placement: 'left'); 
    }); 
    </script>

我application.js文件中app/assets/javascripts有这些最后3行：

//= require jquery 
    //= require jquery_ujs 
    //= require_tree .

看起来他们只是评论，但我查了一下语法，它似乎是正确的。

事情我已经尝试： 1）加载所有的CSS（不只是那些属于酥料饼）。 2.）所有其他相关的stackoverflow帖子

你有没有加载所需要的工作酥料饼脚本的休息吗？像工具提示和转换脚本一样？ – 2012-02-26 12:38:01

是啊，我已经加载的所有 – 2012-02-26 12:43:30

的酥料饼的脚本不与引导捆绑引导脚本。你必须下载并包括他们具体... – three 2012-02-26 12:48:48

答

我认为你有你需要包括在你的项目中的一切，但我看到了一些缺少HTML/JavaScript为你的按钮的东西。

首先，弹出窗口需要当您将鼠标悬停在按钮上时显示的内容。这是通过在元素的“数据内容”属性中指定信息来完成的。所以，你的按钮看起来就像这样：

<button class="btn" id="button1" data-content="Popover Content"> 
    <%= @question.option_1 %> 
</button>

然后，在JavaScript加载上侧翻酥料饼，你指定几个选项。这些需要被包裹在大括号：

<script type="text/javascript"> 
    $(function() { 
     $(".btn").popover(
      { 
       offset: 5, 
       placement: 'left' 
      } 
     ); 
    }); 
</script>

有了这两个变化，你应该启动并运行与您的按钮包含文本“酥料饼的内容”的悬停出现酥料饼。

Twitter Bootstrap Popover不工作

相关推荐