Bootstrap tooltip only on first image

Question

How can I make to show up bootstrap tooltip to every image ? Why is it showing up only on first image like this:

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 my mouse to other images the tooltip doesn't showing up.

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

Answer 1

Make sure that your element ids are unique.

<img id="images" />

will generate multiple elements with the same id in the loop, which is invalid. Try to append the loop index to the id and generate unique ids for your elements. So the resulting HTML will be something like

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

Change

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

to

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

Add an id to the parent element of the images and restrict your selector to run under that element only.

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

and change your code to

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

ID Selector (“#id”)

Class Selector (“.class”)