How to add a border to arrow

[sawa060]

How can I add a border to arrow?

The arrow is just a rotated squares, so if I simply do a border, it will look like this.

Even if I use border-bottom, border-left, border-top and border-right, if the place changes, it will look like this

I want to display the border like this.

Is there any way to do this? Or do you plan to take any action in the future?

[gabrieljablonski]

You can take advantage of the classes we use to indicate the tooltip positioning. Take a look at the style.css file on this example.

Here's one way to do it:

.react-tooltip {
  background-color: cyan;
  color: black;
  border: 1px solid black;
}

.react-tooltip__place-top > .react-tooltip-arrow {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.react-tooltip__place-right > .react-tooltip-arrow {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.react-tooltip__place-bottom > .react-tooltip-arrow {
  border-top: 1px solid black;
  border-left: 1px solid black;
}

.react-tooltip__place-left > .react-tooltip-arrow {
  border-top: 1px solid black;
  border-right: 1px solid black;
}

As of right now, we're not planning on doing anything that would allow you to do this without custom CSS.
Though this is probably a good example to add to the documentation, so thanks for the suggestion!