Question

在app/assets/javascripts中，我保存了bootstrap.js（来自twitter github）。我有关于popover和tooltip加载的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个文件将这些作为最后3行：

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

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

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

Answer 1

我认为您拥有项目中包含的所有内容，但我看到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>

通过这两项更改，您应该启动并使用包含文本“Popover Content”的按钮悬停时显示的弹出窗口。

Twitter Bootstrap Popover无效

1 个答案: