javascript - 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 是唯一的。

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