W3.CSS

W3.CSS ГЛАВНАЯ Введение в W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS W3.CSS Границы Карточки W3.CSS W3.CSS по умолчанию W3.CSS-шрифты W3.CSS Google Текст W3.CSS W3.CSS Раунд W3.CSS заполнение Поля W3.CSS W3.CSS Отображение Кнопки W3.CSS Примечания W3.CSS W3.CSS Цитаты Оповещения W3.CSS W3.CSS-таблицы Списки W3.CSS Изображения W3.CSS Входные данные W3.CSS Значки W3.CSS W3.CSS-теги Иконки W3.CSS W3.CSS Отзывчивый Макет W3.CSS W3.CSS-анимации W3.CSS эффекты W3.CSS бары Выпадающие списки W3.CSS Аккордеоны W3.CSS W3.CSS-навигация Боковая панель W3.CSS Вкладки W3.CSS W3.CSS Пагинация Индикаторы выполнения W3.CSS Слайд-шоу W3.CSS W3.CSS Модальный Подсказки W3.CSS W3.CSS сетка W3.CSS-код W3.CSS-фильтры Тенденции W3.CSS Случай W3.CSS W3.CSS Материал Проверка W3.CSS Версии W3.CSS W3.CSS для мобильных устройств

Цвета W3.CSS

Цветовые классы W3.CSS W3.CSS цветной материал W3.CSS цветной плоский интерфейс W3.CSS Цветной интерфейс Metro W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Цветовая мода Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов W3.CSS

Веб-строительство

Веб-введение Веб-HTML Веб-CSS Веб-JavaScript Веб-макет Веб-группа Веб-кейтеринг Интернет-ресторан Веб-архитектор

Примеры

Примеры W3.CSS Демонстрации W3.CSS Шаблоны W3.CSS

использованная литература

Справочник по W3.CSS W3.CSS Загрузки

Подсказки W3.CSS


Наведите указатель мыши на предложения ниже:

Лондон - столица Англии.(9 million inhabitants)

Лондон 9 million inhabitants - столица Англии.


Классы подсказок W3.CSS

W3.CSS предоставляет следующие классы всплывающих подсказок:

Класс Определяет
w3-подсказка Элемент всплывающей подсказки
w3-текст Текст всплывающей подсказки

Элемент всплывающей подсказки и текст всплывающей подсказки

Подсказки отображают текст (или другой контент), когда вы наводите курсор на элемент HTML.

Класс w3-tooltip определяет элемент, на который нужно навести курсор (контейнер всплывающей подсказки).

Класс w3-text определяет текст всплывающей подсказки.

Наведите указатель мыши на предложение ниже:

Лондон - столица Англии.(9 million inhabitants)

Пример

<p class="w3-tooltip">London
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>

Подсказка как тег

Наведите указатель мыши на предложение ниже:

Лондон 9 million inhabitants - столица Англии.

Пример

<p class="w3-tooltip">London
<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>


Подсказка к изображению

Наведите курсор на это изображение, чтобы увидеть эффект:

Машина

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)

Пример (текст перед картинкой)

<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:

Лондон 9 million inhabitants - столица Англии.

Пример

<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>

Цветная подсказка

Если вам нужна цветная всплывающая подсказка, используйте классы w3 - color :

Пример

<span class="w3-text w3-tag w3-red">9 million inhabitants</span>

Закругленная подсказка

Если вам нужна закругленная всплывающая подсказка, используйте классы w3 - round :

Пример

<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>

Маленькая подсказка

Если вам нужна небольшая всплывающая подсказка, используйте класс w3-small :

Пример

<span class="w3-text w3-tag w3-small">9 million inhabitants</span>

Крошечная подсказка

Если вам нужна крошечная всплывающая подсказка, используйте класс w3-tiny :

Пример

<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>

Большая подсказка

If you want a large tooltip, use the w3-large classes:

Example

<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>

Animated Tooltip

If you want to fade in the tooltip, use the w3-animate-opacity class:

Example

<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>