Как сделать независимые элементы div?

Question

[Антон Вертов]

На сайте есть иконка.
Её код:

<div class="serviceIcon pull-right">
      <i class="icon-tie"></i>
</div>

Её стиль:

.serviceIcon{
    background: #de3c2f none repeat scroll 0 0;
    border-radius: 50%;
    height: 80px;
    text-align: center;
    width: 80px;
    padding-top: 23px;
    -webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}
.serviceIcon i{
    display: inline-block;
    font-size: 32px;
    color: #fff;
    -webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}

Я хочу, чтобы при наведении на эту иконку всплывала подсказка (тултип). Стиль всплывающей подсказки такой:

.htooltipop span { /* Внешний вид нашего тултипа */
	background-color: rgba(255,255,255, 0.7);
	border-radius: 15px 15px 15px 15px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	color: #000000;
	margin-left: -90%;
	margin-top: -24%;
	opacity: 0; /* Делаем его прозрачным */
	padding: 14px;
	position: absolute;
	text-decoration: none;
	visibility: hidden; /* И прячем */
	width: 350px;
	z-index: 10;
	display: inline-block;
	font-family: 'Times New Roman', sans-serif;
    font-size: 0.6em;
    color: #464646;
    text-align: center;
    line-height: 1.2;
}
		
.htooltipop:hover span { /* По hover отображаем тултип */
	opacity: 1;
	visibility: visible;
}

В итоге я пишу код:

<div class="htooltipop">
   <div class="serviceIcon pull-right">
      <i class="icon-tie"></i>
   </div>
</div>

И у меня некорректно отображается элемент и не работает разумеется всплывающая подсказка.
Подскажите пожалуйста, как правильно объединить элементы, чтобы при наведении на иконку, у меня всплывала подсказка. Заранее большое спасибо.

Answer 1

[Павел]

А где span в коде?

Comments

[Антон Вертов]

после того, как заключаю этот значок в span элемент вообще пропадает

[Павел]

1Frosty:

<div class="htooltipop">
<span>Подсказка тут</span>
   <div class="serviceIcon pull-right">
      <i class="icon-tie"></i>
   </div>
</div>