Всплывающие подсказки (тултипы) с помощью CSS

Создание простых всплывающих подсказок («тултипов»)

В данном методе не будет использоваться JavaScript, лишь CSS3 и HTML5.

Этот способ сгодится тем, кому нужны небольшие всплывающие подсказки — «тултипчики».

tooltip Всплывающая подсказка

Сам элемент зададим так

наведи на меня!

В CSS необходимо прописать следующий код

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /*содержимое всплывающей подсказки */
    margin-top: -24px;
    opacity: 0; /* Наш элемент прозрачен... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...и скрыт. */

    transition: all 0.4s ease-in-out; /*Добавить плавности по вкусу */
}

.tooltip:hover::after {
    opacity: 1; /* Показываем его */
    visibility: visible;
}

Берется некий элемент (В нашем случае span), добавляем к нему атрибут с текстом, который будет показан и берём псевдоэлемент ::after. В content этого псевдоэлемента мы, пользуясь замечательнейшим свойством attr(), присваиваем нашей всплывающей подсказке текст и потом по :hover показываем его.

Остальные свойства понятны по комментариям в коде.