Twitter Bootstrap 弹出框不工作

Question

在 app/assets/javascripts,我已经保存了 bootstrap.js （来自 twitter github）。我加载了与弹出窗口和工具提示相关的 BootStrap CSS - 在 app/assets/stylesheets

从我的 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 最后三行是：

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

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

我尝试过的事情：1.) 加载所有 CSS（不仅仅是那些与 popover 相关的 CSS）。2.) 所有其他相关的 stackoverflow 帖子

Answer 1

我认为您的项目中包含了所需的所有内容，但我发现按钮的 HTML/Javascript 中缺少一些内容。

首先，弹出窗口需要将鼠标悬停在按钮上时显示的内容。这是通过在元素的“data-content”属性中指定信息来完成的。所以你的按钮将如下所示：

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

完成这两项更改后，您应该可以启动并运行一个弹出窗口，该弹出窗口出现在按钮悬停时，其中包含文本“弹出窗口内容”。