Bootstrap tooltip for first image only

Question

How can I create a tooltip for each image? Why does he appear only in the first image:

This is my code:

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

When I hover over other images, a tooltip does not appear.

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

Answer 1

Verify that item identifiers are unique.

<img id="images" />

will generate several elements with the same identifier in the loop, which is invalid. Try adding a loop index to the id and create unique identifiers for your elements. So the resulting HTML will be something like

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

Edit

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

to

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

.

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

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

ID ( "#id" )

( ".class" )

Answer 2

. .

Answer 3

how about using a "class" instead of an "id"? I had a problem with a similar one and was solved using the class as a selector.