Как сделать красивую подсказку для ссылок

Как делается в html всплывающая подсказка?

От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.

Стандартная подсказка

По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Обратите внимание

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

Способ на чистом css

Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

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

Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:

content: attr(data-name);background: rgba(5,13,156,.55);

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:

Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.

Способ 2. Чистый css и плавное появление

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

Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной.

Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах<\p>

Важно

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

Именно из-за него невозможно было применить плавные изменения. В этот раз код будет выглядеть так:

Суматранский тигр

CSS код не претерпел каких-то огромных изменений:

background: rgba(5,13,156,.55);

Убираем только свойство content, так как оно поддерживается лишь псевдоэлементами. Дописываем свойство transition, которое и создает плавные переходы состояний. Ну а opacity: 0 даст нашему блоку с подсказкой полную прозрачность, поэтому он не будет виден на странице.

При наведении на блок теперь достаточно вернуть нормальную прозрачность блоку с подсказкой. Готово. Можете проверить, элемент появляется плавно.

С помощью css3 можно скрыть элемент и по-другому. С помощью трансформаций, например.

Замените полную прозрачность на вот такое свойство: transform: scale(0) и размер блока будет уменьшен до нулевого, так что его попросту не будет на экране.

При наведении же на блок с картинкой следует вернуть нормальный размер вот так: transform: scale(1). В таком случае эффект появления будет смотреться еще красивее. Можете убедиться в этом сами.

Как видите, на css всплывающая подсказка также может появляться медленно с красивыми эффектами.

Другие способы

Еще больше возможностей вам может дать jQuery. С помощью этой библиотеки можно написать код для вывода подсказки как самостоятельно, так и найти какой-нибудь плагин, который уже реализует это дело.

Например, в фреймворке Bootstrap тоже есть много готовых компонентов и один из них, это как раз всплывающие подсказки.

Вы можете посмотреть в документации к фреймворку примеры кода, которые позволяют создать эти самые подсказки, и использовать их.

Совет

Необязательно подключать весь Bootstrap, можно вообще оставить только такой компонент, как подсказки (toolptips), скачать и подключить только его.

В общем, сегодня я показал вам способы на css, как сделать красивую подсказку с резким и плавным появлением, помимо этого в вашем арсенале есть Bootstrap и jQuery. Выбирайте что угодно и реализовывайте интересные и красивые подсказки на своих сайтах!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Источник: https://webformyself.com/kak-delaetsya-v-html-vsplyvayushhaya-podskazka/

Всплывающая подсказка html и css без скриптов

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

Думал, о чем написать? И пришло, как-то само конечно же во время верстки очередного макета. Понадобилось сделать такую простенькую штуку, как всплывающая подсказка без использования скриптов. Вот решил собственно поделиться и с Вами.

А вдруг кому пригодится?

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

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

Я думал в данной статье начать с самого примитива, вывод подсказки с помощью атрибута title, который не получится как-либо оформить, однако я думаю его можно пропустить, так как это и так понятно. Если вышесказанное Вам не совсем понятно, думаю, после изучения видео об универсальных атрибутах, все станет гораздо понятней.

Простой способ с оформлением, при наведении

Здесь все не сложнее, чем в способе, который я пропустил. Только вместо атрибута title я буду использовать data-title и оформление с помощью стилей css. Собственно привожу ниже html-код:

?

Далее, чтобы подсказка начала работать, необходимо прописать свойства для данного элемента:

/* Используем псевдоэлемент after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при наведении */ .hover:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при наведении на элемент плашка с подсказкой появилась */ .hover:hover:after{display: block;}

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

Всплывающая подсказка при наведении

Это пожалуй самый популярный способ реализации данной возможности. По крайней мере я им пользуюсь чаще всего.

? это подсказка с оформлением

В данном примере так же не вижу ничего особенного, однако тегов побольше, но и результат будет получше и без использования атрибута data-title. Контейнер в данном случае служит оболочкой для наших элементов, которые будут использованы для реализации подсказки. А так же сама плашка будет позиционироваться относительно контейнера.

/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:before {content: » «; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:after {content: » «; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при наведении */ .hover:hover + .hidden{display: block;}

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

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

Простой способ с оформлением, при клике

В случае с кликом, код будет выглядеть абсолютно так же. Единственное, что для удобства я заменил класс некоторых элементов. А так же используется псевдокласс focus вместо hover. Еще здесь стоит отметить, что чтобы данный способ срабатывал, необходимо заменить тег div на тег a, то есть на гиперссылку.

?

Css код в этом случае аналогичен появлению плашки при наведении, только использованы для удобства другие классы. И для правильной работы меняем псевдокласс на focus.

/* Используем псевдокласс after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при клике */ .focus:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при клике на элемент плашка с подсказкой появилась */ .focus:focus:after{display: block;}

Как видите разницы практически нет.

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

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

? это подсказка с оформлением

И собственно оформление плашки:

/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:before {content: » «; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:after {content: » «; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при клике */ .focus:focus + .hidden{display: block;}

Читайте также:  Как получить доступ к сайту по ftp

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

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

Видео урок — Всплывающая подсказка без скриптов

На этом у меня все. Всем удачи.

Источник: https://SdelaemBlog.ru/vsplyvayushhaya-podskazka-html-i-css-bez-skriptov

Как сделать всплывающую подсказку в css

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

И так что такое «всплывающие подсказки» — это текст или картинка которые отображаются при наведении указателя мыши на ссылку или другой какой то элемент на странице, если в атрибуте title есть ее описание.

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

В обычном виде без оформления подсказка имеет примерно такой вид как на фото ниже:

Обратите внимание

И выводится она стандартным системным методом при помощи атрибута title, без оформления код ссылки из всплывающей подсказкой выглядит так:

Ссылка

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

Так как, нет возможности в  CSS простого оформления title, потому мы будем добавлять разные атрибуты, писать  для них оформление и соответственно добавлять их в код нашей ссылки или изображения, для которого мы делаем красивую всплывающую подсказку.

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

Для выполнения данного действия мы будем использовать два атрибута: image, И для того чтоб наша подсказка работала after и data-text для вывода текста всплывающей подсказки.

Пример стилей CSS для данного варианта всплывающей подсказки:

    content: attr(data-text); /* Выводим текст всплывающей подсказки*/    left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */    z-index: 1; /* Отображаем подсказку поверх других элементов */    background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */    color: #fff; /* Цвет текста */    text-align: center; /* Выравниваем текст по центру */    font-family: Arial, sans-serif; /* Гарнитура шрифта */    font-size: 11px; /* Размер текста подсказки */    padding: 5px 10px; /* Поля */    border: 1px solid #333; /* Параметры рамки */

Ну и сам HTML код выглядит так:

А вот примерно такой результат у нас получится:

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

Пример кода CSS Ниже:

    background: rgba(204,102,0,.8);.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */    border-color: #cc6600 transparent;    border-width: 6px 6px 0 6px;

А для нашей ссылки с подсказкой делаем такой код:

Ссылка

Ну и результат у нас получится такой:

Наведи курсор сюда

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

Пример CSS кода:

  position: relative;     /* Делаем элемент родительским для всплывающих подсказок */  position: absolute;     /* Выводим элемент из потока */  margin-left: -30000px;  /* И прячем далеко за краем экрана */  background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/  color: #fafafa;             /* Цвет текста */  padding:10px;                 /* Отступы */                -webkit-border-radius: 5px; /* Закругляем уголки */  -khtml-border-radius: 5px;.tooltip:hover span {     /* При наведении */  margin-left: 0;         /* Возвращаем из далекого заэкранного края блок на место */  width: 250px;           /* Задаем ширину */  z-index: 1000;          /* Помещаем на самый верх */                          /* Позиционируем относительно родительского блока */  top:30px;               /* Отступ сверху */    left:20px;              /* Отступ слева */            content: '';            /* Добавили контент */  width:0;                /* Спрятали его, превратив в 0 */  border-bottom: 10px solid #000099;  /* Нижним бордером задаем цвет и высоту треугольника */  border-right: 30px solid transparent; /* Правым — ширину треугольника вправо */  position: absolute;     /* Позиционируем относительно родительского блока */

Ну и соответственно html-код для ссылки:

СсылкаТекст всплывающей подсказки

И результат у Вас должен будет получится как на примере ниже:

Наведи курсор сюдаТекст всплывающей подсказки

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

Источник: https://web-stydia.com/sozdaem-vsplyvayushhie-podskazki-na-chis/

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

подключаем файл стилей:

1

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

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

1 … Текст … ключевое слово… Текст во вслывающем окне …… Текст …

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

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

Вывод

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

Успехов!

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

Источник: http://www.sitehere.ru/originalnoe-oformlenie-vsplyvayushhix-podskazok

Узнайте, как создать всплывающую подсказку на чистом HTML и CSS

// контент

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

Я создал div с классом container, в который мы поместим основные примеры всплывающих подсказок HTML. Вот стили для body и класса .container:

body { font-family: 'Work Sans', sans-serif; font-size: 1.5em; line-height: 1.4em; font-weight: 700; background-color: #28ABE3; color: #fff; } .container { width: 800px; margin: 100px auto; background: radial-gradient(circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); }

Я отцентрировал div контейнера, присвоив для margin-left и margin-right значения auto. Также добавил несколько стилей для раздела body, чтобы он выглядел лучше.

Я решил добавить для фона небольшой светлый CSS-градиент. Если браузер не поддерживает CSS-градиенты (это касается в основном IE 8 и 9), цвет фона будет переключен обратно на синий по умолчанию (цвет фона раздела body).

Я буду использовать HTML подсказки при наведении с тегами анкоров, но вы можете назначить классы других встроенных элементов, таких как strong tag или span. Ниже приводится содержимое div контейнера:

  • Tooltip top
  • Tooltip bottom
  • Tooltip left
  • Tooltip right

Маркированный список содержит четыре элемента с тегами анкоров. Я изменил стили элементов списка, чтобы они не содержали маркеры списка, а отображались как inline-block. Это позволит нам добавить отступы между ними:

.tooltip-wrapper { padding: 160px 0; text-align: center; } .tooltip-wrapper li { list-style: none; display: inline-block; margin: 0 10px; } .tooltip-wrapper li a { color: #fff; text-decoration: none; }

Давайте подробнее рассмотрим тег анкора:

Tooltip left

Я назначил для ссылок два класса. Класс tooltip будет отвечать за тело подсказки, а второй — определять ее размещение.

Вы также можете видеть пользовательский атрибут data-, который содержит текст нашей HTML подсказки.

Создание класса tooltip

Ниже приведен код класса tooltip:

.tooltip { position: relative; } .tooltip:after { position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight: bold; color: #fff; content: attr(data-tooltip); min-width: 80px; /* width: -moz-max-content; */ /* width: -webkit-max-content; */ opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; z-index: 2; } .tooltip:hover:after { opacity: 1; visibility: visible; }

Сама HTML всплывающая подсказка при наведении — это псевдоэлемент :after, она позиционируется абсолютно. Вот почему необходимо присвоить относительную позицию элементу анкора. Я добавил несколько основных стилей, такие как отступ, рамка, размер шрифта и ширина. Давайте более внимательно рассмотрим свойство content.

Оно содержит attr() — значение, в котором хранятся наши пользовательские data-tooltip, и использующее их, чтобы вывести текст самой подсказки. Вместо data-tooltip вы можете использовать любое другое имя, просто убедитесь, что оно начинается с data-. Больше о данных атрибутов вы можете узнать здесь.

Тело подсказки имеет минимальную ширину 80 пикселей. Если нужно, чтобы содержимое подсказки растягивалось в одну строку, то добавьте для свойства ширины значение max-content, которое в данный момент вынесено в комментарии. Следует отметить, что это экспериментальная функция, поэтому вы должны использовать вендорные префиксы -webkit- и -moz-.

Важно

Чтобы задать для HTML подсказки при наведении эффект слайд-анимации, мы используем свойство transition. Обратите внимание на значение .25s, которое указывает задержку перед тем, как подсказка отображается или скрывается.

Таким образом, она не будет выводиться, если вы наведете курсор мыши на текст по ошибке, а только при наведении курсора на более продолжительное время. Я также задал непрозрачность 0 и видимость hidden.

Мы не можем использовать display: none;, потому что элемент полностью исчезнет, и мы не увидим каких-либо эффектов перехода. Непрозрачность и видимость изменяются при наведении на элемент указателя мыши.

Результат:

Посмотреть

Примечание: Я изменил / удалил часть разметки и стилей в демо-версии на CodePen. Чтобы увидеть окончательный результат, посмотрите демонстрационный пример в конце этой статьи.

Добавление движения

Теперь, когда мы реализовали появление / исчезновение HTML всплывающей подсказки при наведении, давайте заставим ее двигаться. Мы уже назначили свойство анимации, и нам осталось задать исходную позицию, откуда она должна появляться, и конечную:

/*Исходная позиция подсказки*/ .tooltip-top:after { bottom: 150%; left: 0; } .tooltip-bottom:after { top: 155%; left: 0; } .tooltip-left:after { right: 130%; min-width: 100px; } .tooltip-right:after { left: 130%; min-width: 100px; } /*Конечная позиция подсказки*/ .tooltip-top:hover:after { bottom: 120%; } .tooltip-bottom:hover:after { top: 125%; } .tooltip-left:hover:after { right: 110%; } .tooltip-right:hover:after { left: 110%; }

Читайте также:  Как обменять валюту в интернете

Я решил добавить этот функционал в дополнительные классы. Таким образом, если вы назначите, например, класс .tooltip-left, подсказка будет выводиться слева от текста, если добавите .tooltip-top, подсказка будет выводиться сверху, и т.д.

Посмотреть демо

В этой демо-версии я использую класс .tooltip-right. Вы можете поэкспериментировать и применить различные классы, чтобы задать различные позиции всплывающей подсказки HTML.

Создание треугольника

Последним элементом всплывающей подсказки является маленький треугольник на одной из сторон блока. Мы создадим его с помощью псевдокласса :before (псевдокласс :after уже использован для самой подсказки). Мы назначаем его для наших четырех классов позиции, чтобы для каждой из них треугольник выводился соответственно:

/** * Треугольники */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before { content: «»; display: block; position: absolute; border-width: 7px; border-style: solid; border-color: rgba(0, 0, 0, 0); opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; } .tooltip-top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before { opacity: 1; visibility: visible; }

Мы создаем треугольник, задав ширину для рамки, когда сам элемент не имеет ширины или высоты. В этом случае ширина рамки устанавливается в 7 пикселей. Цвет рамки является полностью прозрачным, что очень важно. В следующем фрагменте кода я назначаю цвет для соответствующей стороны рамки, что позволяет задать форму треугольника.

Остальная часть стилей выглядит аналогично тому, что мы делали для тела HTML подсказки при наведении. У нас те же переходы, позиция является абсолютной, непрозрачность устанавливается на 0 и видимость — скрытая:

/*Начальная позиция треугольника*/ .tooltip-top:before { top: -51%; left: 50%; transform: translateX(-50%); border-top-color: #fff; } .tooltip-bottom:before { bottom: -56%; left: 50%; transform: translateX(-50%); border-bottom-color: #fff; } .tooltip-left:before { left: -31%; top: 15%; border-left-color: #fff; } .tooltip-right:before { right: -31%; top: 15%; border-right-color: #fff; } /* Конечная позиция треугольника */ .tooltip-top:hover:before { top: -21%; } .tooltip-bottom:hover:before { bottom: -26%; } .tooltip-left:hover:before { left: -11%; } .tooltip-right:hover:before { right: -11%; }

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

Результат:
Посмотреть

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

Посмотрите окончательную демо-версию, чтобы увидеть нашу всплывающую подсказку в действии.

Посмотреть демо-версию | Скачать исходный код

Заключение

Этот код поможет вам понять, как сделать подсказку в HTML. Вы можете изменить стили, чтобы они соответствовали дизайну вашего блога, а также можете изменить продолжительность и скорость анимации. Чтобы использовать их, примените к элементу класс tooltip и класс позиции, а также задайте для атрибута data-tooltip свой текст подсказки.

Перевод статьи «Learn How to Create a Pure HTML & CSS Tooltip» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/uznayte-kak-sozdat-vsplyvayuschuyu-podskazku-na-chistom-html-i-css.html

Всплывающие подсказки, построенные только на CSS

Пример всплывающих подсказок, сделанных на CSS!

Наведите курсор мыши на надписи чтобы увидеть: классическую подсказкуЭто просто пример того, как сделать подсказки с использованием CSS!, критическое сообщениеКритическое сообщениеЭто просто пример того, как сделать подсказки с использованием CSS!, помощьПомощьЭто просто пример того, как сделать подсказки с использованием CSS!, информацияИнформацияЭто просто пример того, как сделать подсказки с использованием CSS! и предупреждениеПредупреждениеЭто просто пример того, как сделать подсказки с использованием CSS!.
Это просто пример того, как сделать подсказки с использованием CSS!

В коде используется элемент

(ничего особенного с ним не связано) и параграфы (

) для текста, которые содержат элементы ссылок (для которых установлен класс «tooltip»).

Почему для всплывающих подсказок используется тег ?

Причина того, что мы используем тег a, а не abbr, dfn или span, заключается в том, что IE6 ущербно поддерживает псевдо-селектор :hover для других элементов, отличных от a.

Если вы не собираетесь поддерживать IE6, то можно использовать другой тег.

Каждая ссылка содержит элемент span с текстом подсказки.

Код HTML без применения стилей.

Элемент ссылки эффективно работает для использования события hover и для использования стилей документа. Содержимое элементов span скрывается до тех пор, пока в них нет необходимости.

Совет

Для каждого элемента span в примере установлен класс classic (для обычной всплывающей подсказки) или custom (с critical, help, info или warning, которые соответствуют используемой цветовой схеме).

Такое использование стилей также имеет пару бонусов в виде элемента em (устанавливает заголовок всплывающей подсказки) и изображения (которое используется как иконка во всплывающей подсказке, вы можете использовать свои изображения).

CSS

У нас написан код HTML для страницы и пришла пора заставить всплывающие подсказки делать их работу.

Ниже приведённый код, который добавляется в секцию страницы, задаёт для каждой ссылки, содержащий всплывающую подсказку, миленький стиль с подчёркиванием точечной линией (чтобы отличаться от обычной ссылки, которая подчёркивается сплошной линией) и устанавливает курсор со знаком вопроса (тоже для визуальной дифференциации).

Также удаляется подчёркивание и устанавливается цвет (таким образом элемент становится меньше похож на обычную ссылку).

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

Все очень просто!

Стили CSS для класса .tooltip

Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left, а не display: none или visibility: hidden, так как некоторые программы для чтения с экрана игнорируют указанные свойства.

Стили CSS придают странице тот вид, который нужен.

Стили CSS для всплывающих подсказок

На данном этапе ссылки не имеют установок для вывода всплывающих подсказок при наведении курсора мыши.

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

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

CSS для отображения всплывающей подсказки

.tooltip:hover span { font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .

tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.

8em 2em; } * html a:hover { background: transparent; }

Необходимость строки * html

У вас может возникнуть вопрос, для чего включена последняя строка в выше приведённом коде? Она устанавливает прозрачность для фона сслыки. Во время тестирования всплывающих подсказок выявился странный эффект в IE6, который не поддавался удалению до тех пор, пока существовал фон ссылки!

Всплывающие подсказки начали работать, а оформление добавим позже!

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

Задаём цветовую схему для всплывающих подсказок/

Ниже приведённый код задаёт для каждого из пяти стилей всплывающих подсказок цветовую схему.

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

Код CSS для цветовой схемы

.classic { background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .

info { background: #9FDAEE; border: 1px solid #2BB0D7; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; }

Код CSS очень прост, но он придаёт отличный вид всплывающим подсказкам и выполняет свою функцию везде.

Цветовую схему можно поменять по своему усмотрению.

Несколько штрихов CSS3 для продвинутого отображения всплывающих подсказок

Перед тем, как закончить урок, вставим несколько строк кода CSS3 для придания ввизуальных эффектов нашим всплывающим подсказкам. Установим скруглённые углы с помощью свойства border-radius и придадим объёмности с помощью свойства box-shadow.

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

Стили придают всплывающим подсказкам замечательный вид и уникальность!

Добавим ниже приведённый код в селектор .tooltip:hover span и обновим страницу.

Визуальные эффекты для рамки, тени и прозрачности поднимают всплывающую подсказку над текстом страницы и делают информацию контрастной и лёгкой для чтения.

Вы можете заметить, что используются не только официальные свойства CSS3, но и расширения для Mozilla и WebKit.

Дополнительные свойства CSS для новых браузеров

border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Используем свойства CSS3.

Резюме

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

Источник: https://ruseller.com/lessons.php?id=664

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

Всплывающие подсказки на сайте бывают очень нужны, если необходимо, например, выполнить целевое действие — но не совсем понятно, к чему приведет нажатие на том или ином элементе управления.  В самом простом виде всплывающую подсказку можно увидеть при наведении курсора мыши на ссылку, у которой задан атрибут «title». Сейчас мы создадим всплывающие подсказки на CSS.

Здесь всего лишь отображается текст сообщения, что данная ссылка связана с сервисом Twitter. Однако CSS предоставляет намного больше возможностей по оформлению красивых подсказок, которые покажем немного ниже. Для их реализации не нужно ничего подключать. Достаточно лишь внести правки в ваши таблицы стилей.

Всплывающая подсказка средствами HTML — через атрибут «title» ссылки

Наведите курсор мыши!

Вот такой результат получится:
Наведите курсор мыши!

Всплывающая подсказка средствами стилей CSS

Вот такой код нужно написать на CSS — для реализации подсказки:

.image {
display: inline-block;
position: relative;
}
.image:hover::after {
content: attr(data-text); /* Выводим текст всплывающей подсказки*/
position: absolute;
left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */
color: #fff; /* Цвет текста */
text-align: center; /* Выравниваем текст по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 11px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}

Всплывающая подсказка над ссылкой на CSS

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

https://www.youtube.com/watch?v=CtvwBSmUVGs

Код HTML:

Наведите курсор на ссылку

Стили CSS:

.podskazka{ display: inline; position: relative;
}
.podskazka:hover:after{ background: #333; background: rgba(204,102,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: auto;
}
.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */ border: solid; border-color: #cc6600 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: «»; left: 50%; position: absolute; z-index: 99;
}

и вот такой вот результат получается:
Наведите курсор на ссылку

Всплывающая подсказка под ссылкой на CSS

А теперь давайте выведем подсказку под ссылкой. Для этого сделаем следующее:

Код HTML:

Наведи курсор на ссылку Текст всплывающей подсказки

Код CSS:

.tooltip { position: relative; /* Делаем элемент родительским для всплывающих подсказок */ cursor: help;
}
.tooltip span { position: absolute; /* Выводим элемент из потока */ margin-left: -30000px; /* И прячем далеко за краем экрана */ background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/ color: #fafafa; /* Цвет текста */ padding:10px; /* Отступы */ -webkit-border-radius: 5px; /* Закругляем уголки */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
}
.tooltip:hover span { /* При наведении */ margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */ width: 250px; /* Задаем ширину */ z-index: 1000; /* Помещаем на самый верх */ /* Позиционируем относительно родительского блока */ top:30px; /* Отступ сверху */ left:20px; /* Отступ слева */ }
.tooltip span:after{ content: ''; /* Добавили контент */ width:0; /* Спрятали его, превратив в 0 */ height:0; border-bottom: 10px solid #000099; /* Нижним бордером задаем цвет и высоту треугольника */ border-right: 30px solid transparent; /* Правым — ширину треугольника вправо */ position: absolute; /* Позиционируем относительно родительского блока */ top:-10px; left:10px;
}

И вот такой результат получается после вышеприведенных действий:

Наведи курсор на ссылку
Текст всплывающей подсказки

Источник: https://web-factory.org/technology/vsplyvayushhie-podskazki-na-css/

Создание всплывающих подсказок с использованием только CSS

Во всех браузерах можно создать простые всплывающие подсказки для элементов HTML, используя атрибут title (название), как в примере ниже.

Демонстрация работы

Атрибут HTML title 

Tooltip

Код HTML, расположенный выше, создаст следующий эффект:

Если навести указатель мыши на расположенную выше ссылку, появится обычная браузерная всплывающая подсказка с текстом: «Example of Tooltip» (пример всплывающей подсказки).

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

Код CSS для всплывающей подсказки 

Есть несколько способов, чтобы задать стили всплывающим подсказкам.

Можно задать стили CSS атрибуту title и использовать псевдоэлементы :before или :after, чтобы добавить содержимое в код CSS, например, следующим образом:

[title]{ position:relative;
}
[title]:after{ content:attr(title); color:#fff; background:#333; background:rgba(51,51,51,0.75); padding:5px; position:absolute; left:-9999px; opacity:0; bottom:100%; white-space:nowrap; -webkit-transition:0.25s linear opacity;
}
[title]:hover:after{ left:5px; opacity:1;
}

Это отличное решение, но, к сожалению, использование только атрибута title все равно не изменит внешний вид всплывающих подсказок, у них будут стили браузера по умолчанию. Придется использовать JavaScript, чтобы выключить стили браузера по умолчанию и использовать стили, заданные атрибуту title.

Но в этом уроке мы покажем, как создать всплывающие подсказки, используя только CSS и не используя JavaScript.

Обратите внимание

Чтобы создать всплывающие подсказки на чистом CSS, нужно удалить атрибут title из ссылки и вставить текст всплывающей подсказки в тег span в ссылке.

Вот код HTML, который понадобится для ссылок:

adipiscing elitThis is the first tooltip

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

a span{ display:none; color:#fff; background:rgba(51,51,51,0.75); padding:20px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; width:100px; text-align:center; position: absolute; z-index:10;
}
a { display: inline-block;}
a:hover span{ display:block; }

Для начала нужно спрятать первый тег span, используя свойство display: none;, после чего задать нужные для всплывающей подсказки стили.

Все, что остается сделать, — показывать всплывающую подсказку при наведении указателя мыши на ссылку, используя следующий код CSS:

a:hover span{ display:block; }

Теперь у нас есть работающие всплывающие подсказки на чистом CSS3.

Использование разных всплывающих подсказок 

В примере выше все всплывающие подсказки будут одинаковыми, но как быть, если нужно задать другие стили некоторым всплывающим подсказкам? Наиболее простой способ сделать это — добавить классы тегам span, после чего задавать стили этим классам в CSS.

Если нужно изменить цвет фона с черного на другой цвет, это можно сделать, например, так:

Duis sit amet pretium purus.The blue tooltip
convallis egestas felis suscipitThe red tooltip
augue pharetra gravidaThe yellow tooltip
The green Tooltip

Код CSS для изменения цвета фона будет таким:

span.blue{ background:rgba(41,137,216, 0.75); border:1px solid #1E5799;
}
span.red{ background:rgba(247,49,49, 0.75); border:1px solid #F73131;
}
span.yellow{ background:rgba(241,218,54, 0.75); border:1px solid #f1da36; color:black;
}
span.green{ background:rgba(41,154,11, 0.75); border:1px solid #299a0b;
}

Посмотрите пример, чтобы увидеть, как это будет работать.

Демонстрация работы

Автор урока Paul Underwood

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

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

Источник: http://www.dejurka.ru/css/css3-tooltips/

Красивые всплывающие подсказки на CSS

Приветствую вас, друзья и коллеги! Сегодня хочу рассказать вам об одной библиотеке, которая помогает выводить красивые всплывающие подсказки на CSS. Речь пойдет о Hint.css

Эта библиотека упростит создание всплывающих подсказок и поможет улучшить юзабилити вашего сайта, а в некоторых случаях и повлиять на конверсию. Как? Читайте дальше и узнаете 🙂

Hint.css — красивые всплывающие подсказки

Первое, что нужно сделать, это подключить hint.css к вашему проекту. Можете скопировать и вставить как в вашу таблицу стилей, так и подключить как отдельный файл. Ссылки на исходник и официальный сайт в конце статьи.

Для примера я реализовал такой блок:

При наведении на новую цену будет появляеться подсказка, в которой будет сообщение о том, сколько человек экономит, приобретая товар сейчас.

О разных способах сделать зачеркнутый текст и о том, для чего это делать я рассказывал в этой статье. Прочитайте! Она очень коротенькая — пригодится. Так вот, дополнить и усилить ваше предложение может такая подсказка, которая укажет на количество сэкономленных денег. Ее можно сделать как постоянной, так и динамичной (Будет появляться только при наведении курсора на определенный элемент):

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

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

Так или иначе всплывающая подсказка смотрится неплохо, и я рекомендую вам ее использовать. Давайте приступим…

Первое, что нужно сделать — это подключить библиотеку hint.css. Я говорю библиотека, потому что в этой таблице стилей уже прописаны готовые классы и свойства к ним. Нам необходимо просто задать эти классы элементу (кнопка, ссылка, картинка и т.п.), при наведении на который будет появляться подсказка:

Важно

После того, как библиотека подключена задаем свойство «simple-hint» элементу, при наведении на который будет всплывать подсказка. В моем случае так:

Новая цена 600$

<\p>

Теперь нужно задать класс, который отвечает за то, с какой стороны будет всплывать подсказка (hint-top, hint-bottom, hint-left, hint-right);

Новая цена<\p>

Источник: https://smartlanding.biz/vsplyvayushhie-podskazki-na-css.html

Как создать всплывающие при наведении подсказки на CSS?

Удобный, интуитивно понятный и со вкусом оформленный сайт – это главная цель любого веб-разработчика.

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

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

Предпосылки

Современные js-технологии предлагают нам широкий выбор готовых решений, но в этот раз речь пойдет не о них.

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

Зачем изобретать велосипед, спросите Вы? Ведь в HTML есть атрибут title, позволяющий выводить подсказку при наведении. Но вся соль в том, что темизация такой подсказки не представляется возможной. Такой порядок вещей приводит нас к необходимости самим создать всплывающие подсказки.

Создаем всплывающую подсказку сами

Итак, всплывающая подсказка. Для лучшего понимания материала, предлагаю учиться на рабочем примере. Напишем простой HTML код:

CSS:

Акция!
Заказав этот товар, вы получаете бесплатную доставку по Украине!
Купить

Как видим, у нас есть ссылка «Купить» с классом .tooltip, который в дальнейшем поможет нам управлять поведением всплывающей при наведении подсказки (почему именно ссылка – читайте подпункт «Важно»).

Внутри нее размещаем span в котором будет содержаться выводимая информация. Для придания «современности» дизайна, добавлена картинка. В нашем примере картинка лежит в директории «..

/css/image/ » относительно html страницы.

Теперь зададим базовую стилизацию.

CSS:

.tooltip {
position: relative;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span {
visibility: hidden; /*прячем подсказку*/
position: absolute; bottom: 30px;
z-index: 999;
width: 280px;
margin-left: -127px;
padding: 10px;
opacity: .9; /*устанавливаем прозрачность*/
background-color: darkturquoise; /*Задаем цвет фона*/
text-align: justify;
font-weight: bold;
}
.tooltip:hover {
border: 0; /* Фиксим появление бага в IE6*/
}
.tooltip:hover span {
visibility: visible; /*Задаем поведение: отобразить при наведении*/
}

Обратите внимание на строчку

при наведении на ссылку, стандартный системный курсор изменяет свой вид, и тем самым подсказывает пользователю, что сейчас он получит дополнительную информацию.

Вот что у нас получилось:

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

Создадим линейный градиент при помощи linear-gradient, и зададим border-radius для округления углов блока. Для придания эффекта объемности добавим тень для текста и подсказки в целом.

Вставляем внутрь .tooltip span следующий код.

CSS:

border: 3px solid mediumturquoise;
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);

Сравним полученный результат с предыдущим:

При желании, опять-таки для придания объемности, можно визуально вынести картинку за пределы подсказки. Текст внутри тоже можно немного причесать.

CSS:

.tooltip img {
position: absolute;
left: -24px;
top: -24px;
float: left;
}
em {text-align: center;
display: block;
font-weight: bolder;
}

Совет

Как для учебного примера, то получилось, в принципе, неплохо. Но я уверен, что у вас получится значительно лучше!

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

CSS:

.tooltip span:before,
.tooltip span:after {
content: «»;
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid darkturquoise;/*цвет стрелочки*/
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before {
border-top-color: mediumturquoise; /*обрамление стрелочки*/
bottom: -8px;
}

При оформлении стрелочки, обратите внимание на комментарии, они помогут Вам быстро настроить цветовую схему.

Вот пример черной стрелки с золотым обрамлением:

Важно!!!

  1. Кросс-браузерность. Всплывающие подсказки такого типа корректно работают во всех современных браузерах (начиная с IE6, Fx-4, Op-9.5, Sf-4, Cr).

    Если вы создаете подсказки со стрелочками, то для IE6-7 придется эмулировать псевдоэлементы before, after.

  2. Почему ссылка? Дело в том, что IE6 относительно корректно отрабатывает свойство :hover лишь в том случае, когда оно применяется к ссылке. Если вы не оптимизируете свой сайт под такую древность – можете использовать другие теги (например, span).
  3. При желании, Вы можете использовать js-код для расширения функционала и/или задания особых эффектов (например, медленное появление и исчезновение и т.д.).

Общие замечания

  • Обратите внимание на фон страницы, на которой мы выводили подсказки. Он не является однообразным, и на нем полупрозрачная подсказка приобретает некую изюминку. Учтите этот момент при подборе фона документа.
  • Вас могло заинтересовать, зачем элементу span было присвоено класс «customInfo».

    Дело в том, что на своем сайте Вам может понадобится несколько типов информационных подсказок, отличающихся цветовой схемой, градиентом и т.д. Для этого удаляем из «.tooltip span» свойства, которые мы хотим изменить, напримерborder: 3px solid mediumturquoise;
    opacity: .

    9;
    background-color: darkturquoise;

    и оформляем новый класс:

    .customWorring {
    border: 3px solid red;
    opacity: .8;
    background-color: pink;
    }

    Таким образом мы получим розовую полупрозрачную подсказку с красной окантовкой. Изменим картинку в теле ссылки на красный восклицательный знак, – и предостерегающая подсказка готова.

  • Ну и напоследок, личное мнение автора – подсказки на чистом CSS – это вещь! Вам не нужно играться с готовыми js-скриптами, подключать внешние файлы, ваши странички не теряют скорости загрузки. А самое главное – кросс-браузерная всплывающая подсказка создана собственными руками, и пределов для ее кастомизации практически нет.

Источник: https://vaden-pro.ru/blog/css/vsplyvayushchie-podskazki-css

Ссылка на основную публикацию