There is an icon (made on HTML + CSS) and when you hover onto a cursor, a hint drops.

The problem is that the prompt must be Border, but the triangle is pseudo-grad and made from Border. How to ask him a border?
Maybe there are any alternatives to make such a hint (throw off an example)? It is that the tip was such a form and Border was in all form.

Item code here .

p.s. The task is complicated by the fact that the tip must be animated.

& lt; div class = "circle circle-pink tooltip" data-title = "Accepted in the company" & gt;
 & lt; span class = "triangle-border" & gt; & lt; / span & gt;
  & lt; div class = "cross" & gt; & lt; / div & gt;
& lt; / div & gt;
Body {
 Background: # 000;
}
.circle {
 width: 52px;
 HEIGHT: 52PX;
 Border: Solid 3PX White;
 Border-Radius: 50%;
 margin-left: 200px;
 margin-top: 90px;
}
.circle-Pink {
 background-color: # ff256e;
}
.cross {
 Background: White;
 Height: 18px;
 width: 2px;
 margin-left: 25px;
 margin-top: 17px;
}
.cross :: after {
 Content: "";
 Height: 2px;
 width: 18px;
 Background: White;
 Position: Absolute;
 margin-left: -8px;
 margin-top: 8px;
}
.tooltip {
 Position: relative;
}
.tooltip: Before
.tooltip: after {
 Position: Absolute;
 OPACITY: 0;
 Visibility: Hidden;
 Transition: Opacity 0.5s, Margin 0.5s;
 Margin-Bottom: 15px;
}
.Tooltip: Before {
 Content: ATTR (Data-Title);
 Display: Block;
 Height: 25px;
 width: 150px;
 Border: Solid 1px Blue;
 Border-Radius: 20px;
 Background-Color: White;
 // Color: Red;
 Font-Family: Futuraptbook;
 Font-Size: 16px;
 font-weight: normal;
 Font-Style: Normal;
 Font-Stretch: Normal;
 Line-Height: Normal;
 Letter-Spacing: Normal;
 Text-Align: Center;
/ * Color: # 2E3C3F; * /
 Color: # 939A9C;
 BOX-SIZING: BORDER-BOX;
 left: -49px;
 Bottom: 62px;
}
.tooltip :: Afterter {
 Content: "";
 Border-TOP: 9px Solid White;
 Border-Left: 6px Solid Transparent;
 Border-Right: 6px Solid Transparent;
 Left: 20px;
 Bottom: 54px;
}
.tooltip: Hover: Before
.tooltip: Hover: After {
 Visibility: visible;
 OPACITY: 1;
 Margin-Bottom: 0;
}

Answer 1, Authority 100%

slightly modified the pseudo-element, it turns out a conventional container with the body and frames, then turn and get an angle, and paint in the right colors. Individual sides of the frame.

. Tooltip :: After {
  Content: "";
  Background-Color: White;
  width: 6px;
  Height: 6px;
  Left: 22px;
  Bottom: 59px;
  Border: 1px Solid Blue;
  Border-Top-Color: White;
  Border Left-Color: White;
  Transform: Rotate (45deg);
}