сайт на данный момент является архивом информации по форуму phpbb 3.0. объяснения и помощь больше не предоставляются. старый сайт

Белк на PhpBB 3.0.14

информация по этому форуму. bbcode, моды и прочее, проверенное Белком. (перенос данных продолжается...)

Сегодня на конференции было 52 посетителей :: 1 зарегистрированный, 0 скрытых, 1 бот и 50 гостей (основано на активности посетителей за последние 24 часа)

Страница 1 из 1

[ 1 сообщение ]

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

Версия для печати

Пред. тема | След. тема

Автор Сообщение

Belk (Андрей)

11 янв 2026, 17:59 Всплывающая подсказка

Администратор

Стаж: 5 месяцев 20 дней
Сообщения: 228
Откуда: здешние мы

Стиль сайта: subsilver2
Настоящее имя: Андрей

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

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

посмотреть демо

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

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

  <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-файл:

скачать из архива сайта

трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."

Цитата

Страница 1 из 1

[ 1 сообщение ]

Кто сейчас на конференции:

Всего посетителей: 1, из них зарегистрированных: 0, скрытых: 0 и гостей: 1 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (63) здесь было 23 май 2026, 12:35

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

Список форумов » Сайтостроение » Разное

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

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

Текущее время: 26 июн 2026, 20:51