От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в 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 в тегах
На вкладке Анимация выберите эффект анимации, например «Появления», «Выцвета»или «Вылет».
PowerPoint сразу же просмотрите анимацию.
По умолчанию в режиме слайд-шоу после каждого щелчка появляется следующий абзац. Таким образом вы определяете, когда должен появиться каждый абзац. Вы можете изменить этот параметр с помощью элементов управления «Начало»,«Длительность» и «Задержка» в правой части вкладки «Анимация».
Вывод текста по одной букве
Кроме того, можно создать визуальный эффект «ввода», сделав так, чтобы символы в абзаце появлялись по одному.
На слайде выделите поле, содержащее текст.
На вкладке Анимация в меню Добавить анимацию выберите эффект анимации, например «Эффект анимации».
На вкладке Анимация выберите вкладку Анимация, а затем — в области анимации.
Область анимации откроется в правой части окна PowerPoint.
В области анимации выберите стрелку рядом с анимацией и выберите Параметры эффектов.
В диалоговом окне на вкладке Эффект в области Улучшения выберитестрелку рядом с полем Анимироватьтекст и выберите по буквам. Затем можно изменить время задержки в секундах между буквами.
PowerPoint сразу же показывает анимацию, чтобы можно было проверить, как появляются символы. Чтобы повторить предварительный просмотр, выберите анимацию в области анимации и выберите играть выбранным.
См. также
Вывод текста по одной строке
На слайде выделите поле, содержащее текст.
На вкладке Анимация выберите эффект анимации, например «Отобрать», «Растворить»или «Вылет».
Для некоторых эффектов анимации, таких как Вылет,выберите Параметры эффектов на вкладке Анимация, чтобы выбрать направление для вылета маркеров, например снизу, сверху, слева или справа.
Снова выберите Параметры эффектов, а затем выберите По абзацам, чтобы абзацы текста появлялись по одному. (Другой вариант — Всеза один раз — одновременно анимирует все строки текста в замедере или текстовом поле.)
PowerPoint сразу же просмотрите анимацию.
По умолчанию в режиме слайд-шоу после каждого щелчка появляется следующий абзац. Таким образом вы определяете, когда должен появиться каждый абзац. Вы также можете изменить этот параметр с помощью параметров Начало,Длительность и Задержка в области анимации.
Вывод текста по одной букве
Кроме того, можно создать визуальный эффект «ввода», сделав так, чтобы символы в абзаце появлялись по одному.
На слайде выделите поле, содержащее текст.
На вкладке Анимации откройте раскрывающееся меню Добавить анимацию и выберите анимацию, например Возникновение, Появление или Вылет.
На вкладке Анимация выберите вкладку «Анимация» и выберите «Области анимации».
(В PowerPoint для Mac 2011: в меню Вид выберите Настраиваемая анимация).
Область анимации откроется в правой части окна PowerPoint.
В области анимации выберите эффект анимации, который вы хотите изменить, а затем выберите стрелку рядом с параметром Анимация текста.
В текстовом поле Анимировать выберите по буквам.
По умолчанию задержки между буквами отображаются в течение 0,5 секунд, но вы можете изменить это, нажмя стрелку рядом с полем Время, а затем выбрав новое значение в поле Задержка.
PowerPoint сразу же показывает анимацию, чтобы можно было проверить, как появляются символы. Чтобы повторить предварительный просмотр, выберите анимацию в области анимации и выберите играть выбранным.
Анимировать текст в фигуре
Теперь добавим к тексту анимации Вылет и Вращение.
Вы можете выбрать текст фигуры и выбрать вкладку Анимация.
Выберите Вылет в эффекты входа.
Выделим текст еще раз и выберите Вращение в эффекты ударение. Область свойств Анимация теперь имеет следующий вид:
(Необязательно) В области свойств анимации выберите каждый этап анимации и соответствующим образом настройте Параметры эффектов и Время. Дополнительные сведения.
Чтобы просмотреть анимацию, выберите первую анимацию и выберите от.
См. также
Вывод текста по одной строке
На слайде выделите поле, содержащее текст.
На вкладке Анимация выберите эффект анимации, например «Появления», «Выцвета»или «Вылет».
По умолчанию в режиме слайд-шоу после каждого щелчка появляется следующий абзац. Таким образом вы определяете, когда должен появиться каждый абзац.
/style > /head > body > a class =» lake » href =» # » title =»» alt =» Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. «> img src =» images/45.jpg » alt=»»> /a > /body > /html >
.lake:hover:after < -webkit-transform : scale(1) rotate(0deg) translateY(-50%) ; transform : scale(1) rotate(0deg) translateY(-50%) ; > /style > /head > body > a class =» lake » href =» # » title =»» alt =» Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. «> img src =» images/45.jpg » alt=»»> /a > /body > /html >
/style > /head > body > a class =» lake » href =» # » title =»» alt =» Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. «> img src =» images/45.jpg » alt=»»> /a > /body > /html >
На страницы блога на WordPress, изображение вставляется через загрузчик.
Затем, в первых трёх случаях тегу задаётся класс, после чего в файл style.css вносятся стили этого класса.
В четвёртом примере изображение так же загружается через загрузчик, после чего заключается в блок div.
В пятом — картинка загружается в папку images шаблона.
Стили так же вносятся в style.css.
Желаю творческих успехов.
Перемена
Три пути ведут к знанию: путь размышления — это путь самый благородный, путь подражания — это самый легкий, и путь опыта — это самый горький. Конфуций.
Создание простых всплывающих подсказок на 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.
