Перейти к содержимому


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


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 automega

automega

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 55 сообщений
  • ГородСамара

Отправлено 27 Март 2017 - 23:28

Доброго времени суток. Помогите пожалуйста мне.
Хочу сделать так, чтобы при наведении на некоторый текст всплывала подсказка.
Например: открываем товар http://amvaz.ru/good...0768#show_tab_3
Наводим на розница - появляется подсказка 1 с описанием
Наводим на опт 1 - тоже появляется подсказка, но уже с другим описание
Также наводим на опт 3 - появляется подсказка.
Потомучто люди спрашивать будут, что такое опт 1 и тд, хочу сразу всю информацию туда добавить.

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 28 Март 2017 - 18:32

Просмотр сообщенияautomega (27 Март 2017 - 23:28) писал:

Доброго времени суток. Помогите пожалуйста мне.
Хочу сделать так, чтобы при наведении на некоторый текст всплывала подсказка.
Например: открываем товар 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 automega

automega

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 55 сообщений
  • ГородСамара

Отправлено 28 Март 2017 - 19:49

Просмотр сообщенияMikDark (28 Март 2017 - 18:32) писал:

Здравствуйте. Вы можете в описании товара нажать кнопку Источник и в коде найти нужное слово. К примеру: Опт. Меняете его там на
<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 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 29 Март 2017 - 15:06

Добрый день. Для внесения изменений зайдите в  Редактор шаблона-->HTML и найдите:

<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 automega

automega

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 55 сообщений
  • ГородСамара

Отправлено 30 Март 2017 - 21:40

Спасибо огромное




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных