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

CSS3 Всплывающие подсказки

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

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

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

Пример

/* Текст подсказки */
.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;
>

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

HTML: Используйте элемент контейнера (например, ) и добавьте класс «tooltip» к нему. Когда пользователь наведет курсор на этот , он покажет текст подсказки.

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

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

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

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

Селектор :hover используется для отображения текста всплывающей подсказки при перемещении наведите курсор на с class=»tooltip» .

Расположение подсказок

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

Источник

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

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

Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных 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

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

jQuery

$.jQuery(document).ready(function() < $("[data-tooltip]").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, получат подсказку.

Источник

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

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

Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа.

Как сделать тултип

Создадим всплывающую подсказку для формы, в которой несколько полей для заполнения. Нам нужно разместить подсказку-уточнение к полю «Дети».

Для размещения тултипа создаём в HTML-файле с классом tooltip , который располагается в разметке формы:

Чтобы подсказка всплывала, курсор необходимо наводить на какую-либо область или кнопку. Добавим внутрь небольшую кнопку для наведения:

Иконка для кнопки добавлена в формате SVG, так как это небольшой графический элемент.

Для размещения текста подсказки, создадим ещё один :

     Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Теперь переходим к стилизации тултипа, открываем CSS-файл.

Для начала напишем оформление для кнопки:

Также не забываем стилизовать саму иконку и добавить ей оформление при наведении курсора:

.tooltip-icon < width: 1px; height: 9px; color: #83b3d3; display: block; >.tooltip-toggle:hover .tooltip-icon

С помощью псевдоэлемента :hover мы меняем цвет иконки — в активном состоянии голубой оттенок становится немного темнее.

Затем задаём стиль текстовому блоку, описываем тип и размер шрифта, цвет фона и расположение текста:

Свойство border-radius делает уголки блока плавными, скругляет их.

Теперь нужно добавить стили всему контейнеру тултипа. Важно указать ширину и высоту с помощью свойств width и height , учесть отступы, добавить позиционирование:

После этого ставим текстовый блок на необходимое место по макету, чтобы он располагался по центру относительно кнопки. Добавляем позиционирование и свойство z-index , чтобы расположить текст выше других элементов.

Указываем свойство transform: translateX(-50%) для центрирования подсказки по горизонтали. С помощью свойства display со значением none скрываем блок, чтобы его не было видно постоянно.

И завершающим шагом добавляем появление текстового блока при наведении и фокусе на кнопку:

.tooltip-toggle:hover + .tooltip-text, .tooltip-toggle:focus + .tooltip-text

Несколько важных моментов

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

Чтобы скринридер смог прочитать текст тултипа, ему нужно подсказать назначение блока. Для этого мы связываем кнопку и текст в тултипе с помощью aria-labelledby .

Задаём плашке с текстом role=»tooltip» :

     Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Затем добавляем кнопке атрибут aria-labelledby=»tooltip-label-date» , чтобы указать скринридеру какой контент зачитывать. И ставим id=»tooltip-label-date» на плашку, которая будет зачитываться:

     Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Тултип доступен для чтения скринридером.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

CSS Tooltip

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:

Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element:

Example

/* Tooltip text */
.tooltip .tooltiptext visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text — see examples below! */
position: absolute;
z-index: 1;
>

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext visibility: visible;
>

Example Explained

HTML: Use a container element (like ) and add the «tooltip» class to it. When the user mouse over this , it will show the tooltip text.

The tooltip text is placed inside an inline element (like ) with class=»tooltiptext» .

CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip.

The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover (see below). We have also added some basic styles to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.

The CSS border-radius property is used to add rounded corners to the tooltip text.

The :hover selector is used to show the tooltip text when the user moves the mouse over the with class=»tooltip» .

Positioning Tooltips

In this example, the tooltip is placed to the right ( left:105% ) of the «hoverable» text (). Also note that top:-5px is used to place it in the middle of its container element. We use the number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the top property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.

Источник