CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
frenchbaguette
frenchbaguette

Reputation: 1339

Bootstrap tooltip only on first image

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

enter image description here

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

Upvotes: 4

Views: 1208

Answers (3)

MinaS
MinaS

Reputation: 69

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

Upvotes: 3

rahul
rahul

Reputation: 187100

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

Upvotes: 3

Ajdin
Ajdin

Reputation: 94

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

Upvotes: 3

Related Questions