W3.CSS Підказки
Наведіть курсор на речення нижче:
Лондон (9 мільйонів жителів) є столицею Англії.
Лондон 9 мільйонів жителів є столицею Англії.
W3.CSS Класи підказок
W3.CSS надає наступні класи підказок:
| Клас | Визначає |
|---|---|
| w3-tooltip | Елемент підказки |
| w3-text | Текст підказки |
Елемент підказки та текст підказки
Спливаючі підказки відображають текст (або інший вміст), коли ви наводите курсор на елемент HTML.
Клас w3-tooltip визначає елемент, на який потрібно навести курсор (контейнер підказки).
Клас w3-text визначає текст підказки.
Наведіть курсор на речення нижче:
Лондон (9 мільйонів жителів) є столицею Англії.
Приклад
<p class="w3-tooltip">Лондон
<span class="w3-text">(<em>9 мільйонів жителів</em>)</span>
є столицею Англії.</p>
Спробуйте самі »
Підказка як ярлик
Наведіть курсор на речення нижче:
Лондон 9 мільйонів жителів є столицею Англії.
Приклад
<p class="w3-tooltip">Лондон
<span class="w3-text w3-tag"><b>9 мільйонів жителів</b></span>
є столицею Англії.</p>
Спробуйте самі »
Підказка зображення
Наведіть курсор на це зображення, щоб побачити ефект:
Автомобіль — колісний транспортний засіб з автономним приводом, що використовується для пересування. Більшість визначень цього терміну вказують на те, що автомобілі зазвичай мають чотири колеса. (Вікіпедія)
Приклад (текст перед картинкою)
<div class="w3-tooltip">
<p class="w3-text">A car is a...</p>
<img src="img_car.jpg" alt="Car">
</div>
Спробуйте самі »
Приклад (текст після картинки)
<div class="w3-tooltip">
<img src="img_car.jpg" alt="Car">
<p class="w3-text">A car is a...</p>
</div>
Спробуйте самі »
Підказка з абсолютним розташуванням
Якщо ви хочете, щоб спливаюча підказка відображалася в абсолютній позиції, розмістіть текст підказки за допомогою CSS:
Приклад
<p class="w3-tooltip">Лондон
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 мільйонів жителів</span>
є столицею Англії.</p>
Спробуйте самі »
Кольорова підказка
Якщо вам потрібна кольорова підказка, використовуйте класи w3-color:
Заокруглена підказка
Якщо вам потрібна округла підказка, скористайтеся класами w3-round:
Мала підказка
Якщо вам потрібна невелика підказка, використовуйте клас w3-small:
Крихітна підказка
Якщо вам потрібна крихітна підказка, використовуйте клас w3-tiny:
Велика підказка
Якщо вам потрібна велика підказка, використовуйте класи w3-large:
Анімована підказка
Якщо ви хочете згасаючу підказку, скористайтеся класом w3-animate-opacity:
