css hint. How to set a border for a triangle?

Question

css

There is an icon (made in html + css) and when you hover over it, a tooltip appears.

The problem is that the tooltip must have a border, but the triangle is pseudo-class and made from border'a. How to give him a border?
Maybe there are some alternative options to make such a hint (throw off an example)? It is for the hint to be of such a shape and the border to be throughout the form.
Here is the code of the elements: https://codepen.io/Drovosek/pen/VBNqxe
PS The task is further complicated by the fact that the tooltip must be animated.

Answer 1

https://jsfiddle.net/zth7s63b/3/

Answer 2

make another one on top of this, only smaller. The bottom border color, the top background color
can be viewed in bs https://getbootstrap.com/docs/4.1/components/popovers/