How can I add a border to arrow in react-tooltip v5?

Question

How can I add a border to arrow in react-tooltip v5?

When I specify a border using classNameArrow, it does not work as this.

I want to display the border like this.

I would also like to consider when the Tooltip place is also other than top.

Here is a sample code.

Answer 1

You can just do:

.example-arrow {
  border: 1px solid black;
  border-bottom:0px;
  border-right:0px;
}

Add margin-top: -1px; too if you want to make it look nicer.

The arrow is just a rotated square, so you have to set a different styles (try using with border-left and border-top) for other positions.

Answer 2

Here's the CSS class you need.

.example-arrow {
  border-top: 1px solid black;
  border-left: 1px solid black;
}

Turns out the classNameArrow is by default a box (square) that's been rotated clockwise by 45 degrees.