Доброго времени суток. Помогите пожалуйста мне.
Хочу сделать так, чтобы при наведении на некоторый текст всплывала подсказка.
Например: открываем товар http://amvaz.ru/good...0768#show_tab_3
Наводим на розница - появляется подсказка 1 с описанием
Наводим на опт 1 - тоже появляется подсказка, но уже с другим описание
Также наводим на опт 3 - появляется подсказка.
Потомучто люди спрашивать будут, что такое опт 1 и тд, хочу сразу всю информацию туда добавить.
0
Всплывающая Подсказка
Автор automega, 27 марта 2017 23:28
Сообщений в теме: 4
#1
Отправлено 27 Март 2017 - 23:28
#2
Отправлено 28 Март 2017 - 18:32
automega (27 Март 2017 - 23:28) писал:
Доброго времени суток. Помогите пожалуйста мне.
Хочу сделать так, чтобы при наведении на некоторый текст всплывала подсказка.
Например: открываем товар http://amvaz.ru/good...0768#show_tab_3
Наводим на розница - появляется подсказка 1 с описанием
Наводим на опт 1 - тоже появляется подсказка, но уже с другим описание
Также наводим на опт 3 - появляется подсказка.
Потомучто люди спрашивать будут, что такое опт 1 и тд, хочу сразу всю информацию туда добавить.
Хочу сделать так, чтобы при наведении на некоторый текст всплывала подсказка.
Например: открываем товар http://amvaz.ru/good...0768#show_tab_3
Наводим на розница - появляется подсказка 1 с описанием
Наводим на опт 1 - тоже появляется подсказка, но уже с другим описание
Также наводим на опт 3 - появляется подсказка.
Потомучто люди спрашивать будут, что такое опт 1 и тд, хочу сразу всю информацию туда добавить.
Здравствуйте. Вы можете в описании товара нажать кнопку Источник и в коде найти нужное слово. К примеру: Опт. Меняете его там на
<div class="photo" data-title="Описание опта">Опт</div>
Далее в шаблон main.css добавьте:
.photo::after { content: attr(data-title); } .photo:hover::after { content: attr(data-title); } .photo { display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */ } .photo:hover::after { content: attr(data-title); /* Выводим текст */ position: absolute; /* Абсолютное позиционирование */ left: 20%; top: 30%; /* Положение подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }
#3
Отправлено 28 Март 2017 - 19:49
MikDark (28 Март 2017 - 18:32) писал:
Здравствуйте. Вы можете в описании товара нажать кнопку Источник и в коде найти нужное слово. К примеру: Опт. Меняете его там на
Далее в шаблон main.css добавьте:
<div class="photo" data-title="Описание опта">Опт</div>
Далее в шаблон main.css добавьте:
.photo::after { content: attr(data-title); } .photo:hover::after { content: attr(data-title); } .photo { display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */ } .photo:hover::after { content: attr(data-title); /* Выводим текст */ position: absolute; /* Абсолютное позиционирование */ left: 20%; top: 30%; /* Положение подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }
Вот код опт 2:
<p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}"> Опт 2
<span class="price">{GOODS_MOD_PRICE_SUPPLIER | money_format}</span><br>
</p>
Что конкретно нужно поменять, чтобы добавилась подсказка. В майн добавил ваш код.
#4
Отправлено 29 Март 2017 - 15:06
Добрый день. Для внесения изменений зайдите в Редактор шаблона-->HTML и найдите:
замените на:
далее в зайдите в main.css и в конце кода вставьте:
<meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/> <p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}"> Опт 2 <span class="price">{GOODS_MOD_PRICE_SUPPLIER | money_format}</span><br> </p> <p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}"> Опт 1 <span class="price">{GOODS_MOD_PRICE_OLD | money_format} </span> </p><br> <p class="special-price goodsDataMainModificationPriceNow {CURRENCY_CHAR_CODE}"> <span class=price_roz>Розница</span> <span class="price" itemprop="price" content="{GOODS_MOD_PRICE_NOW}">{GOODS_MOD_PRICE_NOW | money_format}</span> </p>
замените на:
<meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/> <p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}"> <a href="#" class="tooltip gray-tooltip" data-title="Это подсказкаОпт2.">Опт 2</a> <span class="price">{GOODS_MOD_PRICE_SUPPLIER | money_format}</span><br> </p> <p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}"> <a href="#" class="tooltip gray-tooltip" data-title="Это подсказка_Опт1.">Опт 1</a> <span class="price">{GOODS_MOD_PRICE_OLD | money_format} </span> </p><br> <p class="special-price goodsDataMainModificationPriceNow {CURRENCY_CHAR_CODE}"> <span class=price_roz> <a href="#" class="tooltip gray-tooltip" data-title="Это подсказка_Розница">Розница</a> </span> <span class="price" itemprop="price" content="{GOODS_MOD_PRICE_NOW}">{GOODS_MOD_PRICE_NOW | money_format}</span> </p>
далее в зайдите в main.css и в конце кода вставьте:
/* Tooltip */ .tooltip { position: relative; cursor: help; display: inline-block; text-decoration: none; color: #09afe7; outline: none; text-indent: 0; padding: 0 3px; } .tooltip:hover:before { content: attr(data-title); white-space: pre-line; position: absolute; bottom: 30px; left: 50%; z-index: 9999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #ccc; opacity: .9; background-color: #ddd; background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4); color:#0000ff; } .tooltip:hover:after { content: ""; position: absolute; z-index: 10000; bottom: 24px; left: 50%; margin-left: -8px; border-top: 8px solid #ddd; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } /* Gray */ .gray-tooltip:hover:before { border-color: #696969; background-color: #696969; } .gray-tooltip:hover:after { border-top-color: #696969; }
#5
Отправлено 30 Март 2017 - 21:40
Спасибо огромное
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных