Подсказка html: Как сделать всплывающую подсказку на html и css? – Создание простых всплывающих подсказок на HTML5, CSS и jQuery / Habr

Leave a Comment / Html / By /

Простые подсказки на CSS3 и HTML5

Часто спрашивают, какой самый простой способ реализации подсказок к ссылкам. Самый простой, это не особо заморачиваясь по поводу внешнего вида подсказок, использовать встроенные средства браузеров, прописывая атрибут title=»» в ссылках.
В то же время существует масса других способов создания простых всплывающих подсказок, о некоторых из них я писал ранее, да и в «интернетах» материала по этой теме не мало. Сегодня, поделюсь ещё одним, очень простым решением, для создания оформленных подсказок к ссылкам, не используя javascript, построенных исключительно на CSS3 и HTML5.
В данном методе, в общем-то, нет ничего нового, некоторые свойства появились ещё в CSS2, а вот используемый в примере атрибут data-tooltip="", является частью HTML5. Особо подробно весь механизм расписывать нет надобности, непосредственно в коде CSS, прописал краткие комментарии к основным свойствам.

Вариант 1

Ссылка с подсказкой в Html будет выглядеть следующим образом:

<a href="#" data-tooltip="Простая подсказка на CSS3">ссылка</a>

<a href=»#» data-tooltip=»Простая подсказка на CSS3″>ссылка</a>

Вариант 2

Не ожидал, что сразу после публикации статьи у читателей возникнут некоторые вопросы, точнее один, но очень даже по делу. Сначала вопрос показался мне каким то сумбурным (вот и сам вопрос), но потом я подумал, почему бы и нет, ситуации бывают разные и, порой возникает необходимость разместить в подсказке более объёмную информацию. С первым вариантом, такая схема не прокатывала, при размещении в подсказке длинного текста, она(подсказка) вытягивалась по горизонтали и получалась не очень эстетичная картина. Можете проверить в первом варианте, добавив пару строк в подсказку.
Так вот, поставил задачу исправить ситуацию, т.е. сделать так, чтобы при добавлении длинного текста, тело подсказки оставалось в размерах заданной ширины, и автоматом осуществлялся перенос строк, и сделать это, без нагромождения дополнительного кода в css
Особо мудрить и выдумывать не пришлось, всё давно и хорошо проработано, достаточно было изменить некоторые свойства для элемента data-tooltip и всё.
Собственно, что из всего этого получилось, можете посмотреть на живом примере, а нажав на пункт меню «CSS» в редакторе, увидите весь расклад по стилям, с краткими пояснениями.

Сравнив оба варианта, очень легко разобраться, понять разницу и сам принцип работы данного метода. На мой взгляд, второй вариант, получился проще и к тому же более функциональным. Спасибо NeedHate за его вопрос, не устану повторять — Вместе всё у нас получится ))).
Работает метод во всех браузерах, даже IE8, пусть в силу своей убогости и проигнорировав свойство border-radius(скругление углов), что совсем не критично, выдаёт подсказки в лучшем виде.
Надеюсь, этот простенький сниппет, кому-нибудь пригодится в качестве шпаргалки, а появятся вопросы, или новые идеи в тему, пишите в комментариях, обязательно рассмотрим и обсудим.

С уважением, Андрей

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

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

 

 

 

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

Атрибут HTML title 

<a href="" title="Example of Tooltip">Tooltip</a>

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

Tooltip

Если навести указатель мыши на расположенную выше ссылку, появится обычная браузерная всплывающая подсказка с текстом: «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, который понадобится для ссылок:

<a href="">adipiscing elit<span>This is the first tooltip</span></a>

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

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

<a href="">Duis sit amet pretium purus.<span>The blue tooltip</span>
<a href="">convallis egestas felis suscipit<span>The red tooltip</span></a>
<a href="">augue pharetra gravida<span>The yellow tooltip</span></a>
<span>The green Tooltip</span></a>

Код 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

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

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

Красивая всплывающая подсказка при нажатии

Лого SiteHere.ru