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

Содержание

Создание кастомного title

Кастомный «title» (в простонародье tooltip — «Подсказка»)

Проблема

1. В мобильной версии сайта не отображался стандартный html-атрибут «title», так как нет реакции на наведение.;
2. На сайте html-атрибут «title» содержит текст разного размера и ссылки на другие страницы, при этом перейти по ссылкам не представлялось возможным.

Решение

Для элементов на которых должны отображаться подсказки используется тег «span», к которому добавляется data-атрибут, который мы назвали «data-comment». С помощью класса «.js-span-comment» инициализируется работа js-скрипта.

Javascript использует метод innerHTML, благодаря чему мы можем вставлять содержимое атрибута в виде верстки:

Как работает Javascript код:

Пояснения к коду:

1. Функция самовызывающаяся, сделана в виде модуля. Внутри есть главный метод init(), в котором мы ищем все подсказки на странице. Если мы не находим ни одного, тогда функция завершается;
2. Если мы находим подсказку, тогда на документ мы вешаем слушателя с событием «click». По клику мы проверяем наличие data-атрибута. Если data-атрибут найден, мы проверяем переменную «flag», если у неё значение «true», тогда мы создаем подсказку. Создается он динамически. Переменная «flag» переключается в «false», чтобы не было создания повторной подсказки;
3. Также мы вешаем на window событие «scroll», по которому любая открытая подсказка будет удалена из документа;
4. Есть дополнительное условие, при котором мы проверяем ширину экрана при первичном срабатывании функции. Если ширина > 992 px., тогда на подсказку мы вешаем событие «mouseover» (когда курсор находится над тегом «span», который должен показать подсказку). Таким образом мы эмулируем событие «hover». Исчезает подсказка, только если сначала навести на неё курсор, а потом убрать.
   Сделано это ради того, чтобы пользователь мог скопировать содержимое, либо перейти по ссылке, указанной в подсказке.

Как позиционируется подсказка:

Системный тег «title» не зависит от ширины экрана браузера и появляется в том месте, где мы навели курсор.

В нашем случае подсказка — это «span» со своими стилями и требовалось выбрать объект, относительно которого должно быть позиционирование. Можно было привязать так же к курсору, но тогда возникли бы проблемы, когда пользователь мог вызвать подсказку у края экрана (например слева, слишком близко к краю). Поэтому было выбрано позиционирование от начала строки, потому что некоторые блоки, на которые должна быть подсказка, могут быть очень длинными и в зависимости от ширины экрана находится в разных местах.

Как работает позиционирование:

При создании подсказки мы находим координаты нашего блока с подсказкой. После чего, вычисляем координаты относительно окна браузера и позиционирования подсказки с {position:fixed} в CSS-стилях.

Координаты находим с помощью метода getBoundingClientRect(). Координата «left» = это left нашего блока с подсказкой. Координата «top» = это сумма высоты нашего блока + координата «top» + 3 px. (чтобы наша подсказка не закрывала текст).

Результат

Когда требуется дополнительный функционал (см. примеры ниже), можно использовать кастомную подсказку. В остальных случаях лучше обойтись стандартным тегом «title».

1. На мобильных устройствах появилась возможность отображать подсказки и взаимодействовать с ними:

2. Появилась возможность копировать текст из подсказок:

3. Появилась возможность переходить по ссылкам в подсказке:

Как сделать подсказки для полей ввода HTML — атрибут placeholder для input, select, textarea

28.

07.18 ИТ / HTML 5914

При добавлении полей ввода на страницы сайта для них необходимо указывать вспомогательный текст – подсказки, которые объясняют предназначение полей. Раньше такие подсказки обычно делались просто путем добавления строки текста выше над полем, но можно было встретить самописные решения, которые выполняли роль нового атрибута placeholder.

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

value. Когда пользователь кликнет на поле — при помощи JavaScript происходило удаление текста и если пользователь ничего не оставил в поле, то при удалении фокуса — подсказка возвращалась на свое место опять же при помощи JavaScript. Также необходимо было изменять цвет текста на более светлый при помощи CSS-свойств, чтобы он выглядел как подсказка, а не обычный текст. То есть, данное решение требовало дополнительного написания кода.

Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type=»text»

со временем был разработан и добавлен специальный атрибут – placeholder. Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.

На настоящее время поддержка атрибута placeholder есть во всех современных браузерах. Браузеры, не поддерживающие данный атрибут, просто игнорируют его. Существуют специальные разработки – полифилы, которые при помощи JavaScript реализуют работу атрибута placeholder. Поэтому можно просто писать данный атрибут, а в крайних случаях для остальных браузеров использовать полифилы.

 <input type="text" placeholder="Введите текст">

Но как быть с другими типами полей input? Например, type=»checkbox» и type=»radio». Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:

<label>
	<span>Отметьте нужное:</span>
	<input type="checkbox">
</label>

Для select нет атрибута placeholder, но можно сделать подсказку внутри поля простым способом – ею будет первый

option из этого select. Можно визуально выделить его, например, добавить вначале и в конце дефис.

<select>
	<option value="- Выберите значение -">- Выберите значение -</option>
	<option value="Значение 1"> Значение 1</option>
	<option value=" Значение 2"> Значение 2</option>
	<option value=" Значение 3"> Значение 3</option>
</select>

Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea

.

<textarea>Введите текст</textarea>

Краткий итог, как сделать подсказки для полей ввода HTML:

• для input type=»text» следует использовать атрибут placeholder;
• для остальных типов input можно использовать тег label;
• для select используется подсказка в виде первого option;
• для textarea подсказка размещается внутри данного тега.

Мы рассмотрели, каким образом можно сделать подсказки для различных полей ввода HTML, даже если они не поддерживают атрибут

placeholder.

Мои заметки WebDev: как создать всплывающую подсказку с помощью HTML и CSS

Введение

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

HTML

Текст всплывающей подсказки содержится в части другого текста на веб-странице, в большинстве случаев этот текст представляет собой абзац, поэтому HTML 9Тег 0013 span используется для его заключения.

 
<дел>
    Наведите на меня Это всплывающая подсказка

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

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

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

Кроме того, свойство display изменено на inline-block . Это препятствует тому, чтобы родитель всплывающей подсказки охватывал всю область просмотра браузера.

 .подсказка {
    положение: родственник;
    отображение: встроенный блок;
    нижняя граница: 1 пиксель с черными точками;
}
 

Теперь вы можете расположить текст всплывающей подсказки. Поскольку родительский контейнер имеет позицию относительно , для текста всплывающей подсказки может быть установлено значение 9.0013 абсолютный . Поэтому вы можете использовать свойства смещения, чтобы точно расположить его над текстом Hover over me . Наконец, вам нужно, чтобы текст всплывающей подсказки постоянно появлялся поверх родительского текста, z-index позаботится об этом. Остальные стили — косметика.

 .tooltip .tooltiptext {
    положение: абсолютное;
    внизу: 125%;
    слева: 50%;
    видимость: скрытая;
    z-индекс: 1;
    /* Косметика */
    цвет: #fff;
    цвет фона: #555;
    ширина: 120 пикселей;
    выравнивание текста: по центру;
    отступ: 5px 0;
    поле слева: -60px;
    радиус границы: 6px;
    непрозрачность: 0;
    переход: непрозрачность 1с;
}
 

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

Чтобы добиться этого, вы будете использовать псевдоэлементы CSS, в частности ::after .

 .tooltip .tooltiptext::после {
    /* Прочтите код и объяснение */
}
 

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

 .tooltip .tooltiptext::после {
    положение: абсолютное;
    содержание: "";
    /* Переместите его в центр */
    верх: 100%;
    слева: 50%;
    /* Это создает индикаторы */
    поле слева: -5px;
    ширина границы: 5px;
    стиль границы: сплошной;
    цвет границы: #555 прозрачный;
}
/**
 * Показывать всплывающую подсказку при наведении курсора на
 * Контейнер всплывающей подсказки
 */
. tooltip: наведение .tooltiptext {
    видимость: видимая;
    непрозрачность: 1;
}
 

Готовая всплывающая подсказка показана в GIF ниже:

Вы можете проверить ее онлайн.

Репозиторий GitHub для этой серии:

Фрагменты кода для серии статей на DEV о моих экспериментах в веб-разработке

Этот репозиторий содержит фрагменты кода и ссылки на серию статей в DEV о моих экспериментах в веб-разработке.

• Мои заметки WebDev: загрузчики CSS, опубликованные в 25 ^-е Февраль 2020
• Мои заметки WebDev: таблица фильтров опубликована 1 ^st апреля 2020
• Примечания MyWebDev: центральные элементы страницы с CSS Grid опубликованы 3 ^rd апреля 2020
• Мои заметки WebDev: фотогалерея с CSS Grid, опубликованная 7 ^th апреля 2020
• Мои заметки WebDev: полноэкранная оверлейная навигация опубликована 13 ^th апреля 2020
• Мои заметки WebDev: простой и доступный аккордеон, опубликованный 28 сентября. 0103-й от апреля 2020 года
• Мои заметки WebDev: как создать всплывающую подсказку с помощью HTML и CSS, опубликованную 3 ^rd февраля 2021 г.
• Как создать модальное окно, опубликованное 22 ^nd июня 2021

Посмотреть на GitHub

Фотография на обложке от Ferenc Almasi на Unsplash.

Сценарии Dynamic Drive DHTML — Подсказка всплывающей подсказки в формате HTML

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

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

Демонстрации:

Добро пожаловать в библиотеку CSS Dynamic Drive! Здесь вы найдете оригинальные, практичные коды CSS и примеры, такие как меню CSS, чтобы придать вашему сайту визуальную гордость.

Подробные руководства по JavaScript и более 400 бесплатных скриптов: JavaScript Kit

Оригинальные, практичные коды CSS и примеры, такие как меню CSS, чтобы придать вашему сайту визуальную гордость!

Отмеченные наградами учебники по JavaScript и более 400 бесплатных скриптов.

Направления:

Шаг 1: Этот сценарий использует два внешних файла, плюс два изображения для дополнительного интерфейса со стрелкой. Скачать:

«balloontip.js» и «balloontip.css» (щелкнув правой кнопкой мыши каждый файл и выбрав «Сохранить как»), а также два изображения ниже:

Обязательно загрузите их в каталог вашей веб-страницы.

Затем добавьте приведенный ниже код в раздел HEAD вашей страницы:

Выбрать все

Шаг 2: Сделав все вышеперечисленное, все, что Осталось определить всплывающие подсказки с помощью простого HTML, а затем назначить их определенные ссылки на странице. Вставьте приведенный ниже образец HTML в BODY. раздел вашей страницы:

Выбрать все
Библиотека CSS Dynamic Drive

Набор JavaScript

Оригинальные, практичные коды CSS и примеры, такие как меню CSS, чтобы придать вашему сайту визуальную гордость!

Удостоенные наград учебники по JavaScript и более 400 бесплатных скриптов.