Twitter Bootstrap PopOver работает только при первом запуске

Question

Я использовал Twitter Bootstrap для создания базового макета для сайта. Мне нужно показать таблицу данных, где у каждой позиции есть атрибут данных, который я хочу показать в виде всплывающего окна

, таких как:

<tr>
  <td><a href="#" class="popover-test" id ="test" rel="popover" 
            data-content="Content 1: this shows fine!" data-original-title="Title 1">Hover for popover</a>
  </td>
  <td>two</td>
  <td>three</td>
</tr>
<tr>
  <td><a href="#" class="popover-test" id ="test" rel="popover" 
            data-content="Doesn't show :(" data-original-title="Title 2">Hover for popover</a>
  </td>
  <td>two</td>
  <td>three</td>
</tr>

похоже, что всплывающее окно будет работать только с самым первым элементом в списке. Смотрите это jsfiddle: http://jsfiddle.net/stycu/

Кто-нибудь знает, если это по замыслу или это ошибка? Я проверил проблемы на github, но ничего не вижу по этому поводу.

заранее спасибо

Answer 1

$(function() {
    $("#test").popover();
});

Вы указывали идентификатор #test в своем вызове, и идентификаторы должны быть уникальными для каждого элемента, поэтому отображался только первый всплывающий экран.

Вместо этого используйте селектор атрибута, чтобы указать целевой атрибут rel popover или класс.

$(function() {
    $('[rel="popover"]').popover();
});

Демо

Answer 2

Может работать только с гемом "twitter-bootstrap-rails"

В application.js

$(document).ready(function() {
  options = {
    trigger : 'hover'
  }
  $('[rel="popover"]').popover(options);
});

В поле зрения

<tr>
<td><a href ="#" rel="popover" data-content="Content 1: this shows fine!" data-original-title="Title 1" >Hover for popover</a>
</td>
</tr>

<tr>
<td><a href ="#" rel="popover" data-content="Doesn't show :(" data-original-title="Title 2">Hover for popover</a>
</td>
</tr>

Проверено, работаетпоставив этот код на http://jsfiddle.net/stycu/