X
Юрий Немец

Оформление всплывающих подсказок — всплывающие подсказки CSS

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

Оригинальные примеры оформления всплывающих подсказок смотрите ниже:

Посмотреть примерСкачать



Также хочу обратить ваше внимание на следующие статьи, где также есть всплывающие подсказки:

Посмотрим подробнее | Оформление всплывающих подсказок

HTML часть

Давайте рассмотрим на примере "Блока".

Для начала между тегами <head></head> подключаем файл стилей:

1

<link rel="stylesheet" type="text/css" href="css/tooltip-box.css" />

Где окончание "-box" (например, "-flip" или "-line") это и есть тот файл стилей, который соответствует выбранному эффекту.

Далее, пока что не совсем понятный, код:

1

<p>... Текст ... <span class="tooltip toolti p-effect-1"><span class="tooltip-item">ключевое слово</span><span class="tooltip-content clearfix"><span class="tooltip-text">... Текст во вслывающем окне ...</span></span></span>... Текст ...</p>

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



CSS часть

Хорошо, с HTML разобрались. Но что же находится в CSS?

Опять же посмотрим для примера "Блок":

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

.tooltip {
    display: inline;
    position: relative;
    z-index: 999;
}
 
/* Выделение "ключевого слова" */
 
.tooltip-item {
    color: #2fa0ec;
    cursor: pointer;
    z-index: 100;
    position: relative;
    display: inline-block;
    font-weight: 700;
    -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
 
.tooltip:hover .tooltip-item {
    color: #fff;
    -webkit-transform: translate3d(0,-0.5em,0);
    transform: translate3d(0,-0.5em,0);
}
 
/* Подсказка */
 
.tooltip-content {
    position: absolute;
    z-index: 99;
    width: 360px;
    left: 50%;
    margin-left: -180px;
    bottom: -5px;
    text-align: left;
    background: #2fa0ec;
    opacity: 0;
    font-size: 0.75em;
    line-height: 1.5;
    padding: 1.5em;
    color: #fff;
    border-bottom: 65px solid #2a3035;
    cursor: default;
    pointer-events: none;
    border-radius: 5px;
    font-family: 'Indie Flower', cursive;
    webkit-transform: translate3d(0,-0.5em,0);
    transform: translate3d(0,-0.5em,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}
 
.tooltip-content a {
    color: #32434f;
}
 
.tooltip-text {
    opacity: 0;
    -webkit-transform: translate3d(0,1.5em,0);
    transform: translate3d(0,1.5em,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}
 
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-text {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Самое сложное здесь — это свойство transform. Но если вы изучали уроки по CSS преобразованиям, то ничего сложного для вы здесь не заметите.



Вывод

Еще один набор оригинально оформленных всплывающих подсказок для вашего сайта. Смело используйте их у себя на сайте!


Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Категории: CSS3