Twitter Bootstrap Popover не работает - PullRequest
Новая
       25

Twitter Bootstrap Popover не работает

2 голосов
/ 26 февраля 2012

В app/assets/javascripts я сохранил bootstrap.js (из твиттера github). У меня есть BootStrap CSS, который относится к popover и всплывающей подсказке - в 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). 2.) Все другие соответствующие сообщения stackoverflow

1 Ответ

4 голосов
/ 29 февраля 2012

Я думаю, что в вашем проекте есть все, что вам нужно, но я вижу несколько вещей, отсутствующих в 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>

С этими двумя изменениями вы должны начать работу с всплывающим окном, которое появляется при наведении курсора на кнопку, содержащую текст «Popover Content».

...