Плюшкидля сайта
Главная » Статьи » Всплывающие
Всплывающая подсказка css +
Всплывающая подсказка обычный блок с текстом, который появляется при наведении на элемент(ссылки, кнопки и т.д). Подсказка даёт более подробную информацию о содержимом элемента.
.vp-TR .all-c0
.vp-T all-c1
.vp-TL all-c2
.vp-R all-c3
.vp-L all-c4
.vp-BR all-c5
.vp-B all-c6
.vp-BL all-c7
.vp-TR all-c8
С возможностью отображения HTML кодов в подсказке.

Добавим (html, css) подсказку:

Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-t = "Текст подсказки" с текстом подсказки.

Для выбора стороны появления подсказки добавим в атрибут class:

Право центр classvp-R
Право центр
Верх слева на право classvp-TL
Верх слева на право
Верх центр classvp-T
Верх центр
Верх справа на лево classvp-TR
Верх справа на лево
Низ справа на лево classvp-BR
Низ справа на лево
Низ центр classvp-B
Низ центр
Низ слева на право classvp-BL
Низ слева на право
Лево центр classvp-L
Лево центр

Для выбора расцветки подсказки добавим в атрибут class:

Красная classall-c0
Зелёный classall-c1
Оранжевый classall-c2
Жёлтый classall-c3
Синий classall-c4
Серый classall-c5
Розовый classall-c6
Океан classall-c7
Белый/Чёрный classall-c8 

 <!-- Добавить в <head>..</head>: -->
 <link href="https://zam.usite.pro/db/publ/tooltipCSSpljus/1-0-0/m.css" rel="stylesheet">
 

 <!-- Установим `Всплывающая подсказка`: -->
 <div class="vpCssP"><!-- Оболочка для ориентира появления подсказки -->
   <button>Наведи на меня!</button><!-- Для чего подсказка -->
   <div class="vp-B"><b>Она самая</b> проверка <font color="red">font color red</font></div><!-- Подсказка -->
 </div>
► Исходники(css): github (m. - Сокращённый вариант, ok. - Подробный)
Для тёмного дизайна сайта, необходимо добавить class="temaT" 

 <!-- Необходимо добавить в body class="temaT" -->
 <body class="temaT">
Категория: Всплывающие | Добавил: zam (20.03.2025)
Просмотров: 7 | Рейтинг: 0.0/0
Всего комментариев: 0
Войдите:
avatar