/*Подсказки*/
.tooltip
{
position: relative;
/*background: #eaeaea;*/
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}.tooltip span
{
visibility: hidden;
position: absolute;     
bottom: 50px;
left: 50%;
z-index: 999;
width: 100px;
margin-left: -60px;
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);     
}.tooltip:hover
{
border: 0; /* IE6 fix */
}.tooltip:hover span
{
visibility: visible;
}.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -8px;
left: 50%;
margin-left: -8px;     
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;     
border-bottom: 0;     
}.tooltip span:before
{
border-top-color: #ccc;
bottom: -9px;
}/* Yellow */.yellow-tooltip span
{border-color: #e1ca82;
background-color: #ffeaa6;     
}.yellow-tooltip span:after
{     
border-top-color: #ffeaa6;
}.yellow-tooltip span:before
{
border-top-color: #e1ca82;
}/* Navy */.navy-tooltip span
{
color: #fff;
text-shadow: 0 1px 0 #000;     
border-color: #161a1f;
background-color: #1e2227;
}.navy-tooltip span:after
{     
border-top-color: #1e2227;
}.navy-tooltip span:before
{
border-top-color: #161a1f;
}/* Blue */.blue-tooltip span     
{
border-color: #59add4;
background-color: #61bde7;
}.blue-tooltip span:after
{     
border-top-color: #61bde7;
}.blue-tooltip span:before
{
border-top-color: #59add4;
}/* Pink */.pink-tooltip span     
{
border-color: #ce4378;
background-color: #ea4c88;
}.pink-tooltip span:after
{     
border-top-color: #ea4c88;
}.pink-tooltip span:before
{
border-top-color: #ce4378;
}

<a href="#" class="tooltip yellow-tooltip"><img src="адрес картинки"><span><b>Текст в окне</b></span></a>