[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Куда вставить этот код?
Evg82
Всплывающ подсказку в одном месте удалось реализовать.
Вот ее код

<a class="help1" href="#"><img src="http://www.ataora.ru/images/vopros_podskazka.png" width="20px" alt="подсказка" /><span class="airhelp1">
<p>текст <img src="/source/images/atamoney.png" width="20px"></p></span></a>
Просто вставил между тегами div


Теперь тоже самое нужно сделать в этой части кода


<div class="row content">
<div class="col-lg-8 col-md-8 left-content">
<? foreach($arResult['LEFT'] as $arItem):?>
<div class="col-lg-12 col-md-12 item <?=$arItem['typeshow'] ?>">
<? if($arItem['USEATA']=="Y"):?><img src="/source/images/atamoney.png"><? endif;?>
<div class="item-image">
......далее идет код

Эта часть кода отвечает за вывод вот этого значка http://prntscr.com/812pbm когда пользователь при создании объявления выбрал = "да"

Вот к этому значку нужно прицепить всплывашку.

Все мои манипуляции с кодом приводят к тому что текст всплывашки на поверхности а самой всплывашки как бы и нет.
В css может какие записи нужны?

В css готовый код
.help1 {
color: #2C8505; outline: none; /*цвет подсказки*/
cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/
position: relative; /*позиция*/
left: -220px;
z-index: 3;
}

/*положение всплывающей подсказки*/
.help1 span {
margin-left: -999em;
position: absolute;
}

/*подсказка при наведении курсора*/
.help1:hover span {
font-family: Verdana, Tahoma, Geneva, sans-serif; /*шрифт*/
position: absolute; /*позиция*/
left: 10px;
top: 25px;
z-index: 99;
margin-left: 0;
width: 400px; /*ширина блока подсказки*/
}

/*параметры изображения*/
.help1:hover img {
border: 0;
}

/*блок всплывающей подсказки*/
.airhelp1 {
background: none repeat scroll 0 0 rgba(97, 177, 255, 0.9); /*цвет и прозрачность фона*/
border: 1px solid #2b82b8; /*параметры бордюра*/
border-radius: 5px; /*закругление углов*/
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/
color: #fff; /*цвет шрифта всплывающей подсказки*/
padding: 5px; /*внутренний отступ*/
}

Подскажите как правильно код прописать чтобы при наведении курсора была всплывашка?
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.