Как лучше реализовать всплывающие по наведению данные? (образец)

@Enkille · Регистрация: 23.11.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Есть таблица, в ячейках с ценами при наведении на каждую из них должны выводиться подробные данные (что входит в комплектацию). И это не пара слов, чтобы можно было воспользоваться css-свойством data-name + content.

Подскажите пожалуйста, как лучше реализовать данный функционал с наименьшим кол-вом кода?
Куда лучше занести данные, как их подключить и вызвать посредством html\css?

Спасибо!

@vitsuk · 17.12.2015, 02:11

Enkille, попробуй <div class="hot" data-title=".........................Текст... .........................">

@Анар · 17.12.2015, 04:25

Enkille, чем вас не устраивает связка data-name + content псевдоэлемента? В описании есть что-то сложнее, чем просто текст? Если да, то создавайте блок с абсолютной позицией, прозрачный и меняйте прозрачность по наведению. Если нет, то удобнее, чем связка data-name + content, нет.

@Enkille · 17.12.2015, 15:50 **[ТС]**

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

Enkille, чем вас не устраивает связка data-name + content псевдоэлемента? В описании есть что-то сложнее, чем просто текст? Если да, то создавайте блок с абсолютной позицией, прозрачный и меняйте прозрачность по наведению. Если нет, то удобнее, чем связка data-name + content, нет.

Дело как раз в том, что всплывающие данные нужно оформить, т.е. это полноценное модальное окно со своим форматированием. Как я поставлю это в data?

@Анар · 17.12.2015, 15:54

Enkille, ну смотря как оформлять надо. Текст в псевдоэлеменете можно оформить так же как и в любом другом элементе на странице. Вы объясните подробнее, а лучше покажите пример, что вам нужно там разместить и мы дадим вам ответ. А так долго можно разглагольствовать что можно, а что нет, что удобно, что не удобно и т.д.

@Glart · 17.12.2015, 16:00

Формируем само окно, делаем невидимым.

Средствами AJAX выгружаем данные из базы (картинка, описание, другие данные).
Помещаем данные в модальное окно и делаем окно видимым.

Но, увы нужен JS.

Если только HTML+CSS. то данные уже должны быть на странице и скрыты, а при наведении мыши делать их видимыми средствами CSS. И в таком случае большой разницы нет, что отдельные блоки с данными, что через data-name

@nikipor · 17.12.2015, 16:25

Я бы сделал через яваскрипт:

1. внизу страницы разместил стопроцентную одноячеистую таблицу с абсолютной позицией
2. в ней по центру блок с каким угодно оформлением
3. в нём отдельные блоки с контентом, скрытые по дисплей:ноне
4. всю таблицу снёс за пределы экрана

Нажимаете на что-нибудь - нужный блок разворачивается, а таблица позиционируется на весь экран поверх всего, и у вас по центру оказывается блочок с нужным содержимым.

@Анар · 17.12.2015, 17:03

nikipor, это можно и на css сделать)

@nikipor · 17.12.2015, 21:53

Я привык верстать под ие6, веруя, что остальные браузеры сами собой всё скушают. Специально я этим не занимался, но почему-то кажется, что на css будет не кроссбраузерно.

@Enkille · 18.12.2015, 23:29 **[ТС]**

Ребята, спасибо всем ответившим. Я попробовал делать через content, но что-то как-то не то получалось. В итоге прибег к простешему jQuery.

Для каждой колонки ячеек устанавливаю класс. При наведении на этот класс становится видимым DIV с контентом.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(".set-light").mouseout(function(){
    $('.set-light-content').hide();
;})
$(".set-light").mouseover(function(){
   $('.set-light-content').show();
});
$(".set-practic").mouseout(function(){
    $('.set-practic-content').hide();
;})
$(".set-practic").mouseover(function(){
   $('.set-practic-content').show();
});
$(".set-comfort").mouseout(function(){
    $('.set-comfort-content').hide();
;})
$(".set-comfort").mouseover(function(){
   $('.set-comfort-content').show();
});
$(".set-maxi").mouseout(function(){
    $('.set-maxi-content').hide();
;})
$(".set-maxi").mouseover(function(){
   $('.set-maxi-content').show();
});

@Анар · 18.12.2015, 23:33

Enkille, ну это можно было через :hover сделать, о чём я писал)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Enkille 1 / 1 / 0 Регистрация: 23.11.2015 Сообщений: 24

	Как лучше реализовать всплывающие по наведению данные? (образец) 17.12.2015, 01:58. Показов 619. Ответов 10 Метки css, html (Все метки) Здравствуйте. Есть таблица, в ячейках с ценами при наведении на каждую из них должны выводиться подробные данные (что входит в комплектацию). И это не пара слов, чтобы можно было воспользоваться css-свойством data-name + content. Подскажите пожалуйста, как лучше реализовать данный функционал с наименьшим кол-вом кода? Куда лучше занести данные, как их подключить и вызвать посредством html\css? Спасибо! Миниатюры 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	17.12.2015, 02:11
	Enkille, попробуй <div class="hot" data-title=".........................Текст... ........................."> 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	17.12.2015, 04:25
	Enkille, чем вас не устраивает связка data-name + content псевдоэлемента? В описании есть что-то сложнее, чем просто текст? Если да, то создавайте блок с абсолютной позицией, прозрачный и меняйте прозрачность по наведению. Если нет, то удобнее, чем связка data-name + content, нет. 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	17.12.2015, 15:54
	Enkille, ну смотря как оформлять надо. Текст в псевдоэлеменете можно оформить так же как и в любом другом элементе на странице. Вы объясните подробнее, а лучше покажите пример, что вам нужно там разместить и мы дадим вам ответ. А так долго можно разглагольствовать что можно, а что нет, что удобно, что не удобно и т.д. 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	17.12.2015, 16:00
	Формируем само окно, делаем невидимым. Средствами AJAX выгружаем данные из базы (картинка, описание, другие данные). Помещаем данные в модальное окно и делаем окно видимым. Но, увы нужен JS. Если только HTML+CSS. то данные уже должны быть на странице и скрыты, а при наведении мыши делать их видимыми средствами CSS. И в таком случае большой разницы нет, что отдельные блоки с данными, что через data-name 0

@nikipor 11 / 24 / 6 Регистрация: 05.01.2012 Сообщений: 478
	17.12.2015, 16:25
	Я бы сделал через яваскрипт: 1. внизу страницы разместил стопроцентную одноячеистую таблицу с абсолютной позицией 2. в ней по центру блок с каким угодно оформлением 3. в нём отдельные блоки с контентом, скрытые по дисплей:ноне 4. всю таблицу снёс за пределы экрана Нажимаете на что-нибудь - нужный блок разворачивается, а таблица позиционируется на весь экран поверх всего, и у вас по центру оказывается блочок с нужным содержимым. 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	17.12.2015, 17:03
	nikipor, это можно и на css сделать) 0

@nikipor 11 / 24 / 6 Регистрация: 05.01.2012 Сообщений: 478
	17.12.2015, 21:53
	Я привык верстать под ие6, веруя, что остальные браузеры сами собой всё скушают. Специально я этим не занимался, но почему-то кажется, что на css будет не кроссбраузерно. 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	18.12.2015, 23:33
	Enkille, ну это можно было через :hover сделать, о чём я писал) 0