Twitter Bootstrap PopOver only works with the first trigger

Question

I use Twitter Bootstrap to create a basic layout for the site. I need to show a data table in which each item has a data attribute that I want to show as a popup

eg:

<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 seems that the pop file will only work with the very first item in the list. See This jsfiddle: http://jsfiddle.net/stycu/

Does anyone know if this is by design or if it is a mistake? I checked the problems on github, but can't see anything referring to it.

early

Answer 1

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

You referenced the #test identifier on your call, and the identifiers must be unique for each element, so only the first popover was displayed.

Instead, use the attribute selector to target the rel popover attribute or class.

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

Demo

Answer 2

It can only work with gem "twitter-bootstrap-rails"

In application.js

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

In sight

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

Checked that it works by putting this code at http://jsfiddle.net/stycu/