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=".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();

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();

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Most likely (but not confirmed) because you should only have one id on the page, but you have the same id for all of your images. Does your $facility have some form of unique id that can be added to id? eg <img id="images-{{$facility->id}}" ...` – fdomn-m Commented Dec 13, 2015 at 21:34
• $('#images') will only give you the first element with matching id. Change to use the class. – fdomn-m Commented Dec 13, 2015 at 21:36

3 Answers 3

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

Because you have the same id for all images. Change the images id to a class.

what about using "class" instead of "id"? I had a problem similar and solved by using a class as selector.