Search code examples
javascriptpopover

Javascript popover loop not displaying

I'm trying to make a loop, to display some link with popover javascript. This is what i have

accueil_hover.js

$(document).ready(function(){
$('#popoverOption').popover({ trigger: "hover" });
});

accueil_blade.php (assuming the data passed as argument are OK)

 <div class="container">
      @for ($i = 0 ; $i < count($etablissements); $i ++)
            <a id="popoverOption" class="btn" data-content="here is some data" rel="popover" data-original-title="{{$etablissements[$i]->code_etablissement}}" data-placement="bottom" href="{{ URL::to('dashboard_etablissement/' . $etablissements[$i]->code_etablissement)}}">{{$etablissements[$i]->nom}}</a><br>
      @endfor

 </div>

But the popover won't show. I guess this is because all my links are having the same ID But how can i make it different for javascript to understand ? something like : popoverOption.$i ?

Solution

  • Id should be unique. You can use Class instead of ID

    $('.popoverOption').popover({ trigger: "hover" });

    Markup:

    <a class="btn popoverOption" data-content="here is some data" rel="popover" data-original-title="{{$etablissements[$i]->code_etablissement}}" data-placement="bottom" href="{{ URL::to('dashboard_etablissement/' . $etablissements[$i]->code_etablissement)}}">{{$etablissements[$i]->nom}}</a><br>