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

CSS Подсказка

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

Основная подсказка

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

Пример

/* Текст подсказки */
.tooltip .tooltiptext <
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Разместите текст всплывающей подсказки — см. Примеры ниже! */
position: absolute;
z-index: 1;
>

/* Показывать текст всплывающей подсказки при наведении указателя мыши на контейнер всплывающей подсказки */
.tooltip:hover .tooltiptext <
visibility: visible;
>
</style>

<div > Наведите на меня
<span style=»color:black;»>Текст подсказки </span>
</div>

Объяснение примера

HTML: Используйте элемент контейнера (например <div>) и добавьте в него класс "tooltip" . Когда пользователь наведет курсор на этот <div>, он покажет текст всплывающей подсказки.

Текст всплывающей подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext" .

CSS: Класс tooltip применяется position:relative , который необходим для позиционирования текста всплывающей подсказки ( position:absolute ). Примечание: Ниже приведены примеры того, как расположить подсказку.

Класс tooltiptext содержит фактический текст всплывающей подсказки. По умолчанию он скрыт и будет виден при наведении (см. выше). Мы также добавили в него несколько основных стилей: ширину 120px, цвет черного фона, цвет белого текста, центрированный текст, верхний и нижний отступы 5px.

CSS свойство border-radius используется для добавления закругленных углов к тексту всплывающей подсказки.

Селектор :hover используется для отображения текста всплывающей подсказки, когда пользователь наводит указатель мыши на <div> с class="tooltip" .

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

В этом примере всплывающая подсказка находится справа ( left:105% ) от "наведенного" текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине элемента контейнера. Мы используем число 5, потому что текст всплывающей подсказки имеет верхний и нижний отступы 5px. Если вы увеличите его отступ, также увеличьте значение свойства top , чтобы оно оставалось посередине (если это то, что вам нужно). То же самое необходимо, если вы хотите, чтобы подсказка была расположена слева.

Всплывающая подсказка в HTML

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

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

Создадим параграф с текстом
Пропишем ссылку внутри текста
Внутри тега a вставим атрибут aria-label с текстом подсказки
Стилизуем псевдоэлемент after как контейнер для текста всплывающей подсказки
Сделаем при помощи before маленький треугольник
Скроем псевдоэлемент на странице
Покажем всплывающую подсказку при наведении на ссылку в тексте

HTML разметка

Атрибут aria-label вставляется в HTML разметку и используется, как метка для текста всплывающих подсказок. Пропишем в атрибуте текст, который будет находиться внутри всплывающей плашки.

<p>Tarwhine cow shark shortnose chimaera clingfish sleeper shark, trout-perch Alaska blackfish armored gurnard. Loosejaw wels catfish devil ray, dealfish neon tetra pencilsmelt spookfish glassfish southern Dolly Varden Siamese fighting fish; betta delta smelt Antarctic icefish. Lined sole cusk-eel coley midshipman dogteeth <a href=»#» aria-label=»This is extra information»>tetra Moorish</a> idol ronquil halfmoon javelin. Arrowtooth eel triggerfish, sailfish red velvetfish red snapper speckled trout bass mosquitofish scissor-tail rasbora.</p>

Стили CSS

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

/* текст в контейнере */
[aria-label] <
position: relative;
cursor: help;
>

Опишем свойства для псевдоэлемента after, изображающего блок для текста всплывающей подсказки. Изначально, блок с подсказкой должен быть невидимым display: none. Значение свойства white-space: nowrap не учитывает пробелы и переносы в HTML коде, это гарантирует отображение подсказки в одну строку.

/* всплывающий контейнер */
[aria-label]:after <
content: attr(aria-label); /* атрибут метка */
display: none; /* скрываем контейнер */
position: absolute;
top: 110%; /* расстояние от ссылки от верхней границы */
left: 10px; /* смещение влево */
z-index: 2; /* блок поверх параграфа с текстом */
padding: 14px;
line-height: 15px; /* выравнивание подсказки по центру */
white-space: nowrap; /* не переносить на другую строку */
color: #fff; /* цвет подсказки */
background-color: #412917; /* цвет контейнера */
border-left: 8px solid #d37092; /* красная рамка слева */
border-radius: 5px; /* скругленные края блока */
>

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

/* треугольник у контейнера */
[aria-label]:before <
content: » «;
display: none;
top: 66%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
>

При наведении на ссылку, показать всплывающую подсказку.

[aria-label]:hover:after, [aria-label]:hover:before <
display: block;
>

Создание простых всплывающих подсказок на HTML5, CSS и jQuery

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

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

Решение

Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.

Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:

Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.

Для хранения я использую атрибут data-tooltip.
C HTML закончили — можно перейти к стилям.

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

С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.

jQuery

Ну а теперь самое интересное — jQuery.

Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

Вот и все!
В итоге мы получим что-то такое: Демо

Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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