Custom background color w/ matching arrow color

[andycochran]

@mockey-jockey pointed out in #370 how if you want to style tooltips/popovers with a custom background color, there's no simple/quick way to get an arrow of matching color. Below are my notes/ideas copied from that issue:

The docs recommend hiding the arrows when giving them custom colors:

.tooltip-error {
  background-color: #e37f7f;
  color: #fff;
}

.tooltip-error .ember-tooltip-arrow {
  display: none;
}

Instead of the display: none, you could add specific custom styles to color the arrow instead:

.ember-tooltip[x-placement^="top"] .ember-tooltip-arrow {
  border-top-color: #e37f7f;
}

However, you'd have to add a custom style for each side you need the arrow to appear on. I think we could do better.

What if instead of defining border-[side]-color four times, we define border-color once and in each `[x-placement^="[side]"] we override the borders that should be transparent:

.ember-tooltip[x-placement^="top"] .ember-tooltip-arrow {
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

Then, custom styles could simply declare matching background and arrow colors:

.tooltip-barbie {
  background-color: Pink;
}

.tooltip-barbie .ember-tooltip-arrow {
  border-color: Pink;
}

Can anyone think of concerns with using !important in this way? If not, I'll put together a PR.

[andycochran]

One caveat I can think of: This is a breaking change. It could clobber any custom style people have defined in consuming apps. Maybe this should be considered for a future major version?

[andycochran]

Perhaps a short-term "fix" would be to update the docs in the custom styling section so people know how to style arrows. It could say… 

<style>
  .tooltip-error {
    background-color: #e37f7f;
    color: #fff;
  }
  .tooltip-error[x-placement^="top"] .ember-tooltip-arrow {
    border-top-color: #e37f7f;
  }
  .tooltip-error[x-placement^="right"] .ember-tooltip-arrow { 
    border-right-color: #e37f7f; 
  }
  .tooltip-error[x-placement^="bottom"] .ember-tooltip-arrow { 
    border-bottom-color: #e37f7f;
  }
  .tooltip-error[x-placement^="left"] .ember-tooltip-arrow { 
    border-left-color: #e37f7f; 
  }
</style>

{{#some-component}}
  Show an error
  {{#ember-tooltip tooltipClass="tooltip-error"}}
    Here is the error!
  {{/ember-tooltip}}
{{/some-component}}

[maxfierke]

I do like the border-[side]-color: transparent approach, but I'm not sure the !important is necessary due to specificity rules.

The question about breaking change is a good one though and I'm not 100% sure on whether CSS constitutes an API that would be covered under semver. Sort of philosophical question 😄I probably have somewhat contradictory views on it myself. I think perhaps some docs changes for 3.x would be a good start for now, but perhaps we would revisit the CSS refactoring for the next major version.

@sir-dunxalot any thoughts on whether we ought to have stability guarantees for the default CSS rules?