Подсказки 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:
Пример
<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>