При создании веб-приложения нередко может возникнуть необходимость в предоставлении пользователям дружественных всплывающих подсказок, объясняющих особенности интерфейса. Можно сделать это, используя ссылки на отдельные страницы с текстами, разъясняющими соответствующие темы. Но тогда пользователи могут забыть, чем они занимались до перехода по таким ссылкам, что не очень дружественно. Более удачный путь — показать разъясняющий текст прямо там, где он нужен. В этом уроке мы покажем, как этого можно добиться с помощью нескольких правил CSS и небольшого количества кода HTML.

Код HTML 

Первым делом запишем разметку для всплывающей подсказки. Вот как она может выглядеть:

<div class="help-tip">
        <p>This is the inline help tip! It can contain all kinds of HTML. Style it as you please.</p>
</div>

Элемент абзаца отображается как текст всплывающей подсказки на черном фоне, а блок класса .help-tip — это голубой круг со знаком вопроса внутри.

Всплывающая подсказка с помощью CSS 

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

Код CSS 

Все это реализуемо с помощью короткого кода CSS, который можно найти в таблице стилей style.css в архиве, находящемся по ссылке для скачивания:

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

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

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

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

}

.help-tip p{    /* Всплывающая подсказка */
        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-tip p:before{ /* Указатель всплывающей подсказки */
        position: absolute;
        content: '';
        width:0;
        height: 0;
        border:6px solid transparent;
        border-bottom-color:#1E2021;
        right:10px;
        top:-12px;
}

.help-tip p:after{ /* Не позволить исчезнуть всплывающей подсказке */
        width:100%;
        height:40px;
        content:'';
        position: absolute;
        top:-40px;
        left:0;
}

/* Анимация CSS */

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

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

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

Важно обратить внимание, что блоку, содержащему голубой круг со знаком вопроса, нужно задать относительное расположение, чтобы он появлялся в правом верхнем углу.

Надеемся, что Вам понравился этот урок и что он пригодится Вам для создания веб-приложений.

Демонстрация работы – Скачать исходный код

Автор урока Martin Angelov

Перевод — Дежурка

Смотрите также:

• Создание простых масок CSS: изображения в фигурных рамках
• Создание закругления рамки
• Создание блока с наклонной нижней рамкой