Exore LTD » CSS3 » Всплывающие подсказки CSS3
Лого SiteHere.ru

Октябрь 26, 2019 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

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

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

Случалось ли такое, что необходимо написать какие-то пояснения к определенному слову, но места не хватает? Для этого применяются всплывающие подсказки, а работают они следующим образом: при наведении курсора на определенное слово или элемент на странице появляется всплывающая подсказка, в которой даются некоторые пояснения. Это очень удобно использовать, например, на форме регистрации, возможно вы уже видели такие подсказки, и в этом уроке я расскажу как создать такие подсказки на CSS3 без использования Javascript.

Пример разных всплывающих подсказок можно увидеть здесь:

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



HTML часть

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

1
2
3
4
5
6
7
8
9
10

    <p>Пример большого
        <a href="#" class="tooltip">
            длинного
            <span><b>Заголовок</b><br>Это серая подсказка на CSS3.</span>
        </a>
        текста
        <a href="#" class="tooltip">
            для <span>Это вторая серая подсказка</span>
        </a> подсказок.
    </p>

То есть когда мы хотим добавить определенному слову подсказку, мы выделяем его тегом <a> с классом tooltip. А затем внутри берем в тег <span> то, что хотим видеть в всплывающей подсказке.



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

.tooltip
{
    position: relative;
    background: #eaeaea;
    cursor: help;
    display: inline-block;
    text-decoration: none;
    color: #222;
    outline: none;
}
 
.tooltip span
{
    visibility: hidden;
    position: absolute; 
    bottom: 30px;
    left: 50%;
    z-index: 999;
    width: 230px;
    margin-left: -127px;
    padding: 10px;
    border: 2px solid #ccc;
    opacity: .9;
    background-color: #ddd;                     
    background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
    -moz-border-radius: 4px;
    border-radius: 4px;  
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
    text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}
 
.tooltip:hover
{
    border: 0; /* для IE6 */
}
 
.tooltip:hover span
{
    visibility: visible;
}
 
.tooltip span:before,
.tooltip span:after
{
    content: "";
    position: absolute;
    z-index: 1000;
    bottom: -7px;
    left: 50%;
    margin-left: -8px;  
    border-top: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-bottom: 0;  
}
 
.tooltip span:before 
{
    border-top-color: #ccc;
    bottom: -8px;
}

Как видите сначала мы указали свойству visibility значение hidden, а при наведении visibility:visible.



Вывод

Вот и весь код всплывающих подсказок. В демо есть разные цвета — выбирайте те, которые вам больше всего подходят и смело применяйте у себя на сайте :).


Успехов!

Источник: www.red-team-design.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • Вячеслав

    Не плохая фишка,спасибо.

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *