Ставим в css файл или между тэгами style
Интересный способ реализации всплывающих подсказок
Code
/*стиль видимого текста */
.tooltip {
border-bottom: 1px dashed #AB0229 !important;
color:#AB0229 !important;
outline: none;
cursor: help;
text-decoration: none !important;
position: relative;}
.tooltip span {
margin-left: -999em;/*для вправления мозга IE Но моё мнение, пусть ие6 катится лесом*/
position: absolute;
}
/* стиль подсказки при наведении*/
.tooltip:hover span {text-decoration: none !important;
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 15px;
top: 20px;
z-index: 99;
margin-left: 0;
width: 250px;
}
/* сокрытие подсказки без наведения курсора */
.tooltip em {
display: none;
}
/* стиль картинки в подсказке при наведении*/
.tooltip:hover img {
border: 0;
margin: -5px 0 0 -30px;
float: left;
position: absolute;
}
/* стиль текста подсказки при наведении*/
.tooltip:hover em { color:#491919 !important;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
display: block;
padding: 15px;
text-decoration: none;
}
/*вправка мозга для IE. Но моё мнение, пусть IE катится лесом/
* html a:hover { background: transparent; }
/* стиль табличкм при наведении*/
.info{background: url(backpost.gif); border: 1px solid #491919 }
/* положение содержимого в подсказке*/
.classic { padding: 0.9em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
/* Лечим голову Safari*/
.tooltip a{ color:#AB0229 !important;
text-decoration:none !important;}
.tooltip a:link { color:#AB0229 !important;
text-decoration:none !important;}
.tooltip a:active { color:#AB0229 !important;
text-decoration:none !important;}
.tooltipa a:visited { color:#AB0229 !important;
text-decoration:none !important;}
.tooltip a:hover{ color:#AB0229!important;
text-decoration:none !important;}
.tooltip {
border-bottom: 1px dashed #AB0229 !important;
color:#AB0229 !important;
outline: none;
cursor: help;
text-decoration: none !important;
position: relative;}
.tooltip span {
margin-left: -999em;/*для вправления мозга IE Но моё мнение, пусть ие6 катится лесом*/
position: absolute;
}
/* стиль подсказки при наведении*/
.tooltip:hover span {text-decoration: none !important;
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 15px;
top: 20px;
z-index: 99;
margin-left: 0;
width: 250px;
}
/* сокрытие подсказки без наведения курсора */
.tooltip em {
display: none;
}
/* стиль картинки в подсказке при наведении*/
.tooltip:hover img {
border: 0;
margin: -5px 0 0 -30px;
float: left;
position: absolute;
}
/* стиль текста подсказки при наведении*/
.tooltip:hover em { color:#491919 !important;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
display: block;
padding: 15px;
text-decoration: none;
}
/*вправка мозга для IE. Но моё мнение, пусть IE катится лесом/
* html a:hover { background: transparent; }
/* стиль табличкм при наведении*/
.info{background: url(backpost.gif); border: 1px solid #491919 }
/* положение содержимого в подсказке*/
.classic { padding: 0.9em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
/* Лечим голову Safari*/
.tooltip a{ color:#AB0229 !important;
text-decoration:none !important;}
.tooltip a:link { color:#AB0229 !important;
text-decoration:none !important;}
.tooltip a:active { color:#AB0229 !important;
text-decoration:none !important;}
.tooltipa a:visited { color:#AB0229 !important;
text-decoration:none !important;}
.tooltip a:hover{ color:#AB0229!important;
text-decoration:none !important;}
И в нужное место ХТМЛ КОДА
<a href="#" class="tooltip">Симпатичная всплывающая подсказка <span class="custom info"> <img alt="Долой ишак" src="/wp-content/uploads/icons/Fjupg.png" height="50" width="50" /> <em>Когда же сдохнет IE6, что бы можно было использовать CCS нормально</em></span></a> на чистом<a href="#" class="tooltip"> css <span class="custom info"> <img alt="Долой ишак" src="/wp-content/uploads/icons/lGDAi.png" height="50" width="50" /> <em>Cascading Style Sheets — каскадные таблицы стилей</em></span></a>
Отступы,шрифты, фон и цвета выставляйте СВОИ
Em Calculator
Симпатичная всплывающая подсказка
Когда же сдохнет IE6, что бы можно было использовать CCS нормально
на чистом css
Cascading Style Sheets — каскадные таблицы стилей