info navigation page administrator

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ] 

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 5 лет 9 месяцев 3 дня
Сообщения: 1065
Откуда: здешние мы


Стиль: subsilver2


Репутация: 6


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


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

нашёл в сети, протестировал - мне понравилось. плюсом именно данного варианта можно посчитать то, что вывод информации можно сделать на какой-то блок или область. то есть подсказка появляется не просто при наведении на ссылку/картинку, а на какую-то определённую часть страницы. ну и "плавное появление", "красивость" и тому подобное.

оригинальная тема: https://webref.ru/layout/pseudo-class-hover/tooltip

пример:

Наведи сюда курсор. :girl_cray2:



как видите подсказка показывается при наведении на область, а не на элемент. и ничему не мешает.

код вывода этого действа:

Код: Выделить всё

  <style>
   [data-tooltip] {
    position: relative; /* Относительное позиционирование */
   }
   [data-tooltip]::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    width: 300px; /* Ширина подсказки */
    left: 0; top: 0; /* Положение подсказки */
    background: white; /* Белый цвет фона */
   border: 1px solid #069; /* Полоса вокруг подсказки */
    color: black; /* Цвет текста */
    padding: 0.5em; /* Поля вокруг текста */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
    pointer-events: none; /* Подсказка */
    opacity: 0; /* Подсказка невидима */
    transition: 1s; /* Время появления подсказки */
   }
   [data-tooltip]:hover::after {
    opacity: 1; /* Показываем подсказку */
    top: 4em; /* Положение подсказки, смещение вниз при появлении */
   }
  </style>
  <p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном...">
   Наведи сюда курсор.
 </p>


сверху располагается css код оформления и выведения подсказки. сама область выведения задаётся элементом

Код: Выделить всё

<p data-tooltip="подсказка">информация</p>


интересная штука, это точно.

для изучения применения можете перейти на сайт автора или скачать html-файл:

Скачать из демо-архива сайта


:arigato:


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
всплывающая подсказка,css
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (42) здесь было 14 май 2021, 21:27

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  

cron

Текущее время: 24 июн 2021, 17:49

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид