1. Home
  2. /
  3. Уроки css
  4. /
  5. Всплывающие подсказки на CSS

Всплывающие подсказки на CSS

Ставим в 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;}


И в нужное место ХТМЛ КОДА



<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 — каскадные таблицы стилей


предыдущий
следующий


  1. Home
  2. /
  3. Уроки css
  4. /
  5. Всплывающие подсказки на CSS

Архивы

Рубрики

Друзья сайта

Метки

Яндекс.Метрика