Как сделать всплывающую подсказку в HTML и CSS?
Категория: Сайтостроение, Опубликовано: 2017-07-28
Автор: Юлия Гусарь
Приветствую вас на сайте Impuls-Web!
Довольно часто возникает необходимость сделать всплывающую подсказку html для того, что бы пояснить пользователю какой-то момент на странице сайта, или, к примеру, сделать пояснение к изображению, которое будет появляться при наведении на него указателя мышки.
В сегодняшней статье я покажу вам два простых способа, с помощью которых с легкостью делается всплывающая подсказка html-кодом и css-стилями.
Навигация по статье:
- Всплывающая подсказка HTML
- Всплывающая подсказка CSS
Всплывающая подсказка HTML
Итак, для создания всплывающей подсказки html мы можем использовать атрибут title, который можно присвоить для любого элемента на странице. В случае если данный атрибут задан для какого либо элемента, то при наведении указателя мышки на данный элемент будет появляться всплывающая подсказка.
Например:
<a href=»#» title=»Скачайте свежий прайс-лист»>Скачать</a>
<a href=»#» title=»Скачайте свежий прайс-лист»>Скачать</a> |
Результат:
Скачать
Или вот еще один пример с использованием картинки:
<a href=»//impuls-web.ru/css-animaciya-poyavleniya-bez-plaginov/»> <img src=»//impuls-web.ru/wp-content/uploads/2017/06/animate-min.jpg» alt=»CSS анимация для сайта» title=»Перейти на статью: CSS-анимация появления без плагинов»/> </a>
<a href=»//impuls-web.ru/css-animaciya-poyavleniya-bez-plaginov/»> <img src=»//impuls-web.ru/wp-content/uploads/2017/06/animate-min.jpg» alt=»CSS анимация для сайта» title=»Перейти на статью: CSS-анимация появления без плагинов»/> </a> |
Результат:
Как видите все просто, но данная всплывающая подсказка html имеет ряд своих недостатков. А именно, все параметры отображения, такие как шрифт, цвет, размер задаются исходя из параметров браузера, и вы ни как не можете на них повлиять.
Всплывающая подсказка CSS
Второй способ заключается в том, что мы можем создать всплывающую подсказку CSS, и задать для нее такое визуальное оформление, как нам нужно. Для этого мы создадим дополнительный блок после элемента, для которого нужно сделать всплывающую подсказку CSS, в нем разместим нужный текст, а затем css-стилями зададим нужные параметры визуализации.
HTML-код:
<div> <a href=»//impuls-web.ru/kak-zadat-rasstoyanie-mezhdu-strok-css/»><img src=»//impuls-web.ru/wp-content/uploads/2017/07/line-height.jpg» alt=»Расстояние между строк CSS» /></a> <div>Перейти на статью: Как задать расстояние между строк CSS?</div> </div>
1 2 3 4 5 6 7 | <div>
<a href=»//impuls-web.
<div>Перейти на статью: Как задать расстояние между строк CSS?</div>
</div> |
CSS-стили:
.img-text{ position:relative; display:block; width:300px; /*задаём ширину блока*/ margin:auto; } .podskazka{ margin:0px!important; opacity: 0; position: absolute; width: 100%; left: 0; /*отступ слева*/ top: 105px; /*отступ сверху*/ padding:8px 0px; font-weight:bold; background: #444; /*задаём цвет фона*/ color: #fff!important; text-align: center; /*выравнивание текста*/ font-size: 14px; /*размер шрифта*/ transition: all 0.6s; } .img-text:hover .podskazka{ opacity: 0.8; /*задаём уровень прозрачности*/ }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | . img-text{ position:relative; display:block; width:300px; /*задаём ширину блока*/ margin:auto; }
.podskazka{ margin:0px!important; opacity: 0; position: absolute; width: 100%; left: 0; /*отступ слева*/ top: 105px; /*отступ сверху*/ padding:8px 0px; font-weight:bold; background: #444; /*задаём цвет фона*/ color: #fff!important; text-align: center; /*выравнивание текста*/ font-size: 14px; /*размер шрифта*/ transition: all 0.6s; }
.img-text:hover .podskazka{ opacity: 0.8; /*задаём уровень прозрачности*/ } |
Вот что получится:
Перейти на статью: Как задать расстояние между строк CSS?
Данными стилями мы задаем стилизацию нашей подсказке и делаем ее полностью прозрачной. А далее при наведении указателя мышки на картинку, делаем ее видимой.
Конечно данный способ создания всплывающей подсказки CSS немного трудоемкий в плане кода, но вы можете сделать заготовку для различных случаев, а потом просо подставлять нужные классы для элементов с подсказками.
Надеюсь, моя статья будет для вас полезна и поможет вам сделать удобные и информативные подсказки. Если данная статья вам понравилась, обязательно оставьте комментарий, поделитесь ею в социальных сетях и подпишитесь на мою рассылку.
Желаю вам удачи! До встречи в следующих статьях!
С уважением Юлия Гусарь
Показ описания при наведении на картинку
Руслан066
Новичок
- #1
Друзья, перерыл весь интернет на 2 языках.
При наведении на картинку(hover еффект) в выводе продуктов в основном разделе, и категории конкретные — показ короткого описания товара.
Буду очень признателен за помощь.
rikitiki
Специалист
- #2
Руслан066 написал(а):
При наведении на картинку(hover еффект) в выводе продуктов в основном разделе, и категории конкретные — показ короткого описания товара.
Нажмите для раскрытия…
Как-то замысловато написано. Фиг поймёшь.
Если вам попросту всплывающий текст в витрины вставить то:
http://innka. info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
На мой взгляд лучше обычного hover, так как в этом варианте div c текстом за курсором бегает.
Руслан066
Новичок
- #3
rikitiki написал(а):
Как-то замысловато написано. Фиг поймёшь.
Если вам попросту всплывающий текст в витрины вставить то:
http://innka. info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
На мой взгляд лучше обычного hover, так как в этом варианте div c текстом за курсором бегает.Нажмите для раскрытия…
http://pomodoro.od.ua/category/1 вот пример, так можно сделать?
rikitiki
Специалист
- #4
Руслан066 написал(а):
http://pomodoro.od.ua/category/1 вот пример, так можно сделать?
Нажмите для раскрытия…
Тогда просто в css hover, курсив, да слой тень на плетень
rikitiki
Специалист
- #5
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
<div data-hash=»4 гриба» id_goods=»15″>
<img src=»http://pomodoro.od.ua/files/goods/middle_bez-imeni-3.jpg»>
<a href=»#»>
<div>
<span> Белые грибы, Вешанки, Шампиньоны, Фирменный белый соус, Лисички с зеленью </span>
</a>
<div></div>
<span>код товара: 15</span>
</div>
.category_content .home_content_item a span.desck {
display: none;
font-size: 12px !important;
text-transform: lowercase;
top: 78px;
width: 180px;
}
Руслан066
Новичок
- #6
rikitiki написал(а):
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
}Нажмите для раскрытия…
Если Вы не против, давайте разберемся какие файлы следует изменить для этого и что куда прописывать.
Я полагаю следует создать див.дескрипшн в каком-то .php файле, затем прописать ему стиль в каком-то .css файле.
Как называются эти файлы?
Помодоро — этом устаревший модх версии до 2010 года, я буду делать на вукумерс свежей версии и вп.
http://themeforest.net/item/sellya-responsive-woocommerce-theme/full_screen_preview/5418581
вот еще пример, очень нравится, так аккуратно сделано, хочу повторить.
Руслан066
Новичок
- #7
rikitiki написал(а):
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
}Нажмите для раскрытия…
Попробовал повторить урок с вашей ссылки, чтобы разобраться во всем.
1. Добавил в functions скрипт — появилось короткое описание в конце вывода товара.
2. Добавил в styles — скрытие этого описания — ничего не происходит.
3. Добавил в footer — скрипт при наведении — ничего не происходит.
rikitiki
Специалист
- #8
Я вам в первом посте ссылку дал на статью своего сайта. Там два кода для вставки в витрину. Если хотите полями выводить то вставьте первый, а если кратким описание то второй. Первый более универсален так как идёт как бы дополнением.
Когда в витрине повится то спрячьте его display.none.
Но есть одна тонкость для вашего случая — описание должно выводиться в теге a, в коде же оно под тегом. В моём случае это было безразлично поскольку не загораживает ссылку.
Не уверен, но возможно последовательность во втором коде можно поправить изменив девятку.
Дайте время вспомнить, подумать обмозговать. Возможно форумчанин seachпman появится и даст совет. Он лучше моего php знает.
Последнее редактирование:
rikitiki
Специалист
- #9
Руслан066 написал(а):
Попробовал повторить урок с вашей ссылки, чтобы разобраться во всем.
1. Добавил в functions скрипт — появилось короткое описание в конце вывода товара.
2. Добавил в styles — скрытие этого описания — ничего не происходит.
3. Добавил в footer — скрипт при наведении — ничего не происходит.Нажмите для раскрытия…
1 — это правильно.
2 — в простейшем случае путь указывается .woocommerce ul.products li.product div.short_description,
но может повлиять тема и плагины. Надо глянуть в файербаге. Было бы проще если вы дали ссылку на вашу витрину.
3.- В футер ничего добавлять не нужно. Это для случая когда hover через скрипт выводится, а у вас через css/
Руслан066
Новичок
- #10
rikitiki написал(а):
Я вам в первом посте ссылку дал на статью своего сайта.
Нажмите для раскрытия…
http://themeforest.net/item/flatsome-responsive-woocommerce-theme/full_screen_preview/5484319
Вот тема, которая мне понравилась, пробейте пожалуйста, вот этот путь:
.woocommerce ul.products li.product div.short_description{
display: none;
}
Походу «.woocommerce ul.products li.product» здесь, должно быть что-то другое, потому что «Короткое описание появляется, но не скрывается» думаю ошибка в пути, если решим это, ваш урок получиться, а hover уже сам додумаю как сделать.
И вы не подскажите есть ли файл в WooCommerce подобной структуры:
— Product Title
— Featured Image
— Price
— Add to cart button
Что бы я мог сам настроить отображение товара.
АП:
посмотрите заодно пожалуйста уже и как называется картинка товара
$(‘.woocommerce ul.products li’).mousemove(function(event) { // li — элемент при наведении на который показывается текст
для этого.
rikitiki
Специалист
- #11
У-у-у… Flatsome. Сегодня уже видел варианть в соседней теме.
И три блока хавером выводятся, а вы ещё собираетесь четвёртый повесить. Выделил их жирным. Два в теге как вам нужно, а третий вне тега как у вас сейчас
<ul>
…….
<li>
<div>
<a href=»http://flatsome.uxthemes.com/product/beyond-top-nly-trend/»>
<div>
<div>
<div>
<img alt=»917542-0001_2″ src=»http://41hmj38vkl98fqzebjp1112g.wpe…ds/sites/2/2013/08/917542-0001_2-247×300. jpeg»>
</div>
<div data-prod=»149″>Quick View</div>
</div>
</a>
<div>
</div>
</li>
Сотвеетственно, если от тега li плясать то до обратной картинки то что в теге a li.product-small grid1 grid-normal div.inner-wrap a div.back-image, а вне тега ка к кувас сейчас: li.product-small grid1 grid-normal div.inner-wrap a div.info style-grid1.
Но это на демо http://themeforest.net/item/flatsome-responsive-woocommerce-theme/full_screen_preview/5484319
А у вас может быть в зависимости от настроек другой путь.
rikitiki
Специалист
- #12
Руслан066 написал(а):
И вы не подскажите есть ли файл в WooCommerce подобной структуры:
— Product Title
— Featured Image
— Price
— Add to cart button
Что бы я мог сам настроить отображение товара.Нажмите для раскрытия…
Настройки могут быть в редактроре темы, может в каких-либо плагинах, но лучше установите файербаг, выделив какой-либо требуемый элемент и узнайте класс или id. А потом вносите правки в css.
Войдите или зарегистрируйтесь для ответа.
Поделиться:
WhatsApp Электронная почта Ссылка
html — CSS Hover только на текст?
Задавать вопрос
спросил
Изменено 2 года, 6 месяцев назад
Просмотрено 10 тысяч раз
Если у меня есть следующий HTML-код с пользовательским классом CSS:
. custom_list_item { черный цвет; } .custom_list_item:наведите { красный цвет; }
Test
Таким образом, при наведении курсора на все поле текст становится красным. Есть ли способ убедиться, что это происходит только при наведении курсора только на сам текст?
- HTML
- CSS
- текст
- наведение
3
Завернуть в диапазон
. p
растянется на всю ширину div
.
.custom_list_item { черный цвет; } .custom_list_item диапазон: наведение { красный цвет; }
Тест
1
Оберните его в диапазон, затем введите стиль:
.custom_list_item { черный цвет; } .custom_list_item диапазон: наведите { красный цвет; }
<дел>
Тест
2
Измените свойство display этого div с block
на inline-block
. Никаких дополнительных элементов, таких как пролеты, не требуется.
.custom_list_item { черный цвет; дисплей: встроенный блок; } .custom_list_item:наведите { красный цвет; }
Test
Элементы Div по умолчанию являются элементами блочного уровня и занимают всю ширину своего родительского элемента.
Вы можете обернуть диапазон для своего div и установить диапазон: hover
.custom_list_item { черный цвет; } диапазон: наведите { красный цвет; } дел { граница: 3 пикселя сплошного красного цвета; }
Тест
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как сделать небольшой стилизованный текст при наведении — HTML и CSS — Форумы SitePoint
Codeman 1
Как сделать небольшой стилизованный текст при наведении? как текст в белом поле, но он стилизован. Я хочу, чтобы цвет текста был белым, а фон черным, и он появляется через 0,1 секунды при наведении. Текст должен отображать Недоступно или нет предыдущей страницы .
HTML:
« Назад Далее »
CSS:
.aa { текстовое оформление: нет; отображение: встроенный блок; отступ: 8px 16px; } .аа:наведите { цвет фона: #ddd; черный цвет; текстовое оформление: нет; вес шрифта: полужирный; } .предыдущий { цвет фона: серый; черный цвет; семейство шрифтов: 'Fira Code', моноширинный; курсор: не разрешено; } .следующий { положение: абсолютное; цвет фона: #a1ff3d; черный цвет; семейство шрифтов: 'Fira Code', моноширинный; справа: 0%; } .nv:наведите { цвет фона: серый; черный цвет; семейство шрифтов: 'Fira Code', моноширинный; курсор: не разрешено; }
Мученик2 2
Ты про «титулы»? Вы можете просто добавить к своей ссылке атрибут title, как показано ниже…
« Предыдущая
При наведении на него появится всплывающее окно с всплывающей подсказкой.
Если вы хотите что-то более стилизованное, то вы всегда можете вставить в ссылку элемент, скрытый, конечно, стилизованный, и при наведении он отображается. Очень похоже на то, как работают некоторые навигационные меню CSS.
Например, вы можете сделать это…
« Предыдущий Недоступно
.подсказка { дисплей: нет; } .nv { отображение: относительное; } .nv: наведение .tooltip { дисплей: блок; положение: абсолютное; Топ 10; слева: 20; набивка: .5em; цвет фона: красный; белый цвет; }
Связанная скрипка: https://jsfiddle.net/coderslexicon/q48yrLoe/6/
Codeman 3
но я хочу в стиле
Martyr2 4
Я предполагаю, что вы не видели вторую половину моего ответа и проверьте скрипку. Где это стилизовано.
Что касается всплывающей подсказки по умолчанию, вы не можете ее стилизовать. На самом деле он рисуется браузером, а не чем-то, что вы контролируете. Но опять же, посмотрите мою скрипку, и вы быстро увидите, что это может быть что-то, что вы можете стилизовать так, как хотите.
1 Нравится
Кодмен 5
Хорошо, спасибо, я прочитал код, но не увидел скрипку, потому что по умолчанию результат CodePen или обычные ссылки имеют описания, поэтому я не видел ссылку.