Bootstrap 3 popover表空間在錶行中

Question

我想在光標位於小圖像上方時彈出大圖。不知何故，當它彈出時，它會在當前表格單元格之後創建空白區域。我該如何解決這個問題？ HTML代碼片段：

<tr> 
    <td data-toggle="popover" data-placement="auto left" data-trigger="click" data-html="true"> 
    <img class="img" style="height:36px" src="{if $product->small_image}files/products/{$product->small_image}{else}files/products/noimage.png{/if}" alt="{$product->model|escape}"> 
    <div class="popover-content1 hide"> 
     <img style="max-width:250px;max-height:250px" src="files/products/{$product->large_image}"> 
    </div> 
    </td> 
    <td> 
    ...poduct-name... 
    </td> 
    <td> 
    ...price... 
    </td> 
</tr> 

JS初始化：

$('[data-toggle="popover"]').popover({ 
    content: function() { 
     return $(this).find('.popover-content1').html(); 
     } 
}); 

截圖： normal view， popover effect

Answer 1

通過添加DIV到當前表格單元格並移動這個代碼

正好解決了我的問題

data-toggle="popover" data-placement="auto left" data-trigger="click" data-html="true" 

創建div。還修改了JS 從

return $(this).find('.popover-content1').html(); 

到

return $(this).next('.popover-content1').html(); 

好像數據切換用`噸表格單元正常工作。