Контекстная справка на чистом CSS для вашего сайта

В написании веб-приложений или как в нашем случае для сайта часто возникает необходимость в создании контекстной справки. Это нужно чтобы пояснить пользователю какую-либо часть интерфейса в том месте где может возникнуть непонимание его значения. Один из способов – это создать отдельную страницу с ответами на вопросы и оставлять на них ссылку. Но это не очень удобно, так как пользователи могут запутаться.

Посмотреть Demo

Лучшим вариантом является сделать всплывающую контекстную справку там, где это будет необходимо. А делается это довольно просто используя только CSS и HTML. Первый шаг – разметка HTML и надпись для контекстной справки.

HTML

<div class="help">
    <p>HTML — стандартный язык разметки документов во Всемирной паутине.</p>
</div>

Элемент параграф <p> отображается как черный прямоугольный фон для справки.
Блок div с классом help – образовывает иконку в виде знака вопроса.

Контекстная справка по умолчанию является скрытой, открывается только после наведения курсора мыши на нее. Справка может содержать внутри себя ссылки, изображения, любые теги HTML. А показ справки появляется плавно благодаря CSS анимации. Это создается, как говорилось выше, только с использованием CSS.

CSS

.help{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background: #EC7164;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help p{        /* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}
@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

Браузер Chrome все еще нуждается в префиксе -webkit для ключевых кадров анимации, поэтому используется два варианта. Благодаря этой анимации элемент (Контекстная справка) плавно появляется наращивая непрозрачность. Анимация срабатывает только при наведении курсора на значок контекстной справки. Пока курсор будет находиться на значке, справка будет развернута на экране.

Важное. У блока help задано значение position:absolute; следовательно родителю, то есть блоку в котором будет находится подсказка задать значение position:relative; чтобы значок отображался в правом верхнем углу.

Источник: http://tutorialzine.com/2014/07/css-inline-help-tips/