Bootstrap всплывающая подсказка только при первом изображении

Question

Как я могу показать всплывающую подсказку для каждого изображения? Почему он появляется только на первом изображении, как это:

Это мой код:

 <ul class="row list-unstyled"> 
    @foreach($facilities as $facility) 

       <div class='col-md-3 text-center'> 
       <a data-toggle="lightbox" href="/{{$facility->image}}"> 

       <img class="thumbGlassFac" src="http://m-w.lt/prekes/white-magnifying-glass-hi.png"> 

        <img id="images" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" 
        class="thumbBorderFac" style="height: 180px; width: 180px; line-height: 80px" src="/{{$facility->image}}"/></a> 
        <hr> 
      </div> <!-- col-6/end --> 

    @endforeach 
    </ul> 

Когда я парить мышь к другим изображениям в подсказке не появляется.

$('#images').tooltip(); 

Answer 1

Убедитесь, что идентификаторы элементов уникальны.

<img id="images" /> 

будет генерировать несколько элементов с одинаковым идентификатором в цикле, что является недопустимым. Попробуйте добавить индекс цикла к идентификатору и создать уникальные идентификаторы для ваших элементов. Таким образом, в результате HTML будет что-то вроде

<img id="images1" /> 
<img id="images2" /> 
<img id="images3" /> 

Изменения

$('#images').tooltip(); // id selector will return only 1 DOM element 

в

$(".thumbBorderFac").tooltip(); // class selector returns multiple elements with the same class name 

Добавить идентификатор к родительскому элементу изображений и ограничить селектор для запуска под этим элементом только.

<ul class="row list-unstyled" id="imageContainer"> 

и изменить свой код

$("#imageContainer").find(".thumbBorderFac").tooltip(); 

ID Selector (“#id”)

Class Selector (“.class”)

Answer 2

Потому что у вас есть один и тот же идентификатор для всех изображений. Измените идентификатор изображений на класс.

Answer 3

как использовать «класс» вместо «id»? У меня была проблема с подобным и решалась с помощью класса в качестве селектора.