Последние учебники веб-разработки
 

W3.CSS Всплывающие


Всплывающие отображения текста (или другого содержимого) при наведении курсора мыши на HTML элемент.


Инлайн подсказке Текст

Наведите курсор мыши на приведенном ниже предложении!

9 Лондон миллиона является столицей Англии.

Класс w3-подсказке определяет HTML - элемент опекать (подсказке контейнер).

W3-текст класс определяет текст подсказки:

пример

<p class="w3-tooltip">London
<span class="w3-text">9 million</span>
is the capital city of England</p>
Попробуй сам "

Инлайн подсказке Tag

Наведите курсор мыши на приведенном ниже предложении!

9 Лондон миллиона является столицей Англии.

Класс w3-подсказке определяет HTML - элемент опекать (подсказке контейнер).

W3-текст класс определяет текст подсказки:

пример

<p class="w3-tooltip">London
<span class="w3-text w3-tag">9 million</span>
is the capital city of England</p>
Попробуй сам "

Большой подсказке

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

Автомобиль

Автомобиль представляет собой колесное, с автономным питанием двигателя транспортное средство, используемое для перевозки. Большинство определений термина указывается, что автомобили, как правило, имеют четыре колеса. (Википедия)

Класс w3-подсказке определяет HTML - элемент опекать (подсказке контейнер).

W3-текст класс определяет текст подсказки:

Пример (текст перед изображением)

<div class="w3-tooltip">

<p class="w3-text">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)</p>

<img src="img_car.jpg" alt="Car" style="width:100%">

</div>
Попробуй сам "

Пример (текст после того, как на картинке)

<div class="w3-tooltip">

<img src="img_car.jpg" alt="Car" style="width:100%">

<p class="w3-text">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)</p>

</div>
Попробуй сам "

Абсолютная подсказке

Если вы хотите, чтобы подсказка появляться в абсолютном положении, поместите текст подсказки (W3-текст):

пример

<p class="w3-tooltip">London is the capital city of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p>
Попробуй сам "

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

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

пример

<span class="w3-text w3-tag w3-red ">9 million</span>
Попробуй сам "

Округлые подсказке

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

пример

<span class="w3-text w3-tag w3-round ">9 million</span>
Попробуй сам "

Малый подсказке

Если вы хотите небольшую подсказку, используйте W3-малого класса:

пример

<span class="w3-text w3-tag w3-small ">9 million</span>
Попробуй сам "

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

Если вы хотите крошечный всплывающую подсказку, используйте W3-крошечное класс:

пример

<span class="w3-text w3-tag w3-tiny ">9 million</span>
Попробуй сам "

Большой подсказке

Если вы хотите большой всплывающую подсказку, используйте W3-больших классов:

пример

<span class="w3-text w3-tag w3-xlarge ">9 million</span>
Попробуй сам "