React-tooltip: Color on the top tooltip arrow

[amymarco]

Hi!

I'm trying to customize my border color for my tooltip. It works for the primary border shape, but leaves the arrow a black color. Is there a way to also customize that color so the whole thing is consistent?

How it currently looks:

My current code:

css

  .tooltip-custom {
    font-weight: bold;
    border-radius: 2rem;
    border: 1px solid $color !important;
    color: $color !important;
  }

<ReactTooltip id='icon' place='bottom' class='tooltip-custom' type='light' border='true'/>

Thank you!

[ali-sadeghin]

Hi @amymarco
Did you find your way around this issue?
I'm facing the very same problem and can't figure out how to change the black color of the arrow.
Thanks

[amymarco]

@ali-sadeghin
this seemed to do the trick:

.__react_component_tooltip.type-light.border.place-bottom:before{
            border-bottom:8px solid $color;
    }

    .tooltip-custom {
      font-weight: bold;
      border-radius: 2rem;
      border: 1px solid $color !important;
      color: $color !important;

[ali-sadeghin]

Thanks a bunch @amymarco , you saved my life ;-)

[vonubisch]

If you don't want to use a custom class:

.__react_component_tooltip.place-left::after {
    border-left: 8px solid red !important;
}

.__react_component_tooltip.place-right::after {
    border-right: 8px solid red !important;
}

.__react_component_tooltip.place-top::after {
    border-top: 8px solid red !important;
}

.__react_component_tooltip.place-bottom::after {
    border-bottom: 8px solid red !important;
}

[HappyArava]

You saved me Man, Thank You...!!!