<div class="demo_content">
<p>Это <span>подсказка №1<i class="v1">Подсказка номер один</i></span>  Фон может быть <span class="r">красный<i class="v1">Подсказка №1 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v1">Подсказка №1 &#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v1">Подсказка №1 &#8211; синий цвет</i></span></p>
<hr />
<p>
Это <span>подсказка №2<i class="v2">Подсказка номер два</i></span>  Фон может быть <span class="r">красный<i class="v2">Подсказка №2 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v2">Подсказка №2 &#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v2">Подсказка №2 &#8211; синий цвет</i></span></p>
<hr />
<p>
Это <span>подсказка №3<i class="v3">Подсказка номер три</i></span>  Фон может быть <span class="r">красный<i class="v3">Подсказка №3 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v3">Подсказка №3&#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v3">Подсказка №3 &#8211; синий цвет</i></span></p>
<hr />
<p>
Это <span>подсказка №4<i class="v4">Подсказка номер четыре</i></span>  Фон может  быть <span class="r">красный<i class="v4">Подсказка №4 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v4">Подсказка №4 &#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v4">Подсказка №4 &#8211; синий цвет</i></span></p>
<hr />
</div>

.demo_content span {
background:#eee;
border:1px solid #444;
cursor:pointer;
display:inline-block;
outline:none;
padding:0 5px;
position:relative;
text-decoration:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
.demo_content span i {
visibility:hidden;
border:1px solid #444;
bottom:60px;
left:50%;
margin-left:-110px;
opacity:0;
padding:10px;
position:absolute; 
width:200px;
z-index:99;
background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));  
background-color: #eee;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.demo_content span:hover i {
bottom:30px;
opacity:0.95;
visibility:visible;
}
.demo_content span:hover i.v2 {
bottom:30px;
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
}
.demo_content span:hover i.v3 {
-webkit-transform:rotateX(360deg) scale(1.2);
-moz-transform:rotateX(360deg) scale(1.2);
-ms-transform:rotateX(360deg) scale(1.2);
-o-transform:rotateX(360deg) scale(1.2);
transform:rotateX(360deg) scale(1.2);
}
.demo_content span i.v4 {
height:70px;
margin-left:-60px;
padding-top:40px;
text-align:center;
width:100px;
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
-ms-border-radius: 50% 50% 50% 50%;
-o-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
}
.demo_content span i:before,.demo_content span i:after {
border-bottom:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid #444;
bottom:-8px;
content:"";
left:50%;
margin-left:-8px;
position:absolute;
z-index:100;
}
.demo_content span.r {
background:#f88;
}
.demo_content span.r i {
background-color:#f44;  
border:1px solid #f44;
}
.demo_content span.r i:before, .demo_content span.r i:after {
border-top-color:#f44;
}
.demo_content span.g {
background:#8f8;
}
.demo_content span.g i {
background-color:#4f4;  
border:1px solid #4f4;
}
.demo_content span.g i:before, .demo_content span.g i:after {
border-top-color:#4f4;
}
.demo_content span.b {
background:#88f;
}
.demo_content span.b i {
background-color:#44f;  
border:1px solid #44f;
}
.demo_content span.b i:before, .demo_content span.b i:after {
border-top-color:#44f;
}