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

好像数据切换用`吨表格单元正常工作。