Popover with custom template and dark background color for title, arrow is white and clashes.

Created by: mrbenosborne

Hi everyone,

This is my first bug report on GitHub so please tell me if I am doing anything wrong!

Bootstrap 4 Beta 3

Operating system and browser version

Operating system: Windows 7 Browser: Chrome Version 62.0.3202.94 (Official Build) (64-bit)

CodePen

I have recreated this issue in CodePen, See the example.

The Issue

The popover shows a white border line which clashes with a dark background color on the popover header, usually, the popover header is a light color so not very noticeable but when you use a custom template for the popover defined when you initiate the JS function, add a class of ".bg-primary" to the popover-header class and finally use placement "top" so the arrow is above the popover title then you will notice a short white border at the bottom of the arrow.

The ideal fix or feature request

Allow adding of a theme color class such as ".popover-primary" to the popover template or as an attribute on the element itself, this will control the arrow border colors including the title background color.