Click for code sample

Problem:

I have a Bootstrap panel that contains a list group. The panel's bottom border is disappearing if I add a tooltip to the last list group item.

Solution attempts:

I suspect one of two issues may be causing this:

  1. The panel's height is decreasing when the tooltip appears.
  2. The list group item's bottom border is covering up the panel's bottom border.

I started to suspect #2 because of the following in the bootstrap css:

.panel>.list-group:last-child .list-group-item:last-child {
    border-bottom:0;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px
}

Because the tooltip adds another element to the list group, the list group item is no longer the last child, so this rule ceases to apply. However, after changing .list-group-item:last-child to .list-group-item:last-of-type which would effectively ignore the tooltip, the problem still exists.

有帮助吗?

解决方案

You can use the container option on the tooltip(). This will append the popover to the parent row and not impact the style of list-group..

$('.list-group-item').tooltip({container:'.row'})

http://www.bootply.com/WpRFe2EyaM

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top