cover popover arrow when title is present

[IdanCo]

Summary

Following issue #22432 and PR #22433 , change the arrow color of popover when title is present -

See it in action here - http://jsbin.com/tubuwu/edit?html,output

Before

Arrow color was the same, regardless of the presence or absence of a title in the popover

After

Arrow color is now dependent on the presence or absence of a title in the popover

Technical

I've used an existing pseudo element of the title, originally intended to fix a gap between the popover and the arrow, and redesigned it to cover the arrow entirely with the title's background color.

[Johann-S]

X-Ref : #22433

[Johann-S]

Please can you fix that : https://travis-ci.org/twbs/bootstrap/jobs/221759321#L284

[IdanCo]

Fixed 👍

[IdanCo]

To be honest, this solution (or the previous one for that matter) is not the best i can think of. No doubt it works, but it lacks the simplicity and cleanness we've come to expect from Bootstrap. I'd like to suggest two alternatives -

1. Use has-title class

Since javascript is already injecting the popover, we can add (here maybe) a single line to toggle between the states -

$tip.toggleClass('has-title', this.getTitle())

And then with a single line of css (instead of the current dozen) set the arrow color:

&.has-title::after {
 border-bottom-color: $popover-title-bg;
}

2. Replace pseudo element with a real element

If the arrow will be an element instead of a psudo-element, it will be possible to use the sibling selector to target the arrow like this -

.popover-title + .popover-arrow::after {
  border-bottom-color: $popover-title-bg;
}

This cannot be done with a pseudo element. I realize pseudo element for arrows were intoduced recently, but since the markup is injected by js anyway, I don't see what is gained by using pseudo element, but this is one example of what is lost.

Thoughts?

[mdo]

Thanks, but we'll leave it as-is without the extra element or color change. The white arrow is intentional.

[IdanCo]

Sounds good to me, i'll just recommend in that case to remove this rule completely.