[FEAT REQ] Arrow coloring enhancement

[russell-holz]

Is your feature request related to a problem? Please describe.
I only want to color the protruding section of the arrow

Describe the solution you'd like
A prop or solution to just color the protruding arrow section

Describe alternatives you've considered
Tried to do it with css but having issues selecting just one section because of the way the arrow is drawn and would have to implement solutions for every arrow position

Additional context
The provided classNameArrow background color solution results in the entire box being colored like so...

I want to be able to just color the protruding section like so...

[gabrieljablonski]

I'll leave this open for now since it might be viable in the future, but for now you can try something like this:

.react-tooltip__place-top > .react-tooltip-arrow {
  background: linear-gradient(to right bottom, transparent 50%, red 50%);
}

.react-tooltip__place-right > .react-tooltip-arrow {
  background: linear-gradient(to left bottom, transparent 50%, red 50%);
}

.react-tooltip__place-bottom > .react-tooltip-arrow {
  background: linear-gradient(to left top, transparent 50%, red 50%);
}

.react-tooltip__place-left > .react-tooltip-arrow {
  background: linear-gradient(to right top, transparent 50%, red 50%);
}

Just switch out red and you should be good to go.

[gabrieljablonski]

Just leaving this here as a note for myself in the future

/* internal css arrow class */
.arrow {
  ...
  /* this rotation should be relative to the tooltip placement, so the arrow "tip" is always the same CSS-wise */
  transform: rotate(45deg);
}