Bootstrap 里的 popover 被擋住的解決方案

在Bootstarp 中我們可以使用 popover 插件做一些內容的展示，

代碼如下：

<a data-toggle="popover" data-placement="top" data-trigger="hover" data-content="詳情詳情詳情">
    <span>顯示詳情</span>
</a>

 

這樣子寫的話，如果父級有overflow:hidden屬性，你會發現超出容器的部分會顯示不出。

 

如何解決呢？

我們只要在上面代碼中添加一個屬性：data-container="body"  即可。效果如下圖：

 

官方API解釋：

 

解決方案來自：

https://stackoverflow.com/questions/16863015/bootstrap-tooltip-working-but-hidden-due-to-z-index