[BUG] Thicker borders cause arrow border to overlap container

[reintroducing]

Bug description
When you apply thicker borders, its very visible that the tips of the border, since they are square, end up overlapping into the content area. I've attached screenshots showing the problem. One is with a 20px border which is contrived but obviously shows the issue. The other is a 4px border where you can still see the issue. In my app, we are using a 3px border but it's still visible if you look closely enough.

Version of Package
v5.30.0

To Reproduce
Just set the border to something like 8px solid red.

Expected behavior
The tips of the border should go underneath the container.

Screenshots

Desktop (please complete the following information if possible or delete this section):

• OS: MacOS
• Browser Chrome
• Version 144.0.7559.59
• Frameworks React 19.2.4

Smartphone (please complete the following information if possible or delete this section):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]
• Frameworks [e.g. React 18, Next.js 13]

Additional context
Add any other context about the problem here.

[danielbarion]

Hi, can you please try the following beta release and let me know?

Beta version released with the last commit 🚀

yarn add react-tooltip@5.30.0-beta.1263.rc.2

or

npm install react-tooltip@5.30.0-beta.1263.rc.2

[reintroducing]

@danielbarion close, but here are the results visually

[danielbarion]

@reintroducing can you please try the following beta release?

Beta version released with the last commit 🚀

yarn add react-tooltip@5.30.0-beta.1263.rc.3

or

npm install react-tooltip@5.30.0-beta.1263.rc.3

Tested on code sandbox:

Also fixed for when we have arrowSize defined:

``` ```

Previously, it was being filled by the same background of the tooltip content, now it keeps the correct color.

[reintroducing]

@danielbarion hmm, i don't think thats the correct behavior (filling it with the border color instead of the content color). In our case we want the arrow to be the same color as the tooltip and ONLY the border to be the border color, so this solution is not ideal (and honestly i'd imagine most people would want it that way as a thick arrow in the border color is not conventionally how these UIs get rendered in other systems).

[reintroducing]

and just to clarify, for the very thick border, i think thats fine as you'd expect that to happen with such a thick border, but where the border is smaller and CAN have space to show the tooltip bg color, that would be desirable.

[danielbarion]

@reintroducing got your points and it does make sense, can you please check the following message and try the beta release in the next message?

#1263 (comment)

[reintroducing]

@danielbarion it works if the arrow is in the center position, but breaks on edges. examples:

<Tooltip
    id="my-tooltip"
    place="top-start"
    arrowSize={20}
    border="8px solid red"
    isOpen
  />

<Tooltip
    id="my-tooltip"
    place="top-end"
    arrowSize={20}
    border="8px solid red"
    isOpen
  />

[danielbarion]

That's weird, here it looks to be working:

the attributes:

            border="8px solid red"
            arrowSize={20}
            place="top-end"

Can you please modify that CodeSandbox so I can reproduce it?

https://codesandbox.io/p/sandbox/gallant-leftpad-8kvtn7

The last beta release related this ticket is:

react-tooltip@5.30.0-beta.1263.rc.4

[reintroducing]

@danielbarion my apologies, i'm not exactly sure what happened but i created a codesandbox with my exact code and it worked properly as you described. i then modified my local vite test project and it also worked, and then i modified my actual project and... it also worked. i may have broken something along the way switching branches and not properly clearing node modules or something cached in my browser, but i can confirm it works across the board now.

really appreciate you taking the time to work through this with me.

[danielbarion]

All good @reintroducing, thanks for confirming!

I'll add it to the next release, I also have another issue I would like to release a fix this week, so it should be released soon :)