react-tooltip

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

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.

Solution

  • 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.