Сообщений в теме: 4

[Ast]

Аккаунт SL-368333
Можно ли реализовать, чтобы при наведении курсора на слово или символ появлялась всплывающая текстовая подсказка, как это сделано на сайте?  http://www.mosokna.r...astikovye-okna/

Прикрепленные изображения

• 

[Vaccina]

Если использовать стандартные средства браузера, то в текст достаточно добавить

title="текст всплывающей подсказки"

Пример, было:

<p>Текст</p>

стало:

<p title="текст всплывающей подсказки">Текст</p>

Уточните пожалуйста, какому элементу вы хотите добавить ее? Это необходимо для более детальной инструкции.

[Ast]

Vaccina (17 Май 2016 - 05:50) писал:

Если использовать стандартные средства браузера, то в текст достаточно добавить

title="текст всплывающей подсказки"

Пример, было:

<p>Текст</p>

стало:

<p title="текст всплывающей подсказки">Текст</p>

Уточните пожалуйста, какому элементу вы хотите добавить ее? Это необходимо для более детальной инструкции.

Это не совсем то. Посмотрите пожалуйста как реализовано в примере. При наведении курсора на вопросительный знак всплывает карточка в которой сформирован заголовок и текст. Хотелось бы так же, но видимо нужен скрипт.

[Firefly]

Ast (17 Май 2016 - 08:42) писал:

Это не совсем то. Посмотрите пожалуйста как реализовано в примере. При наведении курсора на вопросительный знак всплывает карточка в которой сформирован заголовок и текст. Хотелось бы так же, но видимо нужен скрипт.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Выберите требуемый шаблон, например Товары, в нужном месте вставьте код:

				  <a href="#" class="tooltip gray-tooltip" data-title="Это подсказка.">Текст</a>

Укажите в данном коде нужный текст и текст всплывающей подсказки.

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:

/* Tooltip */
.tooltip {
		position: relative;
		cursor: help;
		display: inline-block;
		text-decoration: none;
		color: #fff;
		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:#fff;
}
.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;
}

[Ast]

Спасибо, все получилось!