Окно справка

 Это окно можно назвать окном с подсказкой или дополнительной информацией.

Опция очень удобна тем, что в любом месте контента можно вставить вот такую кнопочку ?, и при наведении на неё курсора, откроется окно с подсказкой.

Код очень простой, даже комментировать нечего.


HTML
<span class="quest">?<span class="hint">Текст подсказки</span></span>


CSS
.quest {
text-align: center;
font-weight: bold;
font-size: 18px;
padding: 0 5px;
color: #800000;
cursor: pointer;
border: 1px solid #888;
border-radius: 2px;
position: relative;
}

.hint {
position: absolute;
top: -110px;
left: 40px;
width: 100px;
padding: 30px;
display: none;
text-align: center;
font-weight: normal;
font-size: 16px;
color: #666;
background: #fff;
border-radius: 3px;
box-shadow:inset 0 0 2px 1px #888;
}
.quest:hover {
background: #FFA07A;
}
.quest:hover .hint {
display: block;
}

--------------------------------

КупитьПарусники 30х40см. 16000руб. Контакт