仅在第一张图片上提示引导工具提示

如何显示引导工具提示给每张图片？为什么显示仅在前图像是这样的：仅在第一张图片上提示引导工具提示

这是我的代码：

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

来源

2015-12-13 feknaz

最有可能（但没有确认），因为你应该只在页面上有一个'id'，但是你的所有图像都有相同的'id'。你的'$ facility'是否有某种形式的可以添加到'id'的唯一ID？例如'

'$（'＃images'）'只会给你第一个与'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”)

来源

2015-12-13 21:34:45 rahul

我会接受你的答案10分钟 – feknaz

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

来源

2015-12-13 21:35:42 Ajdin

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

来源

2015-12-13 21:42:19 MinaS

仅在第一张图片上提示引导工具提示

回答

相关问题