Thinking outside the box, using a box

I have been using the react-tooltip package for a long time, and really like its capabilities.
Recently, as part of a task for one of the customers, a simple requirement came up, to make a rounded corner for the tip of the tooltip.

The problem 🤯

At first, I thought this wouldn’t be a problem, I even thought there was built-in support in the library to do this. Surprisingly, not only is there no support, but the implementation of the tip also made it impossible to achieve the desired result.

As many developers do, the library also used the simplest CSS solution to create the triangle of the tip by using CSSborder in the before selector.

:before {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  bottom: -6px;
  left: 50%;
  margin-left: -8px;
  border-top-color: #000;
  border-top-style: solid;
  border-top-width: 6px;
}

On the one hand, a really simple, quick solution. no brainer.
But on the other hand, limited in terms of design.

The use of border allows you to change the color and rotate the arrow, very easily, but nothing more than that. In my case, I had no option of rounding the arrow corner. Despite the use of border, I thought the solution would be with border-radius. But the use is actually an extension of border in such a way that it creates a triangle, so what we see as a triangle is actually one border out of three — top, right, left, and using border-radius is meaningless, because we don’t really have a corner between two angles.

Don’t give up! 💪

Just before I gave up, I tried to override the tooltip arrow, and instead of using a border, creating an arrow inside the after selector by drawing a square and rotating it 45 degrees, so that you only see half of it outside the tooltip.
As soon as we have a square, we have two angles, and there is a border-radius that allows us to apply the requirement for a rounded corner!

So now that we have an arrow with a rounded corner, there are a few design issues left to solve.
The first and main thing is to hide the other half of the square that is inside the tooltip. For this, I used the before selector, and there I created a simple square that inherits the color of the tooltip and place its z-index above the square of the after selector so that it covers it.
Of course, the rotation of the square and its position were updated according to the tooltip definition, information that already existed before in the code, and I only had to make adjustments in CSS from changing border to change the position of after selector.

A few more settings have been updated to support the customization options of the tooltip, such as a custom border color around the tooltip and the arrow, and a different arrow color than the tooltip color.

Solved! 💡

At that point, I have found a solution to the requirement of an arrow with a rounded corner, and in fact, now we can even extend the use of the tooltip arrow to additional elements.

I opened a pull request to the library and to my delight it was approved and now it’s part of the library.

So now I have a merged code that enhances a 1,390,778 weekly downloaded library. 😱

That’s all for today, let me know what you think. Happy coding! 🤓