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">Автомобиль - это...</p>
<img src="img_car.jpg"
alt="Автомобиль">
</div>
Попробуйте сами »
Пример (текст после картинки)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Автомобиль">
<p class="w3-text">Автомобиль - это...</p>
</div>
Попробуйте сами »
Абсолютно позиционированная подсказка
Если вы хотите, чтобы подсказка отображалась в абсолютном положении, позиционируйте текст подсказки с помощью CSS:
Пример
<p class="w3-tooltip">Лондон
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 млн. жителей</span>
- это столица Англии.</p>
Попробуйте сами »
Цветная подсказка
Если вам нужна цветная подсказка, используйте классы w3-цвет:
Округлая подсказка
Если вам нужна закругленная подсказка, используйте классы w3-round:
Небольшая подсказка
Если вам необходима небольшая подсказка, используйте класс w3-small:
Крошечная подсказка
Если вам необходима крошечная подсказка, используйте класс w3-tiny:
Большая подсказка
Если вам необходима большая подсказка, используйте классы w3-large:
Анимированная подсказка
Если вы хотите применить анимацию для подсказки (появление/исчезание), используйте класс w3-animate-opacity:
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
