выберите фрагмент html кода создающий ссылку со всплывающей подсказкой
Всплывающая подсказка в HTML
На этом уроке, мы реализуем всплывающую подсказку на чистом CSS при наведении на фрагмент выделенного текста или ссылку. Начнем с того, что мысленно прокрутим у себя последовательность действий.
HTML разметка
Атрибут aria-label вставляется в HTML разметку и используется, как метка для текста всплывающих подсказок. Пропишем в атрибуте текст, который будет находиться внутри всплывающей плашки.
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 tetra Moorish idol ronquil halfmoon javelin. Arrowtooth eel triggerfish, sailfish red velvetfish red snapper speckled trout bass mosquitofish scissor-tail rasbora.
Стили 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]:hover:after, [aria-label]:hover:before <
display: block;
>
Как делается в html всплывающая подсказка?
Дата публикации: 2016-10-20
От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.
Стандартная подсказка
По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.
В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:
Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.
Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.
Способ на чистом css
Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:
Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.
Итак, для начала опишем стили для контейнера. Относительное позиционирование нужно нам потому, что мы будем позиционировать абсолютно блок с поясняющим текстом, чтобы позиционирование происходило относительно родительского блока, а не всей страницы.
Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.
Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:
Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.
Способ 2. Чистый css и плавное появление
Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.
Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах
Все права защищены © 2021
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки
Создание подсказок в ссылках
Подсказки ( tooltips, screentips ), отображаемые браузером при наведении на объект или ссылку – отличный способ сообщить что-либо посетителю сайта.
Позиционирование подсказок сверху, снизу, справа или слева от ссылки
Стили
Теперь, когда разметка готова, зададим оформление ссылок:
Как видите, наши подсказки являются строчными ( inline ) элементами с относительным позиционированием. Добавим подсказкам визуальной привлекательности, поместив их в прямоугольник со скруглёнными краями. Позиционированием подсказок мы будем управлять с помощью полей ( margin ) и свойства position:
Селектор :hover поможет нам сделать подсказки видимыми, когда это нужно. А :after определит окончательное местоположение подсказки.
Изменение цвета подсказки
Теперь, когда мы задали основу подсказки, изменить её отдельные параметры вроде цвета не составит труда. Во-первых, нужно задать цвет фона (атрибут background ) элемента span :
В нижеприведённом примере мы изменим цвет подсказки, располагающейся снизу ссылки. Поэтому манипуляции нужно проводить со свойством border-bottom :
Добавление анимации к подсказке
Возможности CSS3 позволяют нам добавить современно выглядящие эффекты к нашим подсказкам. Давайте научимся пользоваться эффектами угасания ( fading ) и скольжения ( sliding ).
Заметьте, что функция перехода ease-in-out обеспечивает наиболее плавное возникновение и угасание подсказки.
Отображение картинки в подсказке
Следующая задача – самая простая в нашем сегодняшнем уроке. Просто поместите картинку в span и задайте ссылке соответствующий класс. Если вы хотите добавить также и текст, отрегулируйте соответствующим образом размер изображения. Вот пример разметки:
Заключение
Надеюсь, вам понравилось то, что вы узнали сегодня. До встречи!
Создание простых всплывающих подсказок на 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, получат подсказку.
Всплывающие подсказки на CSS
Всплывающие подсказки на CSS
Всплывающие подсказки выполняют роль ненавязчивого знатока на сайте. Если вам нужна помощь, вы наводите курсор мыши на непонятную фразу, и рядом появляется всплывающая подсказка с кратким ответом на вопросительный взгляд читателя.
Такие подсказки помогают пользователю подружиться с интерфейсом ресурса, разобраться с терминологией или узнать перевод иностранного слова. Создать всплывающие подсказки на CSS довольно просто. Предлагаю немного потренироваться и создать один интересный вариант. Однако для начала разберем основной принцип создания всплывающих подсказок.
Базовый код для создания всплывающих подсказок на CSS
1. Для начала добавим в HTML-файл ссылку, рядом с которой будет появляться подсказка:
Мы создали ссылку, с классом «tooltip» и атрибутом data-info.
Больше в HTML-файл мы добавлять ничего не будем. Предлагаю приступить к редактированию CSS-файла.
2. В html-файле мы для ссылки задавали атрибут data-info, в котором хранится подсказка. Давайте выведем подсказку на экран рядом со ссылкой. Для этого используем псевдоэлемент :after
Смотрим, что получилось:
Теперь на нашей странице прямо рядом со ссылкой выводится подсказка. Неказистенькая такая, и совсем не реагирует на курсор мыши… Спокойно! Все идет по плану: красоту мы будем наводить после. А сейчас спрячем подсказку от посторонних взглядов, и будем показывать только самым любопытным, и только при наведении курсора на ссылку. Для этого воспользуемся помощью псевдокласса :hover и шапкой-невидимкой от visibility: hidden. Свойство visibility: hidden мы добавим в уже созданный селектор:
А теперь сделаем так, чтобы подсказка появлялась при наведении курсора мыши. Для этого пропишем свойство visibility:visible для селектора .tooltip:hover:after
Проверяем: подсказка появляется при наведении курсора мыши на ссылку!
Развернуть базовый HTML-код для всплывающей подсказки
Однако, сейчас подсказка выглядит непрезентабельно, нужно поработать над дизайном, да и рассмотреть варианты позиционирования подсказки не помещает. C позиционирования мы и начнем.
Меняем положение всплывающей подсказки
Для того, чтобы изменить положение подсказки, определим свойство position: absolute и зададим позицию относительно родителя подсказки. А родителю подсказки, то есть ссылке с классом .tooltip зададим position: relative. Для расположения подсказки выше ссылки, будем определять положение нижней границы подсказки, т. е. bottom. В этом случае, если подсказка будет занимать несколько строк по высоте, то расти она будет вверх, не загораживая ссылку. И напротив, чтобы подсказка выводилась ниже ссылки, определим свойство top. Для горизонтального расположения подсказки будем определять свойства: left, right и bottom. Кроме того, предлагаю сразу определить минимальную ширину подсказки, например, 180px. Дополним этими свойствами селектор .tooltip:after
Слева от ссылки
Стилизуем подсказку
Пришло время привести внешний вид подсказки в приемлемый вид! Для этого в любимый нами селектор .tooltip:after добавим свойства:
После этого, список свойств селектора .tooltip:after для подсказки сверху в CSS-файле будет выглядеть так:
Добавляем треугольник к подсказке
Поздравляю! Код всплывающей подсказки создан! Проверить работоспособность подсказок можно по ссылке: «Демонстрация всплывающих подсказок«. А по ссылке ниже я выложу коды файлов с примерами подсказок, всплывающих в разных положениях: ниже, выше, левее и правее ссылки. Соответственно, в HTML-файле каждой из таких ссылок присвоен говорящий класс: tooltip-bottom, tooltip-top, tooltip-left, tooltip-right, а также класс tooltip со свойствами, общими для каждого вида подсказок. Скачать файлы с кодом.