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

Question

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.

Just for reference [https://github.com/ReactTooltip/react-tooltip/issues/998](https://github.com/ReactTooltip/react-tooltip/issues/998) — Gabriel Jablonski, Apr 07 '23 at 18:01

Lucas P. Luiz · Accepted Answer · 2023-04-02T14:52:15.033

0

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.

edited Apr 02 '23 at 14:52

answered Apr 02 '23 at 13:39

Lucas P. Luiz

thanks. However, that way, when Tooltip's place is other than top, it goes wrong. – Yusa Apr 02 '23 at 14:24
I added a bit of explanation for the other positions. Try setting different classnames for different positions, each using a different `border-bottom` `border-left` `border-right` and `border-top` combination. – Lucas P. Luiz Apr 02 '23 at 14:55
That method may be difficult because of the automatic change of place in some locations. I will consider eliminating the border. Thank you. – Yusa Apr 03 '23 at 01:27

score 0 · Answer 2 · answered Apr 02 '23 at 13:55

0

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.

answered Apr 02 '23 at 13:55

KitaPDev

thanks. However, that way, when Tooltip's place is other than top, it goes wrong. – Yusa Apr 02 '23 at 14:24
@Yusa You're right, I haven't thought about that. Have you tried setting both tooltip and arrow borders to transparent? Doing that makes it look pretty good to me and might be how it was intended to be used. – KitaPDev Apr 02 '23 at 17:36
Maybe that would be better... Thank you! – Yusa Apr 03 '23 at 01:20

2 Answers2