tooltip

by Евгений

HTML

<div style="margin:30px;">
    <a class="tooltip" href="#">
  Ссылка
  <span>Подсказка<small></small></span>
</a>
</div>

CSS

/* tooltip */
 
.tooltip { position: relative; }
.tooltip span {
  position: absolute;
  right: 0;
  top: -20px;
  display: none;
  min-width: 50px;
  padding: 3px 8px;
  white-space: nowrap;
  font-size: 11px;
  text-align: left;
  background-color: rgba(0,0,0,.8);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  color: #fff;
}
.tooltip span small {
  position: absolute;
  left: 10px;
  bottom: -6px;
  border-top: 6px solid rgba(0,0,0,.8);
  border-right: 6px solid transparent;
}
.tooltip:hover span { display: block; }


/* для IE */
 
.tooltip span { background-color: #000; }
.tooltip span small { border-top: 6px solid #000; }
 
/* фиксим проблему со стрелочкой в IE 6 */
 
*html .tooltip span small {
  border-left: 6px solid #363636; /* Соответствует цвету фона */
}
 
/* фиксим проблему в IE 8 */
 
.tooltip span { background-color /*\**/: #000\9  }
.tooltip span small { border-top /*\**/: 6px solid #000; }