Question

I have been using the Twitter Bootstrap to build the base layout for a site. I have a need to show a table of data where each line item has a data attribute that I want to show as a pop over

such as:

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

it appears though that the pop over will only work with the very first element on the list. See this jsfiddle: http://jsfiddle.net/stycu/

Does anyone know if this is by design or if this is a bug? I have checked the issues on github but can’t see anything referring to it.

thanks in advance

Answer 1

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

You were referencing an id of #test on your call and ids have to be unique per element, so only the first popover was being displayed.

Use an attribute selector instead to target your rel popover attribute, or a class.

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

Demo