Всплывающая подсказка css - Всплывающие - Каталог статей

Всплывающая подсказка css

Всплывающая подсказка обычный блок с текстом, который появляется при наведении на элемент(ссылки, кнопки и т.д). Подсказка даёт более подробную информацию о содержимом элемента.

Для светлого и тёмного фона!

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

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

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

Право центр class~~inf-R~~

Верх слева на право class~~inf-TL~~

Верх центр class~~inf-T~~

Верх справа на лево class~~inf-TR~~

Низ справа на лево class~~inf-BR~~

Низ центр class~~inf-B~~

Низ слева на право class~~inf-BL~~

Лево центр class~~inf-L~~

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

Красная class~~all-c0~~

Зелёный class~~all-c1~~

Оранжевый class~~all-c2~~

Жёлтый class~~all-c3~~

Синий class~~all-c4~~

Серый class~~all-c5~~

Розовый class~~all-c6~~

Океан class~~all-c7~~

Белый/Чёрный class~~all-c8~~


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


 <!-- Установим `Всплывающая подсказка`: -->
 <dl class="inf-TL all-c4" data-t="Пример появления • Верх лево">Наведи на меня мышку</dl>

► Исходники(css): github (m. - Сокращённый вариант, ok. - Подробный)

Для тёмного сайта:


 <!-- Необходимо добавить в body class="temaT" -->
 <body class="temaT">

Категория: Всплывающие | Добавил: zam (16.09.2022)

Просмотров: 147 | Теги: CSS, HTML, Tooltip, Всплывающая подсказка | Рейтинг: 0.0/0

Всего комментариев: 0