Можно ли изменить вид всплывающей подсказки


Содержание

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

Всплывающая подсказка в HTML

Согласно w3.org

  1. текст атрибута alt отображается, когда не может быть показан объект,
  2. текст атрибута title отображается во всплывающей подсказке, когда курсор мышки наведён на элемент.
содержимое
Пример: title=»про атрибут title: содержимое в большинстве случаев не индексируется поисковыми системами»> наведи на меня
Результат: наведи на меня
Пример: наведи на меня
Результат: наведи на меня

Появляющаяся подсказка (сообщение) в JavaScript

Пример: нажми на меня
Результат: нажми на меня

Своя всплывающая подсказка к тексту

Что будет работать на CSS

Желательное поведение подсказки:

  1. появляться с небольшой задержкой, чтобы не мешать незаинтересованным в подсказке посетителям,
  2. появляться по центру (слева/справа) наводимого элемента,
  3. адаптироваться к ширине и высоте окна браузера,
  4. иметь HTML-содержимое (изображение, ссылка), а не только текст,
  5. подстраиваться под содержимое (или не более содержимого, или не более указанной величины, или не более окна браузера),
  6. работать на сенсорных экранах (появляться и при наведении, и при нажатии),
  7. индексироваться поисковыми системами.

Примеры: наведи на меня (по центру) В статье «Как заработать деньги в интернете» можно увидеть практическое использование , наведи на меня (влево) Важно: tabindex в теге нужен чтобы срабатывал :focus , наведи на меня (вправо) Ничто так не воодушевляет, как сознание своего безнадёжного положения Альбер Камю

Пример с анимацией: наведи на меня Короткая

Что нельзя сделать без JavaScript

Желательное поведение:

  1. находится в видимой области окна браузера.

Пример: наведи на меня Даже когда ширина подсказки меньше окна браузера, она может уходить за край видимой области, так как подсказка располагается относительно элемента, а не относительно HTML-документа

Как сделать всплывающую подсказку, появляющуюся рядом с курсором мышки или рядом с тем местом, куда нажал посетитель

21 комментарий:

Павел Каким образом относится высказывание:»Это правило не относится к IE, поэтому лучше указать оба атрибута.» к IE? Означенные атрибуты собственно нужны не столько пользователям и браузерам, а поисковикам. Так как первым(тем кто ищет информацию отключив мультимедию) до лампочки изображения(а ссылка, как правило анонсируется), из вторых как раз таки правильно отображает указанные атрибуты IE. Вот у гугловского хрома проблема с alt. NMitra Спасибо за то, что обратили внимание на этот момент. Строку убрала, дабы не вводить в заблуждение читателей. Я имела ввиду то, что версии ниже IE 8 отображают подсказку при наведении мышки на изображение, если в теге img указан alt (без title). Серебро Оригинальное оформление. Только свойства CSS у вас прописаны для блоков podskazka, а сама конструкция подсказки привязана к блоку priskazka, что может привести к ошибкам в оформлении у читателей, взявших ваш пример на вооружение. NMitra Совершено верно. Благодарю за замечание. Бегу исправлять PANIC Я хочу, чтобы при наведении на ссылку в гаджете «страницы» (или «список ссылок») появлялась всплывающая подсказка (как у Вас вверху).
Но куда и что вставлять. не могу понять NMitra Нужно прописывать тегу a атрибут title. Это возможно либо в гаджете HTML/JavaScript, либо если размещать ссылки прямо в шаблоне. Maniak помогите привязать к картинке а картинку сделать к левому краю экрана — хочу сделать всплывающие контакты сейчас работает только после нажатия NMitra Похоже вы справились без моей помощи. К сожалению, ранее не было возможности ответить — находилась вне связи. Мишаня Скажите, пожалуйста, а можно установить какой-нибудь код, чтобы на всех размещённыхв блоге фотографиях оторбажались её свойства (размер и габариты). NMitra Правая кнопка мышки — «Информация об изображении» даст всю необходимую информацию. Можно прописать title элементу, где указать размеры. Как автоматизировать этот процесс, я точно не скажу.

Как делается в html всплывающая подсказка?

Дата публикации: 2020-10-20

От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.

Стандартная подсказка

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

В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

Способ на чистом css

Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

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

Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

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

Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.

Способ 2. Чистый css и плавное появление

Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.

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

Все права защищены © 2020
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Создание всплывающих подсказок с использованием только CSS

24 апреля 2015 | Опубликовано в css | 2 Комментариев »

Во всех браузерах можно создать простые всплывающие подсказки для элементов HTML, используя атрибут title (название), как в примере ниже.

Атрибут HTML title

Код HTML, расположенный выше, создаст следующий эффект:

Если навести указатель мыши на расположенную выше ссылку, появится обычная браузерная всплывающая подсказка с текстом: «Example of Tooltip» (пример всплывающей подсказки).

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

Код CSS для всплывающей подсказки

Есть несколько способов, чтобы задать стили всплывающим подсказкам.

Можно задать стили CSS атрибуту title и использовать псевдоэлементы :before или :after, чтобы добавить содержимое в код CSS, например, следующим образом:

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

Но в этом уроке мы покажем, как создать всплывающие подсказки, используя только CSS и не используя JavaScript.

Чтобы создать всплывающие подсказки на чистом CSS, нужно удалить атрибут title из ссылки и вставить текст всплывающей подсказки в тег span в ссылке.

Вот код HTML, который понадобится для ссылок:

Теперь нужно, чтобы содержимое тега span появлялось при наведении указателя мыши на ссылку, этого можно добиться с помощью кода CSS ниже:

Для начала нужно спрятать первый тег span, используя свойство display: none;, после чего задать нужные для всплывающей подсказки стили.

Все, что остается сделать, — показывать всплывающую подсказку при наведении указателя мыши на ссылку, используя следующий код CSS:

Теперь у нас есть работающие всплывающие подсказки на чистом CSS3.

Использование разных всплывающих подсказок

В примере выше все всплывающие подсказки будут одинаковыми, но как быть, если нужно задать другие стили некоторым всплывающим подсказкам? Наиболее простой способ сделать это — добавить классы тегам span, после чего задавать стили этим классам в CSS.

Если нужно изменить цвет фона с черного на другой цвет, это можно сделать, например, так:

Код CSS для изменения цвета фона будет таким:

Посмотрите пример, чтобы увидеть, как это будет работать.

Автор урока Paul Underwood

Руководство по всплывающим подсказкам (Tooltips)

Всплывающие подсказки (Tooltips) – это сообщения, инициируемые пользователем, которые предоставляют дополнительную информацию об элементе или функции страницы. Хотя всплывающие подсказки для Интернета не в новинку, зачастую они неправильно применяются.

Всплывающие подсказки не являются чем-то новым, но они по-прежнему используются неправильно.

Читайте также:

Определение: всплывающая подсказка – это краткое информативное сообщение, которое появляется, когда пользователь взаимодействует с элементом в графическом интерфейсе пользователя (GUI). Всплывающие подсказки обычно инициируются одним из двух способов: жестом наведения курсора мыши или жестом наведения клавиатуры.

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

Подсказки могут быть прикреплены к любому активному элементу на странице (иконки, текстовые ссылки, кнопки и т. д.). Они описывают или объясняют элемент. Таким образом, всплывающие подсказки очень контекстуальны и специфичны и не объясняют общую картину или весь поток задач.

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

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

Всплывающие подсказки (Tooltips) vs. Подсказки в диалоговом окне (Popup Tips)

Хотя всплывающие подсказки в основном ограничены ПК и ноутбуками, у них есть родственный элемент, который является общим на устройствах с сенсорным экраном –диалоговое окно с подсказкой. Оба элемента преследуют одну и ту же цель: предоставить полезный дополнительный контент. В следующей таблице приведены основные сходства и различия между всплывающими подсказками и подсказками в диалоговом окне.

Всплывающие подсказки Диалоговое окно с подсказкой
Тип сайта Десктопный Любой
Что вызывает Наведение курсора (при помощи мыши или клавиатуры) Касание/клик
Когда закрывается Пользователь покидает предопределенную область взаимодействия Пользователь нажимает, чтобы закрыть или нажимает на другую область экрана
Связанный элемент Иконка, текстовая ссылка, кнопка, изображение “?” или иконка “i”
Тип контента Микроконтент Микроконтент

Эта статья будет посвящена всплывающим подсказкам и их использованию на десктопных сайтах.

Руководство по использованию всплывающей подсказки

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

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

Не делайте:

На веб-сайте Amtrak требования к паролю указаны во всплывающей подсказке (доступ к которой осуществляется при наведении мыши). Этот тип информации важен, чтобы пользователь, успешно завершил процесс создания аккаунта, и поэтому всегда должен присутствовать на экране.

Делайте:


FedEx использовал всплывающие подсказки, чтобы предоставить дополнительную информацию для полей формы доставки. Например, в поле «Электронная почта» была всплывающая подсказка, объясняющая, почему это поле было указано в списке. (Доступ к этой подсказке осуществлялся при наведении курсора мыши).

2. Предоставьте во всплывающей подсказке краткий и полезный контент

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

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

Не делайте:

На веб-сайте Sprint кнопка с надписью: «Добавить новую строку» также имела всплывающую подсказку с текстом «Добавить новую строку». Подобная подсказка попросту не нужна.

Делайте:

На сайте Alibaba была строка поиска со значком камеры без подписи. Когда пользователи наводили курсор на этот значок, появлялась всплывающая подсказка «Поиск по изображению». Эта функция была, вероятно, незнакома многим пользователям, и поэтому подсказка, описывающая ее назначение, была полезна.

3. Поддерживайте наведение курсора, как мышью, так и клавиатурой

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

Не делайте:

Веб-сайт McDonalds не поддерживает всплывающие подсказки с помощью триггеров клавиатуры. Всплывающая подсказка при наведении курсора мыши (вверху) была недоступна, когда пользователь нажимал на ту же страницу (внизу).

Делайте:

Wikipedia поддерживает триггеры клавиатуры для всплывающих подсказок. Те же всплывающие подсказки появились при наведении курсора мышью и клавиатурой.

4. Используйте стрелки для всплывающей подсказки, когда несколько элементов находятся рядом

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

Не делайте:

PowerPoint имел несколько иконок в непосредственной близости друг от друга. Без стрелок всплывающей подсказки было трудно понять, какие подсказки соответствуют какому элементу.

Делайте:

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

5. Используйте подсказки последовательно по всему сайту

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

Не делайте:

Веб-сайт Business Insider в своем меню навигации использовал всплывающие подсказки для 2 из 3 иконок. (Примечание. На главной странице веб-сайта Business Insider иконка глобуса имела всплывающую подсказку с надписью «Значок глобуса». Однако подпись не была полезной и не указывала на ее функциональность: выбор языка). В общем, мы не рекомендуем использовать иконки без подписей и скрывать подписи внутри всплывающих подсказок, но эта ошибка становится еще серьезнее, если подписи всплывающих подсказок развернуты непоследовательно.

Делайте:

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

Дополнительные рекомендации

  • Предоставляйте всплывающие подсказки дляиконокбез подписей.

Большинство иконок в некоторой степени неоднозначны, поэтому мы рекомендуем использовать текстовые метки для всех иконок. Если вы слишком упрямы, чтобы предоставлять текстовые метки для иконок на своем сайте, по крайней мере, вы можете предоставить своим пользователям описательную подсказку.

  • Убедитесь, что подсказки имеют умеренныйконтрастпо отношению к фону.

Пользователи обычно смотрят, куда они кликают (или наводят курсор). Однако важен умеренный контраст, чтобы пользователи могли видеть текст во всплывающей подсказке. Кроме того, для пользователей с нарушениями зрения особенно трудно читать белую страницу со светло-серыми подсказками.

  • Размещайте всплывающие подсказки так, чтобы они не блокировали связанный контент.

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

Вывод

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

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

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Как изменить стиль стандартного всплывающего окошка Tooltip(подсказка), формируемого атрибутом title при помощи JQuery

Может статься так что вы захотите поменять на своем веб-сайте стиль и внешний вид, а так же поведение всплывающих подсказок, которые появляются при наведении курсора на текст, изображения и другие элементы html страницы, в которых установлен обычный атрибут title. Этот атрибут нужен для более конкретного пояснения, подсказки или описания элемента. И бывает так что он формируется автоматически при использовании некоторых плагинов или самим движком сайта.

Обычно он работает так: подводите курсор мыши к картинке или тексту, немного ждете и около курсора появляется подсказка со стандартным дизайном и поведением.

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

К сожалению, сделать это по человечески не получится, но использовав JavaScript и библиотеку JQuery, можно обмануть систему и добиться более или менее интересного результата, используя не очень большое количество дополнительного кода на странице.

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

Несколько ссылок для информации.

Автор перевода статьи автора скрипта и оригинал источник:

Создаем всплывающие подсказки на CSS

Создаем всплывающие подсказки на CSS

Очень плохо! Плохо Нормально Хорошо Очень хорошо!
12.5% 0% 0% 0% 87.5%

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

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

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

В обычном виде без оформления подсказка имеет примерно такой вид как на фото ниже:

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

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

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

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

Для выполнения данного действия мы будем использовать два атрибута: image, И для того чтоб наша подсказка работала after и data-text для вывода текста всплывающей подсказки.

Пример стилей CSS для данного варианта всплывающей подсказки:

Всплывающая подсказка с помощью CSS: пошаговая инструкция и способы удаления

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

Поведение блока подсказки

Элемент, взаимодействие с которым вызывает появление подсказки, называется целевым.

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

  • Плавное появление. Случайное наведение курсора на целевой элемент не должно сопровождаться резким выпрыгиванием подсказки. Это еще может быть приемлемым для маленьких текстовых блоков, но категорически не подходит, если tooltip большой или содержит изображения.
  • Адекватное размещение. Окно подсказки не должно закрывать тот контент, который она поясняет, чтобы пользователь имел возможность сопоставить данные. В тех случаях, когда tooltip имеет преимущественно декоративное значение, это допустимо.
  • Отсутствие влияния на другой контент. Всплывающие подсказки призваны быть маленькими, едва заметными помощниками пользователя, поэтому они не должны создавать неудобства. Правильный tooltip не сдвигает соседние блоки и не выходит за пределы страницы, создавая полосы прокрутки.
  • Видимость. Подсказку должно быть видно целиком, она не должна перекрываться другими элементами или скрываться за краем окна браузера.
  • Легкость управления. Важно, чтобы пользователь интуитивно понимал, как вызвать и убрать всплывающие подсказки, и не испытывал сложностей с этими действиями.

Tooltip на чистом HTML

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

Чтобы создать такой всплывающий блок, потребуется атрибут title, доступный для любого HTML-тега.

Главные достоинства всплывающей подсказки на HTML: простота применения и возможность использовать с любыми элементами верстки — от текста до изображений. Но есть у нее и большие недостатки:

  • нельзя отформатировать текст;
  • слишком простой внешний вид, который нельзя изменить;
  • отсутствие возможности вставки изображений.

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

CSS-tooltip

Создать красивый пользовательский блок подсказки можно с помощью каскадных таблиц стилей. При этом используются базовые концепции CSS:

  • абсолютное позиционирование — для выдергивания подсказки из общего потока документа;
  • полное скрытие блока в неактивном состоянии с помощью свойства display ;
  • псевдокласс :hover , который присваивается любому элементу, находящемуся под курсором мыши;
  • псевдоэлементы :before и :after , которые можно использовать для простых подсказок, чтобы не создавать отдельный HTML-элемент;
  • анимация и плавное изменение свойств для красивых эффектов появления и исчезновения.

Все эти свойства хорошо поддерживаются современными браузерами, что обеспечивает надежную работу tooltip-механизма.

Псевдокласс :hover , помимо наведения курсора, реагирует также на прикосновения пальца к сенсорному экрану, что позволяет поддерживать мобильные гаджеты.

Блок или псевдоэлемент

CSS-tooltip может быть как отдельным HTML-блоком с собственной структурой, так и псевдоэлементом другого блока. Каждый из этих вариантов имеет свои плюсы и минусы, которые следует учитывать.

Внутри отдельного контейнера намного проще манипулировать контентом. В нем можно разместить изображения, заголовки и другие элементы.

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


Создание всплывающего блока на CSS

Создадим красиво оформленный tooltip со сложной структурой для ближайшей к нам звезды из созвездия Центавра.

Прежде всего, определимся с HTML-разметкой:

Оформим и скроем блок подсказки с помощью CSS:

Стили списка и самой подсказки могут быть любыми, для краткости они пропущены.

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

Подсказка в псевдоэлементе

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

HTML-код панели будет выглядеть так:

Уникальное название инструмента размещается в атрибуте data-tooltip . Внутри блока находится иконка, но сама всплывающая подсказка в HTML-коде отсутствует.

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

Псевдоэлемент появляется только при наведении курсора, поэтому нет необходимости скрывать его с помощью display: block. Его расположение регулируется свойствами position и left/right/top/bottom . Для получения из атрибута data-tooltip целевого элемента контента всплывающей подсказки CSS предоставляет функцию attr() . Декоративные стили для краткости опущены.

Появление подсказки при клике без скриптов

Рассмотренные до этого tooltip-механизмы реагировали на наведение курсора мыши на целевой элемент и основывались на CSS-псевдоклассе :hover . В некоторых ситуациях предпочтительнее открывать подсказку при клике. Подобный эффект легко реализовать на JavaScript, однако и CSS может справиться с поставленной задачей.

Среди списка псевдоклассов CSS есть замечательный класс :focus , доступный для ссылок и элементов ввода. В отличие от :hover , который исчезает сразу же, как уходит курсор мыши, этот псевдокласс позволяет сохранять состояние активности целевого элемента. И если поля ввода семантически не очень подходят для создания всплывающей подсказки, ссылки вполне годятся.

Заменим элемент списка из первого примера на ссылку:

Атрибут href со значением javascript:void(0) необходим для того, чтобы предотвратить любую реакцию браузера на нажатие ссылки.

Следующие стили позволят вызывать подсказку с описанием звезды по клику:

Ссылка будет сохранять фокус до тех пор, пока пользователь не сделает клик в любом месте страницы.

Итак, tooltip на сайте может быть создан разными способами, даже без использования JavaScript. Каждый из них хорош, нужно лишь выбрать наиболее подходящий для конкретной ситуации.

Редактирование всплывающих подсказок

ВАЖНО!
♦ Добавление сценария всплывающей подсказки к вики требует специального права, editinterface , обычно привязанного к группе admin. Вы можете поэкспериментировать со всплывающими подсказками, добавив сценарии на свою личную страницу сценария, но только вы сможете их увидеть. Если вы не являетесь администратором или в специальной группе с правами, editinterface , вам нужно найти кого-то с этим правом, чтобы добавить скрипт.

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

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

  • Использует подстраницы вики для хранения содержимого всплывающей подсказки. Другими словами, для страницы с именем «Пример» ее содержимое всплывающей подсказки будет на «Пример/Подсказка».
  • Это автоматически добавляет всплывающую подсказку к любой ссылке вики на страницу с подстраницкой «/Подсказка».

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

Настройка необходимых шаблонов для этого сценария также потребует некоторой степени навыков веб-дизайна и понимания шаблонов MediaWiki.

Содержание

Добавление скрипта в вашу wiki для тестирования [ править | править код ]

Настоятельно рекомендуется сначала скопировать сценарий на вашу личную страницу сценария, пока основные шаблоны и все стили не будут настроены и не будут проверены для правильной работы. Для этого скопируйте Wiki Subpage Tooltip Script и вставьте его на страницу User:yourname/common.js в нужном wiki, изменив yourname на ваше имя пользователя.

Скрипт в настоящее время требует незначительных изменений для не-английских вики. Оставьте сообщение в User talk:OOeyes, чтобы запросить соответствующую модификацию для соответствующего языка.

Настройка шаблонов [ править | править код ]

Шаблон:Всплывающее окно подсказки [ править | править код ]

Это основной шаблон, определяющий внешний вид всплывающих подсказок. Вы можете либо разработать внешний вид полностью автономный здесь, либо вы можете добавить или использовать стили из MediaWiki:Common.css и/или MediaWiki:Hydra.css для использования здесь.

В любом случае шаблон должен будет получить его контент по крайней мере от одного параметра. Рекомендуется, как минимум, создать шаблон с использованием параметра title и body . Наличие отдельного параметра для заголовка позволяет вам использовать этот шаблон для всплывающих подсказок, которые все еще загружаются, вместо того, чтобы копировать и вставлять ваш проект в шаблон загрузки. Вместо параметра body можно дополнительно использовать более конкретные параметры, но в любом случае вам нужно указать способ подачи содержания без заголовка в подсказку.

Очень простой пример этого шаблона:

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

Шаблон:Всплывающая подсказка [ править | править код ]

Этот шаблон, определяющий внешний вид всплывающих подсказок во время загрузки. Если вы следовали вышеизложенному совету об использовании параметра title и body , этот шаблон может быть довольно простым и будет схож с этим:

Скрипт заменяет $1 заголовком страницы, на которую он загружает всплывающую подсказку, позволяя отображать заголовок перед загрузкой всплывающей подсказки. В некоторых случаях это не совсем соответствует названию, которое должно отображаться:например, страница с названием «Кожаные сапоги (уровень 20)» должна, вероятно, иметь только название «Кожаные сапоги», но сценарий не имеет возможности узнать Пока подсказка не будет загружена.

Рекомендуется добавить анимированный значок загрузки в этот шаблон, и, как и в случае с флажком Шаблон:Подсказка, этот шаблон, вероятно, лучше всего защищен.

Настройка тестовой подсказки [ править | править код ]

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

Страницы всплывающих подсказок обрабатываются как шаблоны сценарием, который передает hover box всплывающей подсказки в параметр 1 . В общем, страница всплывающей подсказки будет настроена следующим образом:

Разумеется, вы замените title и body фактическими параметрами, используемыми вашей всплывающей подсказкой. Здесь параметр 1 определяет шаблон, который должна вызывать страница всплывающей подсказки. Это позволяет повторно использовать данные всплывающей подсказки другими способами.

Например, вы можете настроить шаблон инфобокса в инфобоке Template: Item, который использует те же параметры, что и флажок Шаблон:Подсказка, хотя для этого требуется нечто большее, чем просто заголовок title и body Параметров. Допустим, у вас есть подсказка в Кожаные ботинки/Подсказка. Затем вы можете использовать <<:Кожаные ботинки/Подсказка|Инфопредмет>> на странице Leather Boots для создания инфобокса из данных всплывающей подсказки. Более того, вы можете просто создать другую версию паттерна Шаблон:Подсказка, который можно использовать на страницах; Стили часто должны отличаться из-за проблем с размером шрифта. Вы можете сделать еще один шаблон по умолчанию, изменив строку выше <<<<1| Подсказка на страниуе>>> , чтобы ссылаться на другой шаблон.

Тестирование всплывающей подсказки [ править | править код ]

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

Настройка всплывающих подсказок для всех пользователей [ править | править код ]

Как только тестирование будет завершено, и все шаблоны будут работать по вашему желанию, переместите скрипт со своей личной страницы сценария в MediaWiki:Common.js. Теперь подсказки будут работать для всех пользователей.

Замечания по кешированию [ править | править код ]

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

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

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

Приветствую вас на сайте Impuls-Web!

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

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

Всплывающая подсказка HTML

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

Или вот еще один пример с использованием картинки:

Как видите все просто, но данная всплывающая подсказка html имеет ряд своих недостатков. А именно, все параметры отображения, такие как шрифт, цвет, размер задаются исходя из параметров браузера, и вы ни как не можете на них повлиять.

Всплывающая подсказка CSS

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

Вот что получится:

Данными стилями мы задаем стилизацию нашей подсказке и делаем ее полностью прозрачной. А далее при наведении указателя мышки на картинку, делаем ее видимой.

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

Надеюсь, моя статья будет для вас полезна и поможет вам сделать удобные и информативные подсказки. Если данная статья вам понравилась, обязательно оставьте комментарий, поделитесь ею в социальных сетях и подпишитесь на мою рассылку.

Желаю вам удачи! До встречи в следующих статьях!

Как изменить положение всплывающей подсказки

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

Примечание. Я не хочу использовать какой-либо плагин, чтобы делать изменения только в html (title) всплывающей подсказке.

Html

CSS

Здесь я прикрепил ссылку, которую я пробовал

Это невозможно без плагина или специального кода. Вам нужно будет реализовать пользовательскую подсказку с помощью HTML/CSS и динамически показывать ее при наведении.

Кстати: ваш CSS-Selector .sam[title] соответствует каждому элементу, который имеет класс «sam» и любой заголовок, чтобы выбрать весь элемент с названием «привет», вам придется использовать этот селектор: .sam[title=hello]

Как сказал Фабио, изменить положение всплывающей подсказки невозможно. Тем не менее, я могу порекомендовать сделать ваш собственный простой реализации основных JQuery и CSS.

Во-первых, сделайте свою подсказку в CSS. Например:

После этого вам нужно будет поместить его в HTML с помощью DIV.

Затем вам нужно будет создать небольшой скрипт jquery.

Позвольте мне сломать это для вас. Вы сделали div, у которого есть текст подсказки инструмента, который вы хотите, стилизованный, как вы хотите. Затем в скрипте мы скрываем его так, чтобы при наведении курсора на ваш объект показывалась эта конкретная подсказка. Когда вы покидаете этот объект, он исчезает, как и всплывающая подсказка.

Код довольно прост; однако, чтобы понять, что я сделал, вам нужно понять основные Javascript и JQuery. Я сделал функцию с параметрами, которые вам нужно будет вводить для каждого подсказки. Допустим, вы создали стилизованное слово, которое нуждается в определении и поэтому требует всплывающей подсказки. Вы сначала присоединяете к нему класс или идентификатор, который не обязательно должен быть определен в вашем документе CSS. Вам просто нужно, чтобы скрипт нашел его.

В этом предложении курица жирная.

Цыпленок — это объект с уникальным классом «.chickentooloject».

Затем вы создадите уникальный инструмент tip.

Почему мы это сделали? Таким образом, у нас также есть уникальный инструмент, который можно найти в скрипте. Остальное зависит от сценария.

Код не проверен, но это простой jquery, поэтому я уверен, что он сработает. Если вы смущены, оставьте комментарий, и я помогу вам больше.

Илон Маск рекомендует:  dl в HTML
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL