Чтобы сделать так же, вам естественно изначально нужно ссылкам прописать атрибут title. Если вы это уже сделали давно, то остается добавить лишь стили.
[title]{
position:relative;
}
[title]:after{
content:attr(title);
color:#fff;
background:#3c0;
padding:10px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
transition:0.25s linear opacity;
}
[title]:hover:after{
left:5px;
opacity:1;
}
Данные стили сделают всплывающие подсказки такие как в первой ссылки. Но если вы захотите, чтобы у разных ссылок были разные стили, то можно добавить классы ссылкам или если они уже есть, просто прописать им стили.Например по примеру у второй ссылки класс - tw_link, а у третей th_link.
Далее, просто, атрибуту title нужного класса добавляете уникальные стили. Например, у нас всем title уже заданы стили, они по умолчанию зеленого цвета. имеют размер и позиционирование с анимацией появления. Нашим новым двум классам просто добавим новые цвета.
.tw_link[title]:after{background:#f60;}
.th_link[title]:after{background:#333;}
Теперь вторая ссылка оранжевая, а третья черная. Таким же образом, можно менять размеры каждой выноске и тд. Все зависит от вашей фантазии.
На этом все, спасибо за внимание. 🙂
