Добрый день. Сейчас рассмотрим такую задачку, когда необходимо посредством CSS добавить всплывающую подсказку на наш сайт.
Допустим у нас имеется кнопка такого типа:
<button class="btn">Кнопка</button>
И нам нужно, чтобы при наведении на эту кнопку появлялась небольшая табличка с описанием такого типа:
<span class="btndescription">Описание</span>
Итак, приступим.
Для начала создаем отдельный блок div для кнопки:
<div id="btnblock">
</div>
Внутри этого блока вставляем нашу кнопку и описание:
<div id="btnblock">
<button class="btn">btn</button>
<span class="btndescription">Описание</span>
</div>
И делаем правим наш css для того, чтобы только при наведении отображалось наше описание:
.btndescription {
display:none;
background: white;
border-radius: 10px;
position: absolute;
margin-top: -40px;
}
#btnblock:hover .btndescription {
display:block;
}
display:none; - запрещает отображение блока
и далее мы указываем, что при наведении на блок с id #btnblock мы будем менять наш класс .btndescription. Тут мы меняем параметр display (разрешаем отображение)
#btnblock:hover .btndescription { display:block; }
Вот и все, теперь при наведении указателя мышки на кнопку появится описание.
Такое описание можно добавить к любому элементу на нашей странице.