Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Js всплывающая подсказка: Поведение «подсказка»

Содержание

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

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

Всплывающие подсказки лучше всего подходят для элементов <a> и <button>.

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

Инициализация

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

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

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

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

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<p>Посмотри моё <a target=»_blank»
href=»https://www.quackit.com/css/grid/tutorial/» data-toggle=»tooltip»
data-placement=»top» title=»Легко создавайте сложные макеты с помощью CSS!»>
руководство по Grid</a>, ведь никогда не узнаешь, когда оно может понадобиться!</p>
<script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>
<script>
$(function () {
$(‘[data-toggle=»tooltip»]’).tooltip()
})
</script>

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

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

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min. css»>
<button type=»button» data-toggle=»tooltip» title=»Популярная обувь»>
Ботинки
</button>
<script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>
<script>
$(function () {
$(‘[data-toggle=»tooltip»]’).tooltip()
})
</script>

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

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

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<button type=»button» data-toggle=»tooltip» data-placement=»top»
title=»Сверху»>
Туфли
</button>
<button type=»button» data-toggle=»tooltip» data-placement=»right»
title=»Справа»>
Ботинки
</button>
<button type=»button» data-toggle=»tooltip» data-placement=»bottom»
title=»Снизу»>
Угги
</button>
<button type=»button» data-toggle=»tooltip» data-placement=»left»
title=»Слева»>
Носки
</button>
<script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js»></script>
<script>
$(function () {
$(‘[data-toggle=»tooltip»]’).tooltip()
})
</script>

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

40+ полезных скриптов всплывающих подсказок для CSS, JavaScript и jQuery

Автор:

Елизавета Гуменюк

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

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

Хотя самый простой способ добавить всплывающие подсказки к тексту — использовать тег HTML <ACRONYM> или TITLE=””, ALT=””. Тем не менее, есть некоторые действительно интересные дизайны всплывающих подсказок и стилей, которые вы можете создавать с помощью JavaScript и CSS, используя скрипты. Давайте взглянем на них.

 

CSS

 

Balloon.css — Balloon — это библиотека CSS, состоящая из SasS и LESS и позволяющая отобразить интерактивную подсказку. Содержимое и положение всплывающей подсказки настраиваются через атрибут data. Вы можете показать всплывающую подсказку слева, справа или слева направо. Вы даже можете добавить эмоджи к контенту. Balloon.css можно установить через NPM и загрузить с CDNJS.

Simptip — сделано с помощью SasS, позволяющим перенастроить и перекомпилировать код в соответствии с вашими требованиями. Позиция и содержимое подсказки настраиваются с помощью имени класса и атрибута tooltip. Simptip доступен в виде пакета NPM, Yarn и Bower.

Hint.css — одна из популярных библиотек CSS для отображения всплывающей подсказки, Hint.css используется многими популярными веб-сайтами, такими как Fiverr, Webflow и Tridiv. В отличие от двух других библиотек CSS, Hint.css использует атрибут aria-label. Вы можете настроить размер и цвет с помощью имен классов с использованием методологии BEM. Hint.css доступен на NPM, Bower и CDNJS.

Microtip — еще одна потрясающая библиотека CSS для создания всплывающей подсказки. Microtip использует aria-label для хранения содержимого всплывающей подсказки и атрибут data для настройки размера и положения всплывающей подсказки.

Скрипт использует переменную CSS, которая позволяет настраивать всплывающую подсказку с помощью простого файла CSS. Переменные CSS уже поддерживаются во многих веб-и мобильных браузерах. Microtip доступен на NPM, Yarn и CDN UNPkg.

Wenk– весит всего 733 байт. Суперлегкая библиотека, написанная в суперсовременном CSS с использованием CSSNext, LESS и SCSS, позволяет настраивать и перекомпилировать стили так, как вам нравится. Wenk можно загрузить с NPM, Yarn и таких бесплатных CDN-сервисов, как rawgit.com и unpkg.com.

Tooltippy — другая легкая библиотека CSS размером около 1 КБ. Tooltippy включает в себя несколько готовых тем для стилизации всплывающей подсказки. Она написана с помощью препроцессора CSS под названием Stylus.

ElegantTips — эта библиотека поставляется с несколькими предварительно созданными темами, которые можно изменить с предоставленными именами классов. В отличие от других библиотек, которые полагаются на данные HTML5 или атрибут aria-label, ElegantTips требует добавления дополнительного элемента для создания всплывающей подсказки. Это позволяет вам добавить буквально любой контент в подсказку кроме простого текста.

Tootik — эта библиотека CSS предоставляет не только стили в формате CSS, LESS и SasS, а также простой в использовании графический интерфейс для настройки всплывающей подсказки. Вы можете просто скопировать и вставить HTML-код, сгенерированный этим инструментом. Это так просто.

 

VanillaJS

 

TippyJS – работающая на Popper.js, TippyJS поставляется с множеством опций для настройки всплывающей подсказки. Вы можете настроить анимацию, стрелку всплывающей подсказки, ширину, размер, тему и многое другое. Скрипт также предоставляет функции обратного вызова, с помощью которых можно выполнить функцию, когда всплывающая подсказка показана и скрыта. Эти функции делают TippyJS одной из самых мощных библиотек JavaScript в нашем списке скриптов для создания всплывающей подсказки.

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

Bubb — скрипт хорошо подходит для продвинутых пользователей JavaScript. Используя обширные API-интерфейсы, помимо отображения простого текста, вы можете программно добавить более сложный HTML-контент во всплывающую подсказку. Это довольно круто; вы можете обратиться к Документам к примерам.

Popper — содержит техническую абстракцию для создания чего-то, что появляется, как всплывающая подсказка, всплывающее окно и выпадающие списки. TippyJS использует его в качестве основы библиотеки, кроме того скрипт используется известными именами в Интернете, такими как Bootstrap, Microsoft и Atlassian.

YY Tooltip — в отличие от других библиотек, YY Tooltip не требует добавления элементов или атрибутов HTML. Она полностью работает с JavaScript, а контент, положение и цвета определены в объекте, а не в элементе HTML. Идеально подходит для использования с полным веб-приложением JavaScript.

Position.js — еще одна отличная библиотека JavaScript для создания всплывающих подсказок, Position.js предоставляет графический интерфейс для настройки функции и просто копирует, а затем вставляет созданный там код. Position.js можно использовать в сочетании с React.js или Vue.js.

Bezet Tooltip — эта библиотека предоставляет 14 вариантов отображения всплывающей подсказки; например, справа, слева, снизу, слева в центр, снизу в центр и т. д. Кроме того, она также достаточно умна, чтобы могла отрегулировать положение всплывающей подсказки на основе доступного пространства вокруг самой подсказки.

MouseTip — эта библиотека JavaScrtipt создаст всплывающую подсказку, которая будет двигаться вместе с курсором. Всплывающая подсказка настраивается с нестандартным атрибутом mousetip вместо использования атрибута data в HTML5. Mousetip доступен как модуль NPM.

Internetips — подобно MousetTip, всплывающая подсказка, генерируемая этой библиотекой, следует за положением курсора. Все настроено через объект JavaScript вместо HTML, а атрибуты также созданы для современных браузеров. Скрипт легкий и быстрый.

MTip — библиотека JavaScript для всплывающих подсказок с отличной совместимостью с браузером. Она совместима с IE8, полностью настраиваемая с помощью параметров, и вы можете добавить подсказку к любому элементу даже на img (элемент изображения).

Bubblesee — легкая библиотека JavaScript, которая обеспечивает прямую функциональность «подсказки». Легко использует библиотеку JavaScript без сложных опций для настройки вывода. Файл Sass предоставляется, если вы хотите изменить внешний вид всплывающей подсказки.

Tipfy — построенный с использованием современного синтаксиса JavaScript, ES6, Tipfy имеет размер всего 2 КБ. Библиотека предоставляет две версии файлов: tipfy.min.js, обеспечивающий сценарий с современным синтаксисом ES6 и tipfy.es5.min.js, если вам нужна совместимость со старыми браузерами. Скрипт использует атрибут data для настройки всплывающей подсказки; Например, data-tipfy-side используется для установки направления всплывающей подсказки, а использования атрибута data-tipfy-text для добавления содержимого всплывающей подсказки.

 

JQuery

 

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

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

PowerTip — этот плагин jQuery также предлагает опции и API-интерфейсы, предоставляя разработчикам ряд различных способов реализации всплывающих подсказок. Он поддерживает клавиатурную навигацию, чтобы всплывающее окно отображалось при навигации элементов с помощью клавиатуры Tab. PowereTip доступен как модуль NPM. Он может использоваться с RequireJS и Browserify.

Accessible Aria Tooltip — плагин jQuery со встроенной функцией специальных возможностей, всплывающая подсказка предназначена для отображения диалогового окна с заголовком, многострочным текстом и кнопкой закрытия.

TipsJS — простой плагин jQuery, но он имеет довольно отличительные особенности. Содержимое всплывающей подсказки задается атрибутом data-tooltip. Более того, вы можете также обернуть контент специальными символами для форматирования содержимого, подобного форматированию Markdown. для заголовка.

Dark Tooltip — эта библиотека предоставляет некоторые действительно полезные функции для включения всплывающей подсказки. Например, вы можете добавить кнопку подтверждения — «Да» и «Нет», уменьшить фон во время отображения всплывающей подсказки и добавить элементы HTML в контент.

Aria Tooltip — еще одна подсказка со встроенной функцией доступности, этот плагин jQuery совместим с WAI-ARIA 1.1. Он реагирует таким образом, что вы можете предоставить различные конфигурации для разных размеров видового экрана. Aria Tooltip доступен как модуль NPM с именем t-aria-tooltip.

Toolbar.js. — в то время как другой плагин jQuery может отображать только простой текст или HTML-контент во всплывающей подсказке, этот плагин jQuery создает панель инструментов. Всплывающая подсказка будет содержать две или более ссылки с иконкой, которая обычно выполняет действие при нажатии, как и любая панель инструментов.

 

VueJS

 

V-Tooltip — это компонент Vue.js, работающий от Popper.js. Он предоставляет новую директиву с именем v-tooltip, которая может быть добавлена к любому элементу для создания всплывающей подсказки. V-tooltip может содержать контент всплывающей подсказки или параметры. Помимо пользовательской директивы v-tooltip вы также можете добавить всплывающую подсказку с помощью компонента v-popover. С помощью этого компонента вы можете добавить более сложный контент во всплывающую подсказку с компонентом Vue.js или HTML.

Vue-Bulma Tooltip — компонент Vue.js для создания всплывающей подсказки, основанной на платформе UML Bulma. Эта библиотека является частью Vue Bulma. Но компонент tooltip доступен как модуль NPM с именем vue-bulma-tooltip, который вы можете использовать как автономный компонент.

Vue-Directive-Tooltip — в целом он похож на компонент V-Tooltip на основе Popper.js и предоставляет ту же директиву, что и v-tooltip. Однако он не обеспечивает компонент v-popover.

Vue-Tippy — эта библиотека оборачивает Tippy.js в компонент Vue.js. Она имеет настраиваемую директиву Vue.js, называемую v-tippy, которая работает как атрибут HTML; вы можете добавить контент для всплывающей подсказки или параметры для ее настройки. Скрипт также отображает пользовательский компонент Vue.js в содержимом всплывающей подсказки с помощью параметра html.

VueJS-Popover — пользовательский Vue.js с настраиваемой директивой, называемой v-popover, и двумя настраиваемыми компонентами, а именно <popover> и <tooltip>, предоставляющими разработчикам возможность добавлять всплывающие подсказки в приложении Vue.js.

Vue-Hint — плагин Vue.js, который распаковыввет Hint.css. В плагине имеется директива v-hint-css для добавления всплывающей подсказки. Он предоставляет тот же набор параметров, что и Hint.css, поэтому вы можете добавить их как объект JavaScript или модификатор Vue.js.

ReactJS

React Joyride — компонент React, чтобы отобразить набор подсказок, которые помогут новым пользователям ознакомиться с вашим новым приложением.

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

React Autotip — простой компонент React с функцией автоматического позиционирования, React Autotip автоматически отрегулирует положение всплывающей подсказки при изменении доступного пространства вокруг него.

React Tippy — построен на базе Tippy.js и Popover.js. В этой библиотеке представлен компонент Tooltip, который можно включить в приложение React.

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

Больше

Ember Tooltips — компонент Ember.js для создания всплывающих подсказок, он построен на базе Popper.js. Компонент также разработан с учетом доступности и продолжает улучшаться, чтобы соответствовать требованиям 508 по данному вопросу.

D3 Tip — плагин D3.js. D3.js — это библиотека JavaScript для визуализации данных, такая как схемы, карты, диаграммы и т. д. Этот плагин позволяет вам показывать всплывающую подсказку поверх этих данных.

Всем успешной работы!

Источник

Всплывающие подсказки · Bootstrap v5.0

Обзор

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

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

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

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

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

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

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Примеры

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

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

<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Подсказка вверху">
  Подсказка вверху
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Подсказка справа">
  Подсказка справа
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Подсказка внизу">
  Подсказка внизу
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Подсказка слева">
  Подсказка слева
</button>

И с добавленным пользовательским HTML:

<button type="button" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Подсказка</em> <u>с</u> <b>HTML</b>">
  Всплывающая подсказка с HTML
</button>

С SVG:

Sass

Переменные

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Переполнение

auto и scroll

Положение всплывающей подсказки пытается автоматически измениться, когда родительский контейнер имеет overflow: auto или overflow: scroll, как наш .table-responsive, но по-прежнему сохраняет исходное расположение размещения. Чтобы решить эту проблему, установите параметр boundary (для модификатора переворота, использующего параметр popperConfig) для любого HTMLElement на переопределить значение по умолчанию 'clippingParents', например, document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Разметка

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

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

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

<!-- HTML для записи -->
<a href="#" data-bs-toggle="tooltip" title="Текст всплывающей подсказки!">Наведите на меня</a>

<!-- Разметка, созданная плагином -->
<div role="tooltip">
  <div></div>
  <div>
    Текст всплывающей подсказки!
  </div>
</div>

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

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно). В качестве обходного пути Вы захотите вызвать всплывающую подсказку из оболочки <div> или <span>, в идеале сделанной с фокусировкой на клавиатуре, используя tabindex="0".

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-animation="". Обязательно измените тип case имени параметра с camelCase на kebab-case при передаче параметров через атрибуты данных. Например, вместо использования data-bs-customClass="beautifier" используйте data-bs-custom-class="beautifier".

Обратите внимание, что по соображениям безопасности параметры sanitize, sanitizeFn и allowList не могут быть предоставлены с использованием атрибутов данных.

НаименованиеТипПо умолчаниюОписание
animationbooleantrueПрименить переход CSS fade к всплывающей подсказке
containerstring | element | falsefalse

Добавляет всплывающую подсказку к определенному элементу. Пример: container: 'body'. Этот параметр особенно полезен тем, что позволяет Вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвратит отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.

delaynumber | object0

Задержка показа и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера

Если указан номер, задержка применяется как к скрытию, так и к отображению.

Структура объекта: delay: { "show": 500, "hide": 100 }

htmlbooleanfalse

Разрешить HTML во всплывающей подсказке.

Если `true`, HTML-теги в title всплывающей подсказки будут отображаться во всплывающей подсказке. Если `false`, свойство innerText будет использоваться для вставки содержимого в DOM.

Используйте текст, если Вас беспокоят XSS-атаки.

placementstring | function'top'

Как разместить всплывающую подсказку — auto | top | bottom | left | right.
Если задано auto всплывающая подсказка будет динамически переориентирована.

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

selectorstring | falsefalseЕсли предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM (поддержка jQuery.on). Смотрите это и информативный пример.
templatestring'<div role="tooltip"><div></div><div></div></div>'

Базовый HTML для использования при создании всплывающей подсказки.

title всплывающей подсказки будет вставлен в .tooltip-inner.

.tooltip-arrow станет стрелкой всплывающей подсказки.

Самый внешний элемент оболочки должен иметь класс .tooltip и role="tooltip".

titlestring | element | function''

Значение заголовка по умолчанию, если атрибут title отсутствует.

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

triggerstring'hover focus'

Как запускается всплывающая подсказка — click | hover | focus | manual. Вы можете передать несколько триггеров; разделите их пробелом.

'manual' указывает, что всплывающая подсказка будет запускаться программно через методы .show(), .hide() и .toggle(); это значение нельзя комбинировать с каким-либо другим триггером.

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

fallbackPlacementsarray['top', 'right', 'bottom', 'left']Определите резервные места размещения, предоставив список мест размещения в массиве (в порядке предпочтения). Для получения дополнительной информации смотрите документацию о поведении Popper.
boundarystring | element'clippingParents'Граница ограничения переполнения всплывающей подсказки (применяется только к модификатору Popper preventOverflow). По умолчанию это 'clippingParents' и может принимать ссылку HTMLElement (только через JavaScript). Дополнительную информацию смотрите в detectOverflow в документации Popper.
customClassstring | function''

Добавляйте классы во всплывающую подсказку, когда она отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: 'class-1 class-2'.

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

sanitizebooleantrueВключите или отключите дезинфекцию. Если активированы параметры 'template' и 'title' , будут очищены. Смотрите раздел очистки в нашей документации по JavaScript.
allowListobjectЗначение по умолчаниюОбъект, содержащий разрешенные атрибуты и теги
sanitizeFnnull | functionnullЗдесь Вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если Вы предпочитаете использовать специальную библиотеку для выполнения очистки.
offsetarray | string | function[0, 0]

Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset="10,20"

Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: [skidding, distance].

Дополнительную информацию смотрите в offset документации Popper.

offsetarray | string | function[0, 0]

Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset="10,20"

Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: [skidding, distance].

Дополнительную информацию смотрите в offset документации Popper.

popperConfignull | object | functionnull

Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper.

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

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

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

Использование функции с

popperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методы

show

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

hide

Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е. до того, как произойдет событие hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

toggle

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown.bs.tooltip или hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

dispose

Скрывает и уничтожает всплывающую подсказку элемента (Удаляет сохраненные данные в элементе DOM). Всплывающие подсказки, использующие делегирование (которые создаются с использованием параметра selector), не могут быть уничтожены индивидуально для дочерних элементов триггера.

enable

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

disable

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

toggleEnabled

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

update

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

getInstance

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

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance

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

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

События

Тип событияОписание
show.bs.tooltipЭто событие запускается немедленно при вызове метода экземпляра show.
shown.bs.tooltipЭто событие запускается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltipЭто событие запускается сразу после вызова метода экземпляра hide.
hidden.bs.tooltipЭто событие запускается, когда всплывающая подсказка перестала быть скрытой от пользователя (будет ждать завершения переходов CSS).
inserted.bs.tooltipЭто событие запускается после события show.bs.tooltip, когда шаблон всплывающей подсказки был добавлен в DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // делайте что-нибудь...
})

tooltip.hide()

Добавить всплывающую подсказку в div

У Azle хорошая реализация. Скажем, моим целевым элементом является значок с именем класса «my_icon». Просто выберите целевой элемент, используя функцию add_tooltip Azle :

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!"
})

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

az.style_tooltip('my_tooltip', 1, {
    "background" : "black",
    "margin-left" : "10px",
    "color" : "hotpink",
    "font-weight" : "bold",
    "font-family" : "Arial",
    "padding" : "10px",
    "border-radius" : "10px"
})

Мы также можем добавить изображение во всплывающую подсказку, указав «путь к изображению»:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!",
    "image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
    "image_class" : "my_image"
})

Поскольку мы указали «image_class» выше, мы можем стилизовать изображение, используя ту же функцию style_tooltip, на этот раз нацеливаясь на изображение. Приведенное выше игровое изображение было оформлено следующим образом:

az.style_tooltip('my_image', 1, {
    "width" : "50px",
    "align" : "center"
})

Вот пример использования увеличенного изображения :

… добавлено и оформлено следующим образом:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "MORE INFO<br><br>",
    "image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
    "image_class" : "my_image"
})

az.style_tooltip('my_image', 1, {
    "width" : "500px"
})

Вот GIST всего кода.

Вы можете поиграть в эту скрипку .

Подсказки. Компоненты · 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="".















НазваниеТипУмолчаниеОписание
animationbooleantrueПрименяет CSS-переход к подсказке
containerstring | element | falsefalse

Добавляет подсказку к выбранному элементу. Пример: container: 'body'. Эта опция полезна в том, что в «потоке» документа позволяет позиционировать подсказку рядом с ее триггером — что предотвратит подсказку от «сползания» при изменении размера окна.

delaynumber | object0

Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера

Если цифра поддерживается, задержка применяется к обоим hide/show

Структура объекта: delay: { "show": 500, "hide": 100 }

htmlbooleanfalse

Позволяет вставлять HTML в подсказку.

Если true, тэги HTML в title подсказки будут отрисованы в подсказке. Если false – метод jQuery text будет использован для вставки содержимого в DOM.

Используйте текст, если вы беспокоитесь о XSS-атаках.

placementstring | function‘top’

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

Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст this задается для экземпляра всплывающей подсказки.

selectorstring | falsefalseЕсли селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще.
templatestring'<div role="tooltip"><div></div><div></div></div>'

Обычный HTML для использования при создании всплывающих подсказок.

title всплывающей подсказки будет введен в элемент класса .tooltip-inner

Элемент класса .arrow станет стрелочкой всплывающей подсказки.

Самый внешний оборачивающий элемент должен иметь класс .tooltip и role="tooltip".

titlestring | element | function»

Название по умолчанию, если атрибут title не задан.

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

triggerstring‘hover focus’

Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом.

'manual' означает, что подсказка будет запрограммированно запущена методами .tooltip('show'), .tooltip('hide') and .tooltip('toggle'), это значение нельзя сочетать с любым другим триггером.

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

offsetnumber | string0Отступ подсказки относительно ее «цели». Для большей информации иди в документацию отступов Popper.js.
fallbackPlacementstring | array‘flip’Позволяет задать, какую позицию Popper.js будет использовать при «откате». Для информации — сюда.
boundarystring | element‘scrollParent’Граница ограничения overflow подсказки. Принимает значения 'viewport', 'window', 'scrollParent' или отсылку к элементу HTML (только в JavaScript). Для информации – документация по preventOverflow docs.
Атрибуты для отдельных всплывающих подсказок

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


Методы


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

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

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


$().tooltip(options)


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


.tooltip('show')


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


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

.tooltip('hide')


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


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

.tooltip('toggle')


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


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

.tooltip('dispose')


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


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

.tooltip('enable')


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


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

.tooltip('disable')


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


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

.tooltip('toggleEnabled')


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


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

.tooltip('update')


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


$('#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…
})

Бесплатная подборка всплывающих подсказок с использованием JQuery и CSS3

Здравствуйте, дорогие читатели блога beloweb.ru. В этот замечательный вечер я спешу представить Вам, замечательную подборку бесплатных плавно всплывающих подсказок на любой вкус и цвет с использованием CSS3 и JQuery.

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

Элегантная тёмная всплывающая подсказка на CSS и JQuery

Пример ι Скачать исходники

Подсказки (метки) для картинок на сайте

Пример ι Скачать исходники

Круглые и красивые всплывающие подсказки для картинок и для сайта

Пример ι Скачать исходники

Несколько примеров реализации всплывающих подсказок на JQuery

Пример ι Скачать исходники

Красивые и большие подсказки с JQuery

Пример ι Скачать исходники

Красивые и яркие всплывающие подсказки на CSS3

Пример ι Скачать исходники

Тёмное меню с красивыми выпадающими подсказками

Пример ι Скачать исходники

Классные подсказки с картинками

Пример ι Скачать исходники

Красивая информационная лента с плавными подсказками при наведении

Пример ι Скачать исходники

Несколько не плохих примеров реализации подсказок для ссылок

Пример ι Скачать исходники

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

Пример ι Скачать исходники

Всплывающие подсказки в стиле Фейсбука

Пример ι Скачать исходники

Большая подсказка, которая срабатывает после клика

Пример ι Скачать исходники

Всплывающая подсказка в очень светлом стиле

Пример ι Скачать исходники

Несколько больших и очень красивых всплывающих подсказок

Пример ι Скачать исходники

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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. Вид всплывающей подсказки

Tooltip, Popover, Dropdown и Menu Library

Tippy.js — это полное решение для всплывающих подсказок, всплывающих окон, раскрывающихся списков и меню для
web на платформе Popper.

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

  • Smart: всегда будет оптимально плавать в поле зрения
  • Универсальный: совместим с мышью, клавиатурой и сенсорным вводом
  • Настраиваемый: настраиваемый функционал и полностью стилизованный с CSS
  • Типизированный: TypeScript поддержка

Готовы начать? Посетите раздел «Начало работы» или просмотрите демонстрацию
Характеристики Типпи ниже.


# По умолчанию

Всплывающая подсказка по умолчанию выглядит так:

Моя кнопка

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

С элементом кнопки в документе, например:

 

Вы можете инициализировать его следующим образом:

 

tippy ('# myButton', { content: "Я всплывающая подсказка Типпи!", });


#Placements

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

верхний

верхний предел

верхний конец

правый

правый старт

правый край

нижний

нижний старт

нижний конец

левый

левый старт левый

-end

 

tippy (button, { // дефолт размещение: 'вверху', });

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


#Arrows

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

DefaultRoundLargeSmallWideNarrow

 

tippy (button, { // дефолт стрелка: правда, });


#Animations

В вашем типе может быть любой тип анимации перехода. По умолчанию это простой
fade (переход непрозрачности).

 

типпи (кнопка, { // дефолт анимация: 'затухание', });

Дополнительные включенные анимации

Эти анимации включены в пакет и могут быть импортированы отдельно.

сдвиг

малозаметный

крайний сдвиг

сдвиг

малозаметный сдвиг

крайний сдвиг

масштаб

тонкий масштаб

масштаб экстремальный

перспектива

тонкая перспектива

экстремальная перспектива

# Эффект заполнения материала

Текст

#Inertia / slingshot elastic effect

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

scalecale-subtlescale-extreme

#CSS-анимация ключевых кадров

Для более продвинутого уровня вы можете использовать настоящие CSS-анимации (правила @keyframes, ),
например, с помощью пакета animate.css :

rubberBandtada

#Duration

01000 [0, 500] [500, 0]


#Themes

Ваш типпи может иметь индивидуальный стиль.

 

типпи (кнопка, { тема: 'свет', });

# Включенные темы

Эти темы включены в пакет и могут быть импортированы отдельно.

lightlight-bordermaterialtranslucent

# Custom themes

С помощью темы можно применить любой CSS к шаблону.

gradientretroforest


#Triggers

Ваш tippy может быть вызван множеством различных событий, в том числе щелчком ,
focus или любое другое событие:

ClickFocus

 

tippy (button, { // дефолт триггер: 'щелкнуть', });


#Interactivity

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

Интерактивный

 

tippy (button, { интерактивный: правда, });


#HTML Content

Ваш совет может содержать HTML.

HTML ContentDropdown

 

tippy (button, { content: ' Полужирным шрифтом content ', allowHTML: true, });


#Delay

Ваш tippy может отложить скрытие или отображение после срабатывания триггера.

500 [800, 0] [0, 800]

 

tippy (button, { задержка: 500, // мс });


#Follow Cursor

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

DefaultHorizontalVerticalInitial

 

tippy (button, { followCursor: true, });


#SVGs

Ваш совет можно разместить на узлах SVG, где followCursor: 'initial' становится
очень полезно, так как его можно разместить прямо на линии.


#Singleton

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

Одноэлементные подсказки с задержкой : 500 :

TextTextTextText

Одноэлементные подсказки для группировки задержек каждого текста: 500 :

TextTextTextText

TextTextTextText

TextTextTextText

TextTextTextText

3 createSingleton (tippy (buttons), {
задержка: 500,
});

Посмотреть синглтоны подробно.


#Nesting

Типпи может быть вложен в другой.

Уровень 0

Позволяет создать систему всплывающего меню.

# Много больше …

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

Все реквизиты | Tippy.js

All Props

«Props» — это настраиваемые свойства, которые можно дополнительно передать в tippy ()
конструктор.

 

типпи (цели, { // реквизиты });


#allowHTML

Определяет, анализируются ли строки содержимого как HTML, а не как текст.

Предупреждение

Убедитесь, что вы очищаете все пользовательские данные при рендеринге HTML для предотвращения XSS
атаки.

 

типпы (цели, { // дефолт allowHTML: false, // разбираем строки `content` как HTML allowHTML: true, });

allowHTML: trueallowHTML: false


#animateFill

Определяет, нужно ли анимировать цвет заливки фона подсказки.

 

типпи (цели, { // дефолт animateFill: false, // включаем это animateFill: true, });

Плагин

При использовании модулей (esm) вы должны импортировать этот плагин, чтобы использовать его.

Вы также должны импортировать анимации dist / backdrop.css, и / shift-away.css .
таблицы стилей для работы.

 

импортировать типпи, {animateFill} из 'tippy.js'; импортировать 'tippy.js / dist / backdrop.css'; импортировать 'tippy.js / animations / shift-away.css'; типпи (цели, { animateFill: true, плагины: [animateFill], });

animateFill: trueanimateFill: false


#animation

Тип анимации перехода.Подробнее см. Анимация.

 

типпи (цели, { // дефолт анимация: 'затухание', });

Note

Это false по умолчанию при использовании Headless Tippy.


#appendTo

Элемент, к которому нужно добавить подсказку. Если интерактивный: истина , поведение по умолчанию
— это appendTo: "parent" . См. Доступность
для дополнительной информации.

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

 

типпи (цели, { // по умолчанию (принимает ссылку в качестве аргумента) appendTo: () => document.body, // добавляем к родительскому узлу ссылки appendTo: 'родительский', // добавляем к элементу appendTo: element, });


#aria

Конфигурация атрибута aria. Оба свойства являются необязательными:

  • content : Атрибут aria- * , примененный к ссылочному элементу для объявления
    полезное содержание.
  • расширенный : добавлять ли в ссылку атрибут aria-extended
    элемент.
 

типпы (цели, { // дефолт aria: { // `null` в интерактивном режиме: true, в противном случае -" описано " content: 'авто', // совпадает с логическим значением `interactive` расширен: 'авто', }, // объявляем как метку, а не как описание // контент также будет объявлен с помощью `interactive: true` aria: { content: 'labelledby', }, // соблюдать строгие правила WCAG 2.1 с помощью `interactive: true`, чтобы // можно летать, если он на самом деле не интерактивен, но контент все равно будет // объявлено aria: { content: 'описано по', }, // отключение полностью, оставьте на ваше усмотрение aria: { содержание: нуль, расширено: false, }, });


#arrow

Определяет, есть ли у типпи стрелка.

 

типпи (цели, { // дефолт стрелка: правда, // отключаем стрелку стрелка: ложь, // настраиваемая строка стрелки стрелка: ' ... ', // настраиваемый элемент стрелки стрелка: svgElement, });

Предупреждение

Строка анализируется как .innerHTML . Не передавайте в этот реквизит неизвестные пользовательские данные.

Чтобы использовать круглую стрелку по умолчанию, импортируйте roundArrow из пакета
( tippy.roundArrow в версии umd ) и передайте его как значение.

Вы также должны импортировать dist / svg-arrow.css при использовании SVG-стрелок для стилизации
Работа.

 

импортировать типпи, {roundArrow} из 'tippy.js'; импортировать 'tippy.js / dist / svg-arrow.css'; типпи (цели, { стрелка: roundArrow, });

arrow: truearrow: false


#content

Содержание подсказки.

 

типпи (цели, { // дефолт содержание: '', // нить content: 'Привет', // Элемент содержание: документ.createElement ('div'), // (ссылка) => строка | Элемент content: (ссылка) => reference.getAttribute ('title'), });

Примечание

Чтобы отображать строки как HTML, установите allowHTML: true . Это может открыть вам XSS
атак, так что будьте осторожны.


#delay

Задержка в мс после срабатывания триггерного события до того, как типпи отобразится или скроется.

 

типпи (цели, { // дефолт задержка: 0, // показать и скрыть задержку 100 мс задержка: 100, // задержка показа 100 мс, задержка скрытия 200 мс задержка: [100, 200], // задержка показа составляет 100 мс, задержка скрытия - по умолчанию задержка: [100, null], });

delay: 400delay: [500, 250]


#duration

Продолжительность анимации перехода в мс.

 

типпи (цели, { // дефолт продолжительность: [300, 250], // показать и скрыть длительность 100 мс продолжительность: 100, // длительность показа 100 мс, длительность скрытия 200 мс продолжительность: [100, 200], // длительность показа 100 мс, длительность скрытия - по умолчанию продолжительность: [100, null], });

duration: 1000duration: [500, 0]


#followCursor

Определяет, следует ли подсказка за курсором мыши пользователя.

 

типпи (цели, { // дефолт followCursor: false, // следуем по осям x и y followCursor: true, // следуем по оси x followCursor: 'horizontal', // следуем по оси y followCursor: 'vertical', // следуем, пока он не появится (с учетом `delay`) followCursor: 'начальный', });

Плагин

При использовании модулей (esm) вы должны импортировать этот плагин, чтобы использовать его.

 

импортировать типпи, {followCursor} из 'tippy.js'; типпи (цели, { followCursor: true, плагины: [followCursor], });

followCursor: truefollowCursor: «horizontal» followCursor: «initial»


#getReferenceClientRect

Используется в качестве ссылки позиционирования для tippy.

 

типпи (цели, { // по умолчанию (используется ссылка, переданная в качестве первого аргумента) getReferenceClientRect: нуль, // функция, возвращающая объект ClientRect getReferenceClientRect: () => ({ ширина: 100, высота: 100, осталось: 100, справа: 200, верх: 100, низ: 200, }), });


#hideOnClick

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

 

типпи (цели, { // дефолт hideOnClick: правда, // никогда не скрываться при нажатии hideOnClick: ложь, // скрытие только при щелчке по ссылке, но не за ее пределами hideOnClick: 'переключить', });

hideOnClick: true с триггером : «щелчок» :

триггер: «щелчок»

hideOnClick: «переключение» с триггером : «щелчок» :

триггер: «щелчок»

hideOnClick: false с триггером : "mouseenter" (триггер click никогда не
hide):

trigger: «mouseenter»


#ignoreAttributes

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

 

типпи (цели, { // дефолт ignoreAttributes: false, // не учитывать атрибуты data-tippy- * в ссылочном элементе ignoreAttributes: true, });


#inertia

Определяет, применяется ли (настраиваемая) пружинная анимация CSS к
переходная анимация.

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

 

типпи (цели, { // дефолт инерция: ложь, // включаем это инерция: правда, });

 

.tippy-box [инерция данных] [data-state = 'visible'] { временная функция перехода: кубическая Безье (...); }

анимация: «масштаб»


#inlinePositioning

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

 

типпи (цели, { // дефолт inlinePositioning: false, // включаем это inlinePositioning: true, });

Плагин

При использовании модулей (esm) вы должны импортировать этот плагин, чтобы использовать его.

 

импортировать типпи, {inlinePositioning} из 'tippy.js'; типпи (цели, { inlinePositioning: true, плагины: [inlinePositioning], });


#interactive

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

 

типпи (цели, { // дефолт интерактивный: ложь, // включаем это интерактивный: правда, });

interactive: falseinteractive: true


#interactiveBorder

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

 

типпи (цели, { // дефолт InteractiveBorder: 2, // 30 пикселей InteractiveBorder: 30, });

interactiveBorder: 5interactiveBorder: 30


#interactiveDebounce

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

Предлагает временную (а не пространственную) альтернативу interactiveBorder ,
хотя его можно использовать вместе с ним.

 

типпи (цели, { // дефолт InteractiveDebounce: 0, // 75 мс InteractiveDebounce: 75, });

interactiveDebounce: 0interactiveDebounce: 75


#maxWidth

Задает максимальную ширину подсказки. Полезно, чтобы это не было слишком
по горизонтали, чтобы читать.

 

типпи (цели, { // дефолт maxWidth: 350, // нет maxWidth maxWidth: 'нет', });

maxWidth: «none» maxWidth: 200

Note

Если ширина области просмотра меньше maxWidth , основной CSS tippy обеспечивает
Типпи остается меньше экрана.


#moveTransition

Определяет переход, применяемый к корневому позиционируемому узлу popper. Этот
описывает переход между «ходами» (или обновлениями позиции) поппера
элемент, когда он, например, переворачивает или меняет целевое местоположение.

 

типпи (цели, { // дефолт moveTransition: '', // настраиваемый переход moveTransition: 'легкость преобразования 0,2 с', });


#offset

Смещает типпи от опорного элемента в пикселях (занос и
расстояние).

См. Документацию Поппера для
Детали.

 

типпи (цели, { // по умолчанию [занос, расстояние] смещение: [0, 10], });

смещение: [20, 5] смещение: [10, 20]


#onAfterUpdate

Вызывается после обновления подсказки (через .setProps () ).

 

типпи (цели, { onAfterUpdate (instance, partialProps) { // ... }, });


#onBeforeUpdate

Вызывается перед обновлением подсказки (через .setProps () ).

 

типпи (цели, { onBeforeUpdate (instance, partialProps) { // ... }, });


#onClickOutside

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

 

типпи (цели, { onClickOutside (instance, event) { // ... }, });


#onCreate

Вызывается после создания подсказки.

 

типпи (цели, { onCreate (instance) { //... }, });


#onDestroy

Вызывается после уничтожения типпи.

 

типпи (цели, { onDestroy (instance) { // ... }, });


#onHidden

Вызывается, когда tippy полностью скрыт и отключен от DOM.

 

типпи (цели, { onHidden (instance) { // ... }, });


#on Скрыть

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

 

типпи (цели, { onHide (instance) { // ... }, });

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


#onMount

Вызывается после того, как tippy был смонтирован в DOM (и popperInstance
созданный).

 

типпи (цели, { onMount (instance) { // ... }, });


#onShow

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

 

типпи (цели, { onShow (instance) { // ... }, });

Вы можете опционально вернуть false из этого жизненного цикла, чтобы отменить показ на основе
на условии.


#onShown

Вызывается после полного перехода на типпи.

Примечание

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

 

типпи (цели, { onShown (instance) { // ... }, });


#onTrigger

Вызывается, когда tippy запускается событием DOM (например, mouseenter ).

 

типпи (цели, { onTrigger (instance, event) { // ... }, });


#onUntrigger

Вызывается, когда tippy не запускается событием DOM (например.грамм. mouseleave ).

 

типпи (цели, { onUntrigger (экземпляр, событие) { // ... }, });


#placement

предпочел размещение типпи. Обратите внимание, что модификатор Поппера flip может
измените это положение на противоположное, если там больше места.

 

типпи (цели, { // дефолт размещение: 'вверху', // Полный список: размещение: 'top-start', размещение: 'топовое', размещение: 'справа', размещение: 'правый старт', размещение: 'правое', размещение: 'снизу', размещение: 'начало-снизу', размещение: 'нижний конец', размещение: 'слева', размещение: 'начало слева', размещение: 'левый конец', // выбираем сторону с наибольшим пространством размещение: 'авто', размещение: 'автозапуск', размещение: 'auto-end', });


#plugins

Плагины для использования.Подробнее см. Плагины.

Примечание

При использовании tippy.setDefaultProps () , указание подключаемых модулей по умолчанию вызывает
плагины по умолчанию, которые будут объединены с плагинами, указанными в конструкторе tippy ()
звонки.

 

типпы (цели, { // дефолт плагины: [], });


#popperOptions

Задает настраиваемые параметры Popper. Это дает вам полный контроль над типпи
позиционирование. Подробности см. В документации Поппера.

 

типпи (цели, { // дефолт popperOptions: {}, // подробный пример popperOptions: { стратегия: 'фиксированная', модификаторы: [ { имя: 'перевернуть', параметры: { fallbackPlacements: ['снизу', 'справа'], }, }, { имя: 'preventOverflow', параметры: { altAxis: правда, привязь: ложь, }, }, ], }, });


#render

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

Подробнее см. Типпи без головы.


#role

Задает атрибут role для элемента tippy.

 

типпи (цели, { // дефолт роль: 'всплывающая подсказка', });


#showOnCreate

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

 

типпи (цели, { // дефолт showOnCreate: ложь, // включаем это showOnCreate: правда, });


#sticky

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

Примечание

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

 

типпы (цели, { // дефолт липкий: ложь, // включаем это липкий: правда, // проверяем только "эталонный" прямоугольник на наличие изменений липкий: 'ссылка', // проверяем только прямоугольник "popper" на предмет изменений липкий: 'поппер', });

Плагин

При использовании модулей (esm) вы должны импортировать этот плагин, чтобы использовать его.

 

импортировать типпи, {липкие} из 'tippy.js'; типпи (цели, { липкий: правда, плагины: [липкий], });


#theme

Определяет тему типичного элемента.Основной CSS по умолчанию — темный
# 333 тема. Это можно изменить с помощью настраиваемой темы. Посмотреть темы
для подробностей.

 

типпи (цели, { // дефолт тема: '', // настраиваемая тема тема: 'помидор', });


#touch

Определяет поведение сенсорных устройств.

 

типпи (цели, { // дефолт прикосновение: правда, // отключаем tippy от показа на сенсорных устройствах прикосновение: ложь, // требуется нажать и удерживать экран, чтобы отобразить его касание: "удерживать", // то же, что и выше, но при долгом нажатии касание: ['hold', 500], });


#trigger

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

 

типпи (цели, { // дефолт триггер: 'mouseenter focus', // другие: триггер: 'щелкнуть', триггер: 'focusin', триггер: 'mouseenter click', // запускать только программно триггер: 'ручной', });


#triggerTarget

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

 

типпи (цели, { // по умолчанию (используется ссылка) triggerTarget: нуль, // Элемент triggerTarget: someElement, // Элемент [] triggerTarget: [someElement1, someElement2], });


#zIndex

Задает z-index CSS на корневом узле popper.

 

типпи (цели, { // дефолт zIndex: 9999, });

Конструктор | Tippy.js

Конструктор

Конструктор tippy () (простая функция) создает отдельные экземпляры tippy.
У вас есть два варианта предоставления типичного содержания:

#Attribute

С некоторыми элементами в документе:

 

Вызов конструктора tippy () с соответствующим им селектором CSS:

 

tippy ('[data-tippy-content ] ');

#Prop

При таргетинге на один элемент можно использовать свойство content вместо
атрибут:

 

tippy ('# singleElement', { content: 'Подсказка', });

Примечание

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

# Типы целей

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

 

// Строка (элементы селектора CSS в документе) типпи ('# id'); типпи ('. класс'); типпи ('[содержимое-типпи-данных]'); // Элемент типпи (document.getElementById ('мой-элемент')); // Элемент [] типпи ([элемент1, элемент2, элемент3]); // NodeList типпи (документ.querySelectorAll ('. мои-элементы'));

#Disabled elements

Если элемент отключен, вам нужно будет использовать элемент-оболочку ( или

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

 

будет работать -> <кнопка отключена> Текст

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

html — Использование onmouseover для отображения всплывающей подсказки в JavaScript

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

Ниже мой код:

  
    
        
    
    
        
<сценарий> function mOver (obj) { объектinnerHTML = "

Текст справки

"; } function mOut (obj) { obj.innerHTML = ""; }

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

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

Заранее спасибо

Подсказка | jQuery UI


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

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

просмотреть исходный код

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

 

jQuery UI Tooltip - функции по умолчанию

< script src = "https://code.jquery.com/jquery-3.6.0.js">

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

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

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

ThemeRoller

, также будут стилизованы всплывающие подсказки соответственно.

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

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

Хотите узнать больше о виджете всплывающей подсказки? Проверьте
Документация по API.

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

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

Обзор

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

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

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

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

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

Примеры

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

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

  


  

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

    

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

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

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

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

Разметка

Требуемая разметка для всплывающей подсказки — это только атрибут данных, и заголовок , в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение top ).

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

Вы должны добавлять всплывающие подсказки только к элементам HTML, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы).Хотя произвольные элементы HTML (например, s) можно сделать доступными для фокусировки, добавив атрибут tabindex = "0" , это добавит потенциально раздражающие и сбивающие с толку позиции табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство вспомогательных технологий в настоящее время не выводят всплывающую подсказку в этой ситуации.

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

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


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

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

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

или , в идеале сделанной с фокусировкой на клавиатуре, используя tabindex = "0" , и переопределить события указателя на отключенный элемент.

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-animation = "" .

Номер

Номер

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

Добавляет всплывающую подсказку к определенному элементу.Пример: контейнер: 'body' . Этот параметр особенно полезен тем, что позволяет размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.

задержка | объект 0

Задержка показа и скрытия всплывающей подсказки (мс) — не относится к ручному типу запуска

Если указан номер, задержка применяется к скрытию / отображению

Структура объекта: задержка: {"показать": 500, "скрыть": 100}

HTML логический ложь

Разрешить HTML во всплывающей подсказке.

Если true, HTML-теги в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM.

Используйте текст, если вас беспокоят XSS-атаки.

размещение строка | функция верх

Как разместить всплывающую подсказку — авто | наверх | внизу | слева | Правильно.
Если указано auto , всплывающая подсказка будет динамически переориентирована.

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

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

'

Базовый HTML-код для использования при создании всплывающей подсказки.

Заголовок всплывающей подсказки будет вставлен в .tooltip-inner .

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

Самый внешний элемент оболочки должен иметь .tooltip class и role = "tooltip" .

название строка | элемент | функция

Значение заголовка по умолчанию, если атрибут заголовок отсутствует.

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

спусковой крючок строка ‘hover focus’

Как запускается всплывающая подсказка — щелкните | парить | фокус | руководство по эксплуатации.Вы можете передать несколько триггеров; разделите их пробелом.

'manual' указывает, что всплывающая подсказка будет запускаться программно с помощью методов .tooltip ('show') , .tooltip ('hide') и .tooltip ('toggle') ; это значение нельзя комбинировать с каким-либо другим триггером.

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

вычет | строка 0 Смещение всплывающей подсказки относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
резервное размещение строка | массив переворот Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поведение Popper.js docs
граница строка | элемент ‘scrollParent’ Граница ограничения переполнения всплывающей подсказки.Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации см. Документацию PreventOverflow Popper.js.
Атрибуты данных для отдельных всплывающих подсказок

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

Методы

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

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

См. Нашу документацию по JavaScript для получения дополнительной информации.

$ (). Подсказка (опции)

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

.tooltip ('показать')

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

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

.tooltip ('hide')

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

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

.tooltip ('toggle')

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

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

.tooltip ('dispose')

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

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

.tooltip ('enable')

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

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

.tooltip ('disable')

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

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

.tooltip ('toggleEnabled')

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

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

.tooltip ('update')

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

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

События

Показано

Тип события Описание
показать.bs.tooltip Это событие запускается немедленно при вызове метода экземпляра show .
.bs.tooltip Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide .
hidden.bs.всплывающая подсказка Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
Insert.bs.tooltip Это событие запускается после события show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
})  

20 лучших плагинов всплывающих подсказок с открытым исходным кодом, созданных с помощью CSS, jQuery и JavaScript

Лучшие бесплатные плагины всплывающих подсказок, известные Google.

[Примечание редактора: в более ранней версии этой статьи перечислялось 73 подключаемых модулей всплывающих подсказок. Это было похоже на ... много. Мы сократили список до 20 пунктов, потому что иногда меньше - значит больше.]

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

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

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

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

1. Tooltipster

Язык (и): jQuery
Что нам в нем нравится: Плагин для создания чистых современных всплывающих подсказок с множеством возможных взаимодействий, тем и триггеров .

2. Tippy.js

Язык (и): JavaScript
Что нам в нем нравится: Полностью настраиваемая ванильная библиотека всплывающих подсказок JS со множеством возможных взаимодействий, анимации и тем. Может содержать HTML и имеет множество функций, таких как вложение раскрывающегося списка и слежение за курсором.

3. CSS Tooltip

Язык (и): CSS
Что нам в нем нравится: Простая всплывающая подсказка с плавной анимацией, созданная с помощью HTML и CSS.

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

Язык (и): CSS
Что нам в нем нравится: Простая всплывающая подсказка, созданная с использованием плавной анимации.

5. Grumble.js

Язык (и): jQuery
Что нам в нем нравится: Анимированные и стилизованные всплывающие подсказки, которые можно вращать вокруг заданного элемента под любым углом.

6. Protip

Язык (и): jQuery
Что нам в нем нравится: Замысловатая всплывающая подсказка с несколькими скинами, размещениями и анимациями, предназначенная для «любой ситуации.”

7. Чаевые

Язык (и): JavaScript
Что нам в нем нравится: Очень простое решение для всплывающих подсказок на JavaScript с несколькими скинами, размерами и вариантами взаимодействия.

8. Microtip

Язык (и): CSS
Что нам в нем нравится: Современная, минимальная и очень легкая библиотека всплывающих подсказок только для CSS.

9. Автоматические всплывающие подсказки

Язык (и): Javascript
Что нам в нем нравится: Полностью настраиваемые всплывающие подсказки, которые можно автоматически позиционировать.

10. JBox

Язык (и): jQuery
Что нам в нем нравится: Мощный и гибкий плагин, который также имеет модальные окна и уведомления. Легкий, настраиваемый и отзывчивый.

11. Венк

Язык (и): CSS
Что нам в нем нравится: Доступна облегченная всплывающая подсказка, сделанная с помощью CSS. Можно легко стилизовать с помощью атрибутов или классов.

12. Crumble

Язык (и): jQuery
Что нам в нем нравится: Интерактивные обзоры функций jquery.Причудливый стиль пузыря визуально интересен. Требуется grumble.js (см. Выше).

13.

Intro.js

Язык (и): JavaScript
Что нам в нем нравится: Мощная и универсальная библиотека функций продукта для пошаговых инструкций. Никаких зависимостей, удобный.

14. Динамический текст всплывающей подсказки

Язык (и): CSS
Что нам нравится: Пишите динамический текст всплывающей подсказки без JavaScript, который изменяется в зависимости от состояния кнопки.

15. Toolbar.Js

Язык (и): jQuery
Что нам в нем нравится: Маленький изящный плагин jQuery, который создает панели инструментов в стиле всплывающих подсказок для веб-приложений и веб-сайтов.

16. Simptip

Язык (и): CSS
Что нам в нем нравится: Всплывающая подсказка CSS, созданная с помощью Sass, что довольно круто.

17. HubSpot Tooltip

Язык (и): JavaScript, CSS
Что нам в нем нравится: Библиотека JS и CSS для создания настраиваемых всплывающих подсказок.Построен на Tether and Drop.

18. Адаптивная всплывающая подсказка

Язык (и): CSS
Что нам в нем нравится: Простая маленькая адаптивная всплывающая подсказка, которая появляется при наведении курсора.

19. Tootik

Язык (и): CSS
Что нам в нем нравится: Чистая библиотека всплывающих подсказок CSS / SCSS / LESS с простыми параметрами настройки. Легко использовать.

20. Первая буква всплывающая подсказка свойства CSS

Язык (и): CSS
Что нам в нем нравится: Простая всплывающая подсказка с тонкой анимацией постепенного появления / исчезновения.Использует CSS и свойство CSS первой буквы.

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

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

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

Category Js

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *