Подсказка на css. Как треугольнику задать border?

Question

[Drovosek01]

Есть иконка (сделанная на html + css) и при наведении на неё курсора, выпадает подсказка.



Проблема в том, что у подсказки обязательно должен быть border, но треугольник является псевдоклассок и сделан из border'a. Как задать ему бордер?
Может есть какие-нибудь альтернативные варианты сделать такую подсказку (скиньте пример)? Именно чтобы подсказка была такой формы и бордер был по всей форме.

Вот код элементов: https://codepen.io/Drovosek/pen/VBNqxe

P.S. задача осложняется ещё тем, что подсказка должна быть анимирована.

Comments

[Ankhena]

Делается вот так: www.cssarrowplease.com
Вашу структуру придется слегка переделать.

Answer 1

[Aleksey Solovyev]

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

Comments

[Drovosek01]

Спасибо, интересный способ, но боюсь при моём соотношении подсказки псевдо-треугольник может перекрыть текст. Это можно как-то предотвратить не меняя самого текста?

[Aleksey Solovyev]

Задайте border-radius для элемента :after

div::after{
  border-radius: 100% 0 0 0;
}

https://jsfiddle.net/zth7s63b/19/

ps или создайте нормальную разметку. Ибо Ваша очень сомнительно выглядит... измените длину текста и будет беда, позиционирование - беда и тд... Да и идея создавать еще одну обертку для подсказки выглядит ужасно.

psps https://jsfiddle.net/7zyxbj5k/ если делать как у Вас было.

Answer 2

[Drovosek01]

В общем я уже переделал как надо и это сохранилось в предоставленной ссылке.

Comments

[Aleksey Solovyev]

Вы переделали как я написал и отметили свой ответ решением... хм... окей))

ps да еще и криво сделали....

Answer 3

[tyzberd]

сделайте еще один поверх этого, только меньше. Нижнему цвет бордера, верхнему цвет фона
можно посмотреть в бс https://getbootstrap.com/docs/4.1/components/popovers/

Comments

[Drovosek01]

Так а как я сделаю? :before и :after заняты

[SexyMonkey]

Drovosek01, что мешает напихать span'оф с абсолютным позиционированием?

[Drovosek01]

SexyMonkey, то, что придётся все менять.