Добро пожаловать!

Красивые тултипы с помощью CSS3 и HTML5

В рассматриваемом  нами методе мы не  будем использоваться Java Script, а ограничимся лишь CSS3 и HTML5.



В рассматриваемом способе, в принципе, нет ничего сверхнового, ведь css attr() для свойства псевдоэлемента content появился еще в CSS2.

Рассмотрим для начала простой способ.



Этот способ пригодится там, где применяются тултипы (всплывающие подсказки) не большого размера.

Рассмотрим код реализации:

<span data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>

 

.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 выводим его.

Следует отметить, что анимация в Chrome и Opera отсутствует. Это связанно с тем, что WebKit и Opera не применяют transitions и animation к псевдоэлементам ::before и ::after.

Рассмотрим пример для реализации более сложных тултипов:



Иногда в тултипе необходимо отображать не просто текст, но и некое форматирование или изображение, которое, используя предыдущий способ, не вставишь.

И снова код:

<a href="http://bws.in.ua/">qutIM
<span>qutIM — опиание….. <img src="/logo.png" />
</span>
</a>

 

.htooltip span { /* Внешний вид нашего тултипа */
    background-color: rgba(0,0,0, 0.8);
    border-radius: 15px 15px 15px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-left: 2px;
    margin-top: -75px;
    opacity: 0; /* Делаем его прозрачным */
    padding: 10px 10px 10px 40px;
    position: absolute;
    text-decoration: none;
    visibility: hidden; /* И прячем */
    width: 350px;
    z-index: 10;
}
        
.htooltip:hover span { /* По hover отображаем тултип */
    opacity: 1;
    visibility: visible;
}
        
.htooltip span img { /* Изображение для примера */
    border: 0 none;
    float: left;
    margin: -71px 0 0 -234px;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
        
.htooltip:hover span img { /* Показываем изображение */
    opacity: 1;
    visibility: visible;
}

 

Приведенные примеры можно увидеть на этой странице.