Exore LTD » CSS3 » Оформление всплывающих подсказок — всплывающие подсказки CSS
Лого SiteHere.ru

Ноябрь 4, 2019 Запись была обновлена

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

Оформление всплывающих подсказок — всплывающие подсказки 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 преобразованиям, то ничего сложного для вы здесь не заметите.



Вывод

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


Успехов!

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

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

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

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

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

5 комментариев к записи
  • Владимир

    Юрий, спасибо за данную статью! Помогла разобраться со всплывающими подсказками! Только вот не могу разобраться как сделать, чтобы подсказки (возможно, применимо ко всем, но мучаюсь с классическими) выводились справа или слева от слова? Хотя, это более или менее получается, но упирается все в треугольник (стрелочку) которая должна быть повернута в право и лево, соответственно. Не могу ее повернуть) Не подскажете как это возможно реализовать? Спасибо!

     
    Ответить
    • Юрий Немец

      Здравствуйте, Владимир!

      Данные треугольники реализованы с помощью псевдокласса :after, внутри которого есть свойство border. Попробуйте изменять разные параметры у границ в этом псевдоклассе и поймете как изменить сторону, в которую повернут треугольник. Обычно это делается так: граница делается полностью прозрачной, а затем нужную сторону делают с помощью цвета border-bottom-color: #000.

       
      Ответить
  • Владимир

    Юрий, Спасибо!!! Во всём разобрался, всё получилось и просто летает!

     
    Ответить
  • Вячеслав

    я так и не понял что делает вот этот кусок кода
    .tooltip-content a{
    color: #0059b0;
    }
    за чем там «а» ?
    по идее должен менять цвет подсказки внизу, но нет

     
    Ответить

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

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