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

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 имеет их как последние 3 строки:

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

Похоже, что они просто комментарии, но я искал синтаксис, и это кажется правильным.

То, что я пробовал: 1.) Загрузил все CSS (а не только те, которые относятся к popover). 2.) Все другие соответствующие сообщения stackoverflow

Answer 1

Я думаю, что у вас есть все, что вам нужно включить в ваш проект, но я вижу пару вещей, отсутствующих в HTML/Javascript для вашей кнопки.

Во-первых, для popover требуется контент, который будет отображаться при наведении курсора на кнопку. Это делается путем указания информации в атрибуте «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> 

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