2015-12-13 92 views
4

如何顯示引導工具提示給每張圖片?爲什麼顯示僅在前圖像是這樣的:僅在第一張圖片上提示引導工具提示

enter image description here

這是我的代碼:

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

最有可能(但沒有確認),因爲你應該只在頁面上有一個'id',但是你的所有圖像都有相同的'id'。你的'$ facility'是否有某種形式的可以添加到'id'的唯一ID?例如'

+0

'$('#images')'只會給你第一個與'id'匹配的元素,改爲使用類 –

回答

2

確保您的元素標識符是唯一的。

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

+0

我會接受你的答案10分鐘 – feknaz

3

因爲你的所有圖像相同的ID。將圖像ID更改爲類。

3

如何使用「class」而不是「id」? 我有類似的問題,並通過使用類作爲選擇器解決。