Bootstrap工具提示仅适用于第一张图像

Question

如何向每张图片显示bootstrap工具提示？为什么它只出现在第一张图像上：

这是我的代码：

       <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

因为所有图片的ID都相同。将图像ID更改为类。

Answer 2

使用“class”而不是“id”怎么样？ 我有类似的问题，并通过使用类作为选择器来解决。

Answer 3

确保您的元素ID是唯一的。

<img id="images" />

将在循环中生成具有相同id的多个元素，这是无效的。尝试将循环索引附加到id并为元素生成唯一ID。因此，生成的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

将id添加到图像的父元素，并限制您的选择器仅在该元素下运行。

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

并将您的代码更改为

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

ID Selector (“#id”)

Class Selector (“.class”)