React-tooltip: How to easily change color of border?

[antofa]

As i see there is no property for changing border color of tooltip. I try to change it with CSS style, but unsuccessfull.

.tooltip {
    border: 1px solid aqua !important;
}

.tooltip.place-right::before {
    border-right: 8px solid aqua !important;
}

.tooltip.place-left::before {
    border-left: 8px solid aqua !important;
}

Is it correct way or is there simpler solution?

[AyWa]

Hey, you can do

.yourClass {
  border: 1px solid aqua !important;
}
.yourClass.place-top::after,
.yourClass.place-bottom::after {
    border-color:  aqua transparent !important;
}
.yourClass.place-right::after,
.yourClass.place-left::after {
  border-color:  transparent aqua !important;

with

<ReactTooltip
        className="yourClass"
        place="left"
        effect="solid"
      />

[yieldinov]

What about not filling the arrow but also adding a border to it?

[silviapeveri]

You need to add the attribute border='true' to the ReactTooltip tag.

[sometimescasey]

Adding border='true' results in the border CSS styles being ignored.

Oddly enough the arrow can still be styled when border='true'