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

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

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

Семь стилевых оформлений всплывающих подсказок (tooltip) на jQuery и CSS3 для вашего сайта.

Tooltip на jQuery и CSS

Всплывающие подсказки при наведении использующие библиотеку jQuery и CSS. Тут нет никаких специальных плагинов, просто одна функция и её вызов.

Подсказки с пузырьками

Плагин для библиотеки Mootools — bubbles — подсказки с пузырьками. Работает к сожалению на устаревшей версии Mootools 1.1.2, но смотрится очень красиво.

CSS3 тултипы — подсказки

Всплывающие подсказки реализованные на CSS. К подсказке можно прикрепить и изображение.

Плагин подсказок MopTip

Плагин всплывающих подсказок MopTip. Всплывающий mopBox может содержать DIV, изображения, флешки, видео и т.д. Работает в: Safari 4+, Firefox 3+, Opera 9+, IE6, IE7, IE8+, Chrome.

Изображение-подсказка при наведении

Эффект всплывающей подсказки — изображения при наведении на иконку — миниатюру картинки.

CSS3 tooltips (подсказки)

Реализованные только на CSS всплывающие подсказки для отдельных элементов сайта.

Простой tooltip — just the tip

Простой tooltip плагин

Плагин подсказок (tooltip) имеет поддержку всех браузеров и прост в применении. Гибкая настройка под любой ваш проект.

Подсказка при наведении — vTip

  Простой и очень легкий по размеру эффект всплывающей подсказки.

как создавать и использовать всплывающие подсказки лайк э босс

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

И в идеальном мире им это удается.

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

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

Содержание статьи

Что такое тултипы?

Примеры всплывающих подсказок

Когда следует использовать подсказки?

Онбординг
Обновления и напоминания
Редко используемые функции

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

1. Создание всплывающих подсказок с использованием JavaScript
2. Создание всплывающих подсказок с использованием CSS + HTML
3. Создание всплывающих подсказок без кодинга с помощью Experrto

7 принципов хороших тултипов

1. Полагайтесь на подсказки только когда это нужно
2. Не привязывайте подсказки к часто используемым функциям насовсем
3. Делайте подсказки содержательными, информативными и нацеленными на действия
4. Позвольте легко пропускать и закрывать подсказки
5. Предлагайте по одной подсказке за раз
6. Выбирайте заметное, но разумное место размещения
7. Сделайте подсказки частью более широкой стратегии освоения продукта

Вместо заключения

Что такое тултипы?

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

Примеры всплывающих подсказок

Некоторые UX-специалисты считают, что подсказки должны запускаться только людьми — например, при наведении курсора или клике на знак вопроса, «i» или подобные иконки, как в примере ниже:

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

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

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

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

Как управлять внедрением новых функций с помощью in-app сообщений

Когда следует использовать подсказки?

Хотя определить все потенциальные сценарии использования подсказок невозможно, мы можем взглянуть на некоторые примеры их эффективного внедрения.

Онбординг

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

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

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

Обновления и напоминания

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

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

Редко используемые функции

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

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

Интерактивные подсказки: как вывести онбординг на новый уровень

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

Существует 3 наиболее распространенных способа добавить тултипы на сайт или в приложение, и ниже они перечислены от самого сложного к самому удобному: 

1. Создание всплывающих подсказок с использованием JavaScript

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

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

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

Использование CSS + HTML для разработки тултипов отличается от создания подсказок на JavaScript лишь тем, что здесь процесс немного упрощается.

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

3. Создание всплывающих подсказок без кодинга с помощью Experrto

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

20 топовых open source плагинов для всплывающих подсказок

7 принципов хороших тултипов

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

1. Полагайтесь на подсказки только когда это нужно

Слишком частое появление тултипов на экране раздражает пользователей.

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

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

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

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

Довольно навязчивые подсказки от Яндекс.Почты с предложением попробовать новый редактор писем

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

3. Делайте подсказки содержательными, информативными и нацеленными на действия

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

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

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

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

4. Позвольте легко пропускать и закрывать подсказки

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

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

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

6 столпов онбординга: о чем рассказал анализ 1000 SaaS-продуктов

5. Предлагайте по одной подсказке за раз

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

Но на самом деле этот подход ошибочен.

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

6. Выбирайте заметное, но разумное место размещения

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

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

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

7. Сделайте подсказки частью более широкой стратегии освоения продукта

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

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

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

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

9 лучших методик апселлинга для SaaS-компаний с помощью подсказок

Вместо заключения

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

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

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

Прокачайте свой онбординг!

По материалам: userguiding.com Изображение: freepik.com

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

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

Компания «ПИК» использует в курсе подсказки, чтобы дать дополнительную информацию — привести пример отвратительной услуги в ЖКХ.

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

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

Чтобы добавить всплывающую подсказку в электронный курс, посмотрите видеоинструкцию или читайте статью ниже

Шаг 1. Создаём три почти одинаковых слайда

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

Для начала подготовим три слайда. На первом слайде оставим картинки и продублируем его два раза.

Первый слайд служит развилкой. Отсюда вы незаметно передёте на слайды с подсказками

Второй слайд появится, когда вы наведёте курсор на картинку со звёздным небом. Чтобы добавить подсказку, на панели инструментов PowerPoint нажмите «Вставка» → «Фигуры» → «Выноски». Выберите понравившуюся вам форму выноски и добавьте текст

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

У нас получилось три слайда: один без подсказок и два с подсказками. Теперь настроим появление сообщений.

Шаг 2. Настроим появление подсказки

Чтобы подсказки всплывали при наведении на картинку, сделаем переходы между слайдами:

1. Возвращаемся на первый слайд и выделяем картинку со звёздным небом
2. На панели инструментов нажимаем: Вставка → Действие.
3. В окне настройки действия переходит во вкладку Поместите указатель мыши на. Выбираем опцию Перейти по гиперссылке → Слайды → Слайд 2, где находится подсказка к первой картинке.

Теперь, если вы наведёте курсор на фотографию звёздного неба, то попадёте на второй слайд с подсказкой.

Таким же образом настроим появление надписи для второй картинки — с лампочкой. Только в настройках перехода по гиперссылке выберем «Слайд 3» — здесь находится нужная нам подсказка.

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

Пока мы настроили переходы с картинок только для первого слайда. Когда вы перейдёте на слайды № 2 или №3, вернуться обратно не получиться. Включить другую подсказку тоже не выйдет. Исправим это.

Есть два варианта: вручную настроить переходы с картинок на каждом слайде по инструкции выше или копировать картинки с первого слайда и поставить их на второй и третий, а старые удалить.

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

Шаг 3. Настроим эффект исчезновения подсказки

Если сейчас вы наведёте курсор мыши на картинку, подсказка появится
и останется на слайде. Чтобы она исчезала автоматически, настроим анимации.

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

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

2. По умолчанию у прямоугольника цветной контур и заливка. Сделаем его невидимым. Для этого на панели инструментов переходим в раздел Формат → Заливка фигуры → Нет заливки.
3. Таким же способом убираем контур: Формат → Контур фигуры → Нет контура. Прямоугольник станет прозрачным.
4. Для прямоугольника тоже настроим действие. Повторяем уже знакомый алгоритм: Вставка → Действие → Поместите указатель мыши на → Слайд → Слайд 1.
5. Теперь, если вы наведёте курсор на фон, то автоматически попадёте
   на первый слайд, а подсказки исчезнут.
6. Чтобы всё работало без ошибок, скопируем прямоугольник с первого слайда на остальные. По умолчанию он встанет поверх фотографий. Перенесём его на задний план. Для этого щёлкните по фигуре правой кнопкой мыши и выберите «На задний план».

Результат. Подсказка появляется при наведении курсора на картинку и исчезает автоматически

Всплывающие подсказки работают, даже если открыть курс на телефоне. Чтобы её увидеть, пользователю достаточно нажать на картинку. 

Еще больше приёмов по созданию учебного контента разбираем на курсах Академии iSpring. За 3 месяца вы освоите конструктор iSpring Suite
и создадите электронный курс по выбранной теме. Записывайтесь на обучение.

Всплывающие подсказки — Документация docs.cs-cart.ru 4.5.x

Поле List price.

Добавление подсказок к обычным полям формы

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

Правила разбора:

При парсинге в тексте темплейта ищутся конструкции вида:

<label ...>...{$lang.LANGVAR_NAME}...</label>

Пример:

<label for="product_product_code">{$lang. product_code}:</label>

<label for="product_list_price">{$lang.list_price} ({$currencies.$primary_currency.symbol}) :</label>

Когда такая конструкция найдена, для переменной LANGVAR_NAME ищется языковая переменная с подсказкой.

Переменные могут быть двух типов:

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

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

Эти подсказки добавляются только с учетом LANGVAR_NAME. Они должны выглядеть как ttc_LANGVAR_NAME. Если такая переменная задана, то подсказка будет показываться во всех формах, где есть LANGVAR_NAME.

Подсказки, учитывающие название переменной и шаблон

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

TEMPLATE_NAME — включает полный путь к темплейту + название темплейта, без расширения tpl. Названия папок и названия темплейта, связываются через ‘_’.

Например нужно задать подсказку для поля List price, которое располложено на странице редактирования продукта:

http://example.com/admin.php?dispatch=products.update&product_id=817

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

Заголовок List price задается переменной list_price. Сам заголовок расположен в темплейте views/products/update.tpl. Таким образом, получаем языковую переменную:

tt_views_products_update_list_price = tt_ + TEMPLATE_NAME + _ + LANGVAR_NAME = tt_ + views_products_update + _ + list_price

Отображение языковых пременных для подсказок

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

Например, если мы хотим включить вывод всех подсказок на странице:

http://example.com/admin.php?dispatch=products.update&product_id=817

Нужно открыть URL:

http://example.com/admin.php?dispatch=products.update&product_id=817&stt&cc

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

Для поля List price текст подсказки будет выглядеть так:

ttc_list_price: tt_views_products_update_list_price: Manufacturer suggested retail price.

Чтобы отключить режим вывода подсказок, нужно очистить кэш на странице:

http://example.com/admin.php?dispatch=products.update&product_id=817&cc

Добавление подсказок к настройкам модулей

Подсказки к настройкам модулей задаются в файле addon. xml.

Для добавления подсказки к полю, нужно указать ее значение в теге <tooltip> внутри тега настройки.

Пример, добавление подсказки Hello для настройки Allow login to the admin area from specified IPs only модуля Administration panel settings:

<item>

    <name>Allow login to the admin area from specified IPs only</name>

    <type>checkbox</type>

    <default_value></default_value>

    <translations>

        <item lang="es">Permitir el acceso al área de administración sólo de las IPS especificadas</item>

    </translations>

    <tooltip>Hello</tooltip>

    <tt_translations>

        <item lang="es">Hola</item>

    </tt_translations>

</item>

Подсказки. Компоненты · Bootstrap. Версия v4.0.0

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

Обзор

Вот что надо знать перед началом работы с плагином подсказок:

• Подсказки зависят от 3-й части бибилотеки Popper.js в части позиционирования. Вы должны подключать popper.min.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js , содержащие Popper.js – это нужно для работы подсказок!
• Если вы подключаете файлы JavaScript с жесткого диска, вам нужна requires util.js.
• Подсказки не инициализируются и не используются по умолчанию по причинам производительности, так что вам надо сделать это самому.
• Подсказки с названием нулевой длины никогда не отображаются.
• Задайте container: 'body' чтобы избежать проблем с отрисовкой более сложных компонентов (таких как группы ввода, кнопок и т.д.).
• Нельзя запускать подсказки из скрытых элементов.
• Подсказки для элементов класса .
  disabled или с атрибутом disabled должны запускаться из элемента-«обертки».
• Когда подсказка запускается из многострочных ссылок, подсказки будут центрированы. Используйте white-space: nowrap; в ваших <a>, чтобы избежать этого.
• Подсказки должны быть спрятаны до того, как связанные с ними элементы удалены из DOM.

Вы всё поняли? Отлично, посмотрим, как это работает на конкретных примерах.

Один из способов инициализировать все подсказки на странице – обратиться к ним по абтрибуту data-toggle:

 $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Примеры

Наведите курсор на ссылки – увидите подсказку:

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

<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

И с добавлением обычного HTML:

<button type="button" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Использование

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

Запустите подсказку через JavaScript:

$('#example').tooltip(options)

Разметка

Для использования подсказок требуется лишь атрибут data и title в том элементе HTML, который вы хотите оснастить подсказкой. Генерированная разметка подсказки – проще, хотя и требует установить позицию (по умолчанию позиция задается плагином как top).

Работа подсказок при использовании клавиатуры и юзеров вспомогательных технологий

Следует добавлять подсказки лишь в те элементы HTML, которые традиционно рассматриваются как пригодные для фокусировки с клавиатуры и интерактивные (такие как ссылки или органы управления форм). Хотя произвольные элементы HTML (такие как <span>) можно оснастить той же возможностью – добавив атрибут tabindex="0" – это привнесет надоедливые баги при работе c не –интерактивными элементами с клавиатуры. Плюс – большинство вспомогательных технологий в настоящее время не объявляют и не видят содержимое подсказки в такой ситуации.

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

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

Дезактивированные элементы

Элементы с атрибутом disabled не есть интерактивные, что означает, что подсказка (или поповер) не возникнут при фокусировании, наведении или клике на них юзеров. Как полумера в решении этого вопроса – можно запустить подсказки из оборачивающего элемента <div> или <span>, в идеале придав им возможность фокусировки с клавиатуры атрибутом tabindex="0", и т. о. преодолев событие pointer-events в дезактивированном элементе.

Параметры

Параметры можно передавать через атрибуты или JavaScript. С атрибутами: добавьте название атрибута к data-, как в data-animation="".

Название	Тип	Умолчание	Описание
animation	boolean	true	Применяет CSS-переход к подсказке
container	string | element | false	false	Добавляет подсказку к выбранному элементу. Пример: container: 'body'. Эта опция полезна в том, что в «потоке» документа позволяет позиционировать подсказку рядом с ее триггером — что предотвратит подсказку от «сползания» при изменении размера окна.
delay	number | object	0	Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера Если цифра поддерживается, задержка применяется к обоим hide/show Структура объекта: delay: { "show": 500, "hide": 100 }
html	boolean	false	Позволяет вставлять HTML в подсказку. Если true, тэги HTML в title подсказки будут отрисованы в подсказке. Если false – метод jQuery text будет использован для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
placement	string | function	‘top’	Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право. Когда задано auto, это автоматически переориентирует подсказку. Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст this задается для экземпляра всплывающей подсказки.
selector	string | false	false	Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще.
template	string	'<div role="tooltip"><div></div><div></div></div>'	Обычный HTML для использования при создании всплывающих подсказок. title всплывающей подсказки будет введен в элемент класса .tooltip-inner Элемент класса .arrow станет стрелочкой всплывающей подсказки. Самый внешний оборачивающий элемент должен иметь класс .tooltip и role="tooltip".
title	string | element | function	»	Название по умолчанию, если атрибут title не задан. Если функция задана, она будет вызываться с ее набором this, к которому прикреплена всплывающая подсказка.
trigger	string	‘hover focus’	Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом. 'manual' означает, что подсказка будет запрограммированно запущена методами .tooltip('show'), .tooltip('hide') and .tooltip('toggle'), это значение нельзя сочетать с любым другим триггером. 'hover' сам по себе приведет к созданию подсказок, которые нельзя запустить с клавиатуры, и должны будут использоваться лишь, если другие методы для выдачи информации из подсказки для юзеров клавиатуры невозможны.
offset	number | string	0	Отступ подсказки относительно ее «цели». Для большей информации иди в документацию отступов Popper. js.
fallbackPlacement	string | array	‘flip’	Позволяет задать, какую позицию Popper.js будет использовать при «откате». Для информации — сюда.
boundary	string | element	‘scrollParent’	Граница ограничения overflow подсказки. Принимает значения 'viewport', 'window', 'scrollParent' или отсылку к элементу HTML (только в JavaScript). Для информации – документация по preventOverflow docs.

Атрибуты для отдельных всплывающих подсказок

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

Методы

Асинхронные методы и переходы

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

Смотрите документацию.

Прикрепляет обработчик подсказки к коллекции элементов.

Показывает всплывающую подсказку элемента. Возвращается к функции-вызову до того, как модальный элемент показан (т.е. до того, как произойдет событие shown.bs.tooltip). Расценивается как «мануальный» запуск подсказки. Подсказки с названием нулевой длины никогда не отображаются.

$('#element').tooltip('show')

Скрывает подсказку элемента. Возвращается к функции-вызову до того, как модальный элемент скрыт (т.е. до того, как произойдет событие hidden.bs.tooltip). Это расценивается «мануальным» запуском подсказки.

$('#element').tooltip('hide')

Изменяет состояние подсказки элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт (т.е. до того, как события shown.bs.tooltip or hidden.bs.tooltip наступят). Расценивается как «мануальный» запуск подсказки.

$('#element').tooltip('toggle')

Прячет и уничтожает подсказку элемента. Подсказки, которые используют «делегирование» (которые созданы использованием параметра «селектор»), нельзя уничтожить по отдельности на «подчиненных» элементах-триггерах.

$('#element').tooltip('dispose')

Дает возможность подсказке элемента быть показанной. Подсказки включены по умолчанию.

$('#element').tooltip('enable')

Лишает подсказку элемента возможности быть показанной. Подсказка будет доступна к показу только если она будет ре-активирована.

$('#element').tooltip('disable')

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

$('#element').tooltip('toggleEnabled')

Обновляет позицию подсказки элемента.

$('#element').tooltip('update')

События

Тип	Описание
show.bs.tooltip	Это событие наступает немедленно, когда экземпляр метода show вызван.
shown.bs.tooltip	Это событие наступает, когда подсказка стала видимой юзеру (будет ждать завершения переходов CSS).
hide.bs.tooltip	Это событие наступает немедленно, когда экземпляр метода hide вызван.
hidden.bs.tooltip	Это событие наступает, когда подсказка только что прекратила быть скрытой от юзера (будет ждать завершения переходов CSS).
inserted.bs.tooltip	Это событие наступает после события show.bs.tooltip, когда шаблон подсказки добавлен в DOM.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Атрибут title | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4. 0+	1.0+	1.0+	1.0+	1.0+

Описание

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

Синтаксис

title="текст"

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo><bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут title</title>
 </head>
 <body>
  <p title="А вот и я!">Пример всплывающей подсказки</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки

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

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

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

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

Доступны следующие настройки всплывающих подсказок:

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

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

• настройки формата всплывающих подсказок;

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

Для расширенной настройки всплывающих подсказок для точек рядов данных используйте вкладку «Подсказки» диалогового окна «Параметры диаграммы».

Для отображения всплывающих подсказок установите флажок «Подсказки», расположенный на вкладке «Подсказки» боковой панели.

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

Для определения текста всплывающих подсказок используйте поле ввода на вкладке «Подсказки» боковой панели. Поле ввода текста подсказок — многострочное.

Для смены или добавления в текст подписи шаблона:

1. Нажмите кнопку «Добавить», расположенную ниже поля ввода.

2. В раскрывающемся списке выберите один из шаблонов текста всплывающих подсказок.

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

Для настройки формата данных, отображаемых всплывающими подсказками:

1. Установите флажок «Специальный формат».

2. В раскрывающемся списке выберите один из поддерживаемых форматов данных:

• Общий;

• Числовой;

• Денежный;

• Дата;

• Время;

• Процентный;

• Экспоненциальный;

• Текстовый;

• Дополнительный;

• Пользовательский.

Подробное описание специальных форматов смотрите в разделе «Настройка формата данных».

Для настройки шрифта всплывающих подсказок задайте следующие параметры:

• Шрифт. Выберите один из шрифтов, установленных в операционной системе;

• Размер шрифта. Установите требуемый размер шрифта. Размер задаётся в пунктах, и его можно выбрать из раскрывающегося списка или ввести вручную. Диапазон допустимых значений: [1; 72];

• Начертание текста. Нажмите кнопки, задающие начертание шрифта:

• Ж. Полужирное начертание;

• К. Курсивное начертание;

• Ч. Подчеркивание текста.

При нажатой кнопке будет использоваться соответствующий стиль начертания. Доступно использование нескольких стилей одновременно, например, нажатие кнопок «Ж» и «К» даёт полужирное курсивное начертание;

Для настройки заливки области всплывающих подсказок доступны следующие параметры:

• Цвет заливки. В раскрывающейся палитре выберите цвет заливки. Для установки нового цвета заливки нажмите кнопку «Спектр», расположенную в стандартной палитре цветов, и выберите цвет в расширенной палитре цветов;

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

Для настройки границы области всплывающих подсказок установите флажок «Граница» и задайте следующие параметры:

• Линия. В раскрывающемся списке выберите тип линии;

• Толщина. С помощью редактора чисел или вручную задайте требуемую толщину линий;

Примечание. Доступен ввод значения в разных единицах измерения, однако значение в строке ввода будет всегда отображаться в единицах point (1/72 дюйма).

всплывающих подсказок · Bootstrap

Документация и примеры для добавления пользовательских всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и атрибутов данных для локального хранилища заголовков.

Обзор

Что нужно знать при использовании плагина всплывающей подсказки:

• Всплывающие подсказки полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать загрузочную программу bootstrap.bundle.min.js /.bundle.js , который содержит Popper.js, чтобы всплывающие подсказки работали!
• Если вы создаете наш JavaScript из исходного кода, для него требуется util.js .
• Всплывающие подсказки используются по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
• Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
• Укажите контейнер : 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т. Д.).
• Всплывающие подсказки для скрытых элементов не работают.
• Всплывающие подсказки для элементов .disabled или disabled должны запускаться для элемента оболочки.
• При запуске из гиперссылок, охватывающих несколько строк, всплывающие подсказки будут центрированы. Используйте white-space: nowrap; на вашем s, чтобы избежать такого поведения.
• Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.
• Всплывающие подсказки могут запускаться благодаря элементу внутри теневой модели DOM.

Понятно? Отлично, давайте посмотрим, как они работают, на некоторых примерах.

Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по их атрибуту data-toggle :

  $ (function () {
  $ ('[data-toggle = "tooltip"]'). tooltip ()
})  

Примеры

Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:

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

  
  Всплывающая подсказка вверху


  Подсказка справа


  Подсказка внизу


  Подсказка слева
  

И с добавлением собственного HTML:

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

Использование

Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента.

Запуск всплывающей подсказки через JavaScript:

  $ ('# пример'). Подсказка (параметры)  

Перелив

  $ ('# пример').всплывающая подсказка ({граница: 'окно'})  

  
 Наведите указатель мыши на меня 



  
 
  

    Текст всплывающей подсказки!
  
  

Отключенные элементы

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно).В качестве обходного пути вы захотите вызвать всплывающую подсказку из оболочки

  $ ('# element'). Tooltip ('show')  

  $ ('# элемент'). Подсказка ('скрыть')  

  $ ('# element'). Tooltip ('toggle')  

  $ ('# element'). Tooltip ('dispose')  

  $ ('# element'). Tooltip ('enable')  

  $ ('# элемент').подсказка ('отключить')  

  $ ('# element'). Tooltip ('toggleEnabled')  

  $ ('# element'). Tooltip ('update')  

  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь...
})  

 
  
 direction = "bottom" 
 
 tabIndex = {0} 
 
 triggerText = "Tooltip label" 
 
> 
 
 
 
 
 Это текст всплывающей подсказки.В этом поле отображается максимальный объем текста, который должен отображаться внутри. Если требуется больше места, используйте модальное окно. 
 
 
 
 
 
 
 
  Подробнее  
 
  
 
 Создать