Обеспечение дополнительной информации о потенциально сложных элементах интерфейса пользователя является очень важной частью работы веб дизайнера при разработке удобного и доступного веб сайта.
Одним из широко используемых механизмов для вывода дополнительных сведений, кроме тех, что видны на странице, являются всплывающие подсказки(элементы дизайна для отображения подсказок об определённых элементах на экране).
В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.
В данном уроке будет показано, как с использованием только CSS можно сделать чудесные кросс-браузерные всплывающие подсказки.
 |
 |
Где бы не нужно было объяснить аббревиацию или акроним, объяснить значение слова или дать дополнительную информацию о чём-либо, всплывающие подсказки будут простым, но эффективным решением.
Начиная с маленького жёлтого блока с текстом, который появляется над элементом, таким как изображение, и выводит содержание атрибута title (или атрибута alt , если вы к несчастью используете Internet Explorer) до основанных на скриптах изощрённых решений с использованием, всплывающие подсказки являются фантастическим инструментом, который, кажется, мало популярен в сообществе дизайнеров.
Большинство браузеров имеют стили по умолчанию для всплывающих подсказок, хотя они и выглядят не очень симпатично.
В то время как быстро развивающиеся стандарты с новыми методами начинают все лучше и лучше поддерживаться новыми браузерами, развитие CSS также позволяет нам делать всплывающие подсказки (которые служат заменой скучным установкам по умолчанию в браузерах, как на рисунке выше) на новом уровне детализации и оформления.
Если вы уже использовали решения на основе jQuery, то, конечно же, обратите внимание на то, что JavaScript может многое из того, что недоступно CSS(например, задержка перед исчезновением выплывающей подсказки). Но выделение и оформление может быть выполнено с помощью CSS, что способствует улучшению дизайна и вдохновляет на создание других прекрасных решений, которые выходит за рамки всплывающих подсказок.
В данном уроке мы собираемся сделать всплывающие подсказки на чистом CSS .
Это означает, что они будут работать в браузерах, которые не поддерживают CSS3 (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.
Вид эффектов, таких как цвета, шрифты, изображения и рамки для всплывающих подсказок будет зависеть от того, что используется на компьютере конечного пользователя (браузера, установленных шрифтов или контраста монитора).
Расширения CSS3Использование простых, но эффективных расширений, таких как свойства border-radius и box-shadow позволяет придать обычному прямоугольнику всплывающего сообщения новый и симпатичный вид.
Что у нас под капотом?Начнём с кода HTML для нашего примера.
различные типы всплывающих подсказокДля того, чтобы дать вам достаточно идей для ваших собственных проектов, мы сделаем пять различных типов всплывающих подсказок.
Каждый из них выглядит очень похоже на другие, для того, чтобы стандартизировать вывод на экран. Но вы можете потом поэкспериментировать с ними для детального изучения и изменения внешнего вида.
Данный механизм должен работать во всех браузерах, однако, если вам нужно, вы можете изменить его по своему усмотрению.
Основная разметкаВ коде, который приведен ниже, мы используем универсальный шаблон XHTML 1.0 с обычным элементом .
Так как мы используем CSS для построения наших элементов, то с целью обучения CSS встроен в документ с помощью тега .
Также вы можете добавить код jQuery или JavaScript для улучшения эффектов и функциональности, если хотите!
Разметка HTML Всплывающие подсказки Пример всплывающих подсказок, сделанных на CSS!Наведите курсор мыши на надписи чтобы увидеть:
классическую подсказку,
критическое сообщение
Критическое сообщениеЭто просто пример того, как сделать подсказки с использованием CSS!,
помощь
ПомощьЭто просто пример того, как сделать подсказки с использованием CSS!,
информация
ИнформацияЭто просто пример того, как сделать подсказки с использованием CSS!
и предупреждение
ПредупреждениеЭто просто пример того, как сделать подсказки с использованием CSS!.
Это просто пример того, как сделать подсказки с использованием CSS!
В коде используется элемент (ничего особенного с ним не связано) и параграфы (
) для текста, которые содержат элементы ссылок (для которых установлен класс "tooltip").
Почему для всплывающих подсказок используется тег ?Причина того, что мы используем тег a , а не abbr , dfn или span , заключается в том, что IE6 ущербно поддерживает псевдо-селектор:hover для других элементов, отличных от a .
Если вы не собираетесь поддерживать IE6, то можно использовать другой тег.
Для каждого элемента span в примере установлен класс classic (для обычной всплывающей подсказки) или custom (с critical , help , info или warning , которые соответствуют используемой цветовой схеме).
Такое использование стилей также имеет пару бонусов в виде элемента em (устанавливает заголовок всплывающей подсказки) и изображения (которое используется как иконка во всплывающей подсказке, вы можете использовать свои изображения).
CSSУ нас написан код HTML для страницы и пришла пора заставить всплывающие подсказки делать их работу.
Ниже приведённый код, который добавляется в секцию страницы, задаёт для каждой ссылки, содержащий всплывающую подсказку, миленький стиль с подчёркиванием точечной линией (чтобы отличаться от обычной ссылки, которая подчёркивается сплошной линией) и устанавливает курсор со знаком вопроса (тоже для визуальной дифференциации).
Также удаляется подчёркивание и устанавливается цвет (таким образом элемент становится меньше похож на обычную ссылку).
Вторая часть кода просто скрывает всплывающую подсказку до тех пор, пока она не будет нужна.
Все очень просто!
Стили CSS для класса.tooltip .tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; } .tooltip span { margin-left: -999em; position: absolute; }Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left , а не display: none или visibility: hidden , так как некоторые программы для чтения с экрана игнорируют указанные свойства.
Стили 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);
В данном уроке продемонстрировано, что для улучшения интерфейса не нужно прилагать больших усилий. Кроме того, стоит пересмотреть опыт использования CSS, который может быть полезным в вопросе установки нового уровня интерактивности веб приложения.
HTML подсказка — это блок с дополнительной информацией, который появляется при наведении курсора мыши на определенный элемент веб-страницы. Сегодня мы создадим собственную всплывающую подсказку с помощью HTML и CSS :
Посмотреть демо-версию | Скачать исходный кодМы сможем использовать CSS-подсказки для большинства элементов, таких как ссылки, теги, стилизованный текст и т.д. Нам нужно будет применить к элементу несколько классов и добавить атрибут data- с текстом всплывающей подсказки.
Настройка документаНам нужно создать HTML-документ и задать исходную разметку:
Tooltips Demo // контент
Я добавил ссылку на 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 bottom
- 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 элементы могут иметь всплывающие подсказки
Глава содержит примеры всплывающих подсказок из области Гипертекстовой разметки.
В меню слева вы найдете современные и очень подробные уроки по HTML.
Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.
В данной главе мы рассмотрим
Прежде, чем приступить к HTML подсказкам , предлагаю прочитать информацию.
Это может быть интересно.
Основные тенденции раннего интернета
Начиная с 1997 года, вслед за появлением первых браузеров, часть потребителей активно специализируются в различных областях интернета , как и в сфере информационных технологий, и поддержке компьютерной техники. Многие пользователи становятся веб-дизайнерами, начинают создавать личные и корпоративные сайты, участвуют в сооружении локальных компьютерных сетей. Таким образом они самообразовываются. Подобное положение вещей сохранилось до наших дней. Сегодня очень модно и удобно получать знания посредством Всемирной паутины. Сегодня и особенно тогда, в середине 90-х годов прошлого века, бывшие социалистические страны нуждаются в специалистах по программированию. Есть спрос - будет и предложение. Программисты обучаются в массовом порядке - кто в университетах, кто дома перед экраном компьютера. В эти сказочные времена большую популярность обретают форумы по программированию, где молодые и не очень специалисты обмениваются своим опытом и идеями.
Всплывающая подсказка для HTML ссылкиЗдесь все почти тоже самое: атрибут title="" определяет всплывающую HTML подсказку .
alt="" изображения определяет альтернативный текст, который будет показан на странице, если не отобразится картинка.
Не стоит путать HTML подсказку и альтернативный текст, так как это совершенно различные вещи.
Всплывающая HTML подсказка для текстаHTML подсказка применяется практически ко всем элементам страницы.
Выражаясь по-другому, знакомый нам из примеров выше title="" могут иметь теги заголовков всех уровней, теги параграфов, блоков, изображения и линейные элементы, такие как , и другие.
Имею опыт размещения атрибута title="" в тегах заголовков первых уровней и в ссылках.
Лично я использую всплывающие подсказки , естественно, в рамках неизбежных любительских экспериментов по поисковой оптимизации текста сайта. Не берусь судить, насколько мои опыты оказались успешными. Честно говоря, результат подобной оптимизации проследить трудно, а вот переборщить с ключевыми словами и фразами можно очень легко. Поэтому будьте осторожны и не переусердствуйте в своем продвижении, так как всегда рискуете быть наказаны поисковиками.
Обеспечение дополнительной информации о потенциально сложных элементах интерфейса пользователя является очень важной частью работы веб дизайнера при разработке удобного и доступного веб сайта.
Одним из широко используемых механизмов для вывода дополнительных сведений, кроме тех, что видны на странице, являются всплывающие подсказки(элементы дизайна для отображения подсказок об определённых элементах на экране).
В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.
В данном уроке будет показано, как с использованием только CSS можно сделать чудесные кросс-браузерные всплывающие подсказки.
Всплывающие подсказки - это круто!Где бы не нужно было объяснить аббревиацию или акроним, объяснить значение слова или дать дополнительную информацию о чём-либо, всплывающие подсказки будут простым, но эффективным решением.
Начиная с маленького жёлтого блока с текстом, который появляется над элементом, таким как изображение, и выводит содержание атрибута title (или атрибута alt , если вы к несчастью используете Internet Explorer) до основанных на скриптах изощрённых решений с использованием, всплывающие подсказки являются фантастическим инструментом, который, кажется, мало популярен в сообществе дизайнеров.
Усиление эффекта воздействия всплывающих подсказок
Большинство браузеров имеют стили по умолчанию для всплывающих подсказок, хотя они и выглядят не очень симпатично.В то время как быстро развивающиеся стандарты с новыми методами начинают все лучше и лучше поддерживаться новыми браузерами, развитие CSS также позволяет нам делать всплывающие подсказки (которые служат заменой скучным установкам по умолчанию в браузерах, как на рисунке выше) на новом уровне детализации и оформления.
Если вы уже использовали решения на основе jQuery, то, конечно же, обратите внимание на то, что JavaScript может многое из того, что недоступно CSS(например, задержка перед исчезновением выплывающей подсказки). Но выделение и оформление может быть выполнено с помощью CSS, что способствует улучшению дизайна и вдохновляет на создание других прекрасных решений, которые выходит за рамки всплывающих подсказок.
Что мы собираемся сделатьВ данном уроке мы собираемся сделать всплывающие подсказки на чистом CSS .
Это означает, что они будут работать в браузерах, которые не поддерживают CSS3 (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.
Вид эффектов, таких как цвета, шрифты, изображения и рамки для всплывающих подсказок будет зависеть от того, что используется на компьютере конечного пользователя (браузера, установленных шрифтов или контраста монитора).
Расширения CSS3Использование простых, но эффективных расширений, таких как свойства border-radius и box-shadow позволяет придать обычному прямоугольнику всплывающего сообщения новый и симпатичный вид.
Что у нас под капотом?Начнём с кода HTML для нашего примера.
различные типы всплывающих подсказокДля того, чтобы дать вам достаточно идей для ваших собственных проектов, мы сделаем пять различных типов всплывающих подсказок.
Каждый из них выглядит очень похоже на другие, для того, чтобы стандартизировать вывод на экран. Но вы можете потом поэкспериментировать с ними для детального изучения и изменения внешнего вида.
Кросс-браузерная совместимостьДанный механизм должен работать во всех браузерах, однако, если вам нужно, вы можете изменить его по своему усмотрению.
Основная разметкаВ коде, который приведен ниже, мы используем универсальный шаблон XHTML 1.0 с обычным элементом .
Так как мы используем CSS для построения наших элементов, то с целью обучения CSS встроен в документ с помощью тега .
Также вы можете добавить код jQuery или JavaScript для улучшения эффектов и функциональности, если хотите!
Разметка HTML Всплывающие подсказки Пример всплывающих подсказок, сделанных на CSS!Наведите курсор мыши на надписи чтобы увидеть: классическую подсказку, критическое сообщение
Критическое сообщениеЭто просто пример того, как сделать подсказки с использованием CSS!,
помощьПомощьЭто просто пример того, как сделать подсказки с использованием CSS!,
информацияИнформацияЭто просто пример того, как сделать подсказки с использованием CSS!
и предупреждениеПредупреждениеЭто просто пример того, как сделать подсказки с использованием CSS!.
Это просто пример того, как сделать подсказки с использованием CSS!В коде используется элемент (ничего особенного с ним не связано) и параграфы (
) для текста, которые содержат элементы ссылок (для которых установлен класс "tooltip").
Почему для всплывающих подсказок используется тег ?Причина того, что мы используем тег a , а не abbr , dfn или span , заключается в том, что IE6 ущербно поддерживает псевдо-селектор:hover для других элементов, отличных от a .
Если вы не собираетесь поддерживать IE6, то можно использовать другой тег.
Для каждого элемента span в примере установлен класс classic (для обычной всплывающей подсказки) или custom (с critical , help , info или warning , которые соответствуют используемой цветовой схеме).
Такое использование стилей также имеет пару бонусов в виде элемента em (устанавливает заголовок всплывающей подсказки) и изображения (которое используется как иконка во всплывающей подсказке, вы можете использовать свои изображения).
CSSУ нас написан код HTML для страницы и пришла пора заставить всплывающие подсказки делать их работу.
Ниже приведённый код, который добавляется в секцию страницы, задаёт для каждой ссылки, содержащий всплывающую подсказку, миленький стиль с подчёркиванием точечной линией (чтобы отличаться от обычной ссылки, которая подчёркивается сплошной линией) и устанавливает курсор со знаком вопроса (тоже для визуальной дифференциации).
Также удаляется подчёркивание и устанавливается цвет (таким образом элемент становится меньше похож на обычную ссылку).
Вторая часть кода просто скрывает всплывающую подсказку до тех пор, пока она не будет нужна.
Все очень просто!
Стили CSS для класса.tooltip .tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; } .tooltip span { margin-left: -999em; position: absolute; }Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left , а не display: none или visibility: hidden , так как некоторые программы для чтения с экрана игнорируют указанные свойства.
Стили 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);
РезюмеВ данном уроке продемонстрировано, что для улучшения интерфейса не нужно прилагать больших усилий. Кроме того, стоит пересмотреть опыт использования CSS, который может быть полезным в вопросе установки нового уровня интерактивности веб приложения.
Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных div-контейнеров для подсказок, или создание всплывающих подсказок на чистом CSS, я нашел универсальное решение, которое не будет загромождать код, будет кроссбраузерним, и в то же время будет очень простым для реализации.
Решение Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.HTML Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:
Всех, кого заинтересовал мой способ решения этой простой задачи, прошу под кат.
Всплывающие подсказки Ссылка
Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.
Ссылка
Для хранения я использую атрибут data-tooltip.
C HTML закончили - можно перейти к стилям.CSS Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.
@import "css/elements.less"; #tooltip { z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); .rounded(5px); }
С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.jQuery Ну а теперь самое интересное - jQuery.
$.jQuery(document).ready(function() { $("").mousemove(function (eventObject) { $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css({ "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 }) .show(); }).mouseout(function () { $("#tooltip").hide() .text("") .css({ "top" : 0, "left" : 0 }); }); });// Ready end.
Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.Вот и все!
В итоге мы получим что-то такое: ДемоБлагодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.
Спасибо за внимание!
