Prevent Bootstrap tooltip from hiding panel bottom border

Question

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.

Answer 1

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