Компонент ToolTip — Windows Forms
- Время чтения: 2 мин
В этой статье
Компонент ToolTip в Windows Forms отображает текст при наведении указателя мыши на элементы управления.The Windows Forms ToolTip component displays text when the user points at controls. Компонент ToolTip можно связать с любым элементом управления.A ToolTip can be associated with any control. Пример использования этого компонента: для экономии места в форме можно настроить отображение маленького значка для кнопки и использовать компонент ToolTip для объяснения ее функции.An example use of this control: In order to save space on a form, you can display a small icon on a button and use a ToolTip to explain the button’s function.
в этом разделеIn This Section
Общие сведения об элементе управления ToolTipToolTip Component Overview
Основные понятия, связанные с компонентом ToolTip, который позволяет пользователям просматривать текст при наведении указателя мыши на элемент управления.Introduces the general concepts of the ToolTip component, which allows users to see text when they point the mouse at a control.
Практическое руководство. Определение всплывающих подсказок для элементов управления в Windows Forms во время разработкиHow to: Set ToolTips for Controls on a Windows Form at Design Time
Описание способов настройки подсказок в коде или в конструкторе.Describes how to set Tooltips in code or in the designer.
Практическое руководство. Изменение значения задержки для компонента ToolTip в Windows FormsHow to: Change the Delay of the Windows Forms ToolTip Component
Описание настройки значений, определяющих время задержки отображения подсказки, а также время, в течение которого она отображается.Explains how to set values that control how long a Tooltip takes to appear and the length of time for which it is shown.
СправочникReference
Класс ToolTipToolTip class
Справочная информация о классе и его членах.Provides reference information on the class and its members.
Элементы управления для использования в Windows FormsControls to Use on Windows Forms
Полный список элементов управления Windows Forms со ссылками на информацию об их применении.Provides a complete list of Windows Forms controls, with links to information on their use.
Отображение справки по элементам управления с помощью подсказокControl Help Using ToolTips
Описание использования подсказок в качестве кратких специализированных справочных сообщений для отдельных элементов управления в формах Windows Forms.Discusses Tooltips as a way to make brief, specialized Help messages for individual controls on Windows Forms.
Подсказки. Компоненты · Bootstrap. Версия v4.1.3
Документация и примеры добавления настраиваемых всплывающих подсказок 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 |
Добавляет подсказку к выбранному элементу. Пример: |
|
delay | number | object | 0 |
Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера Если цифра поддерживается, задержка применяется к обоим hide/show Структура объекта: |
html | boolean | false |
Позволяет вставлять HTML в подсказку. Если true, тэги HTML в Используйте текст, если вы беспокоитесь о XSS-атаках. |
placement | string | function | ‘top’ |
Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право. Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст |
selector | string | false | false | Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще. |
template | string | '<div role="tooltip"><div></div><div></div></div>' |
Обычный HTML для использования при создании всплывающих подсказок.
Элемент класса Самый внешний оборачивающий элемент должен иметь класс |
title | string | element | function | » |
Название по умолчанию, если атрибут Если функция задана, она будет вызываться с ее набором |
trigger | string | ‘hover focus’ |
Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом.
|
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 асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
Смотрите документацию.
$().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…
})
Подсказки. Компоненты · Bootstrap
Документация и примеры добавления настраиваемых всплывающих подсказок 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 |
Добавляет подсказку к выбранному элементу. Пример: |
delay | number | object | 0 |
Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера Если цифра поддерживается, задержка применяется к обоим hide/show Структура объекта: |
html | boolean | false |
Позволяет вставлять HTML в подсказку. Если true, тэги HTML в Используйте текст, если вы беспокоитесь о XSS-атаках. |
placement | string | function | ‘top’ |
Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право. Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст |
selector | string | false | false | Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще. |
template | string | '<div role="tooltip"><div></div><div></div></div>' |
Обычный HTML для использования при создании всплывающих подсказок.
Элемент класса Самый внешний оборачивающий элемент должен иметь класс |
title | string | element | function | » |
Название по умолчанию, если атрибут Если функция задана, она будет вызываться с ее набором |
trigger | string | ‘hover focus’ |
Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом.
|
offset | number | string | 0 | Отступ подсказки относительно ее «цели». Для большей информации иди в документацию отступов Popper.js. |
fallbackPlacement | string | array | ‘flip’ | Позволяет задать, какую позицию Popper.js будет использовать при «откате». Для информации — сюда. |
boundary | string | element | ‘scrollParent’ | Граница ограничения overflow подсказки. Принимает значения 'viewport' , 'window' , 'scrollParent' или отсылку к элементу HTML (только в JavaScript). Для информации – документация по preventOverflow docs. |
sanitize | boolean | true | Включить или отключить санацию. Если активированы 'template' и 'title' , параметры будут очищены. |
whiteList | object | Default value | Объект, который содержит допустимые атрибуты и теги |
sanitizeFn | null | function | null | Здесь вы можете предоставить свою собственную функцию очистки. Это может быть полезно, если вы предпочитаете использовать выделенную библиотеку для выполнения очистки. |
Атрибуты для отдельных всплывающих подсказок
Параметры для таковых могут быть заданы использованием атрибутов, как показано выше.
Методы
Асинхронные методы и переходы
Все методы 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…
})
Подсказки. Компоненты · 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 |
Добавляет подсказку к выбранному элементу. Пример: |
delay | number | object | 0 |
Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера Если цифра поддерживается, задержка применяется к обоим hide/show Структура объекта: |
html | boolean | false |
Позволяет вставлять HTML в подсказку. Если true, тэги HTML в Используйте текст, если вы беспокоитесь о XSS-атаках. |
placement | string | function | ‘top’ |
Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право. Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст |
selector | string | false | false | Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще. |
template | string | '<div role="tooltip"><div></div><div></div></div>' |
Обычный HTML для использования при создании всплывающих подсказок.
Элемент класса Самый внешний оборачивающий элемент должен иметь класс |
title | string | element | function | » |
Название по умолчанию, если атрибут Если функция задана, она будет вызываться с ее набором |
trigger | string | ‘hover focus’ |
Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом.
|
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 асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
Смотрите документацию.
$().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…
})
Подсказки · Bootstrap на русском
Вдохновленный отличным навеселе jQuery плагин написанный Jason Frame. Всплывающие подсказки-это обновленная версия, которая не полагаться на изображения, использовать CSS3 для анимации, и сведения-атрибуты для местных Заголовок хранения.
Содержание
Обзор
Что нужно знать при использовании плагин всплывающей подсказки:
- Подсказки полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!
- Подсказки отказаться, по соображениям производительности, так что вы должны инициализировать их самостоятельно.
- Подсказки с нулевой длины названия не отображаются.
- Укажите
container: 'body'
чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.). - Вызывая подсказки на скрытые элементы не будут работать.
- Подсказки для
.disabled
илиdisabled
элементы должны быть вызваны на элемент оболочки. - При срабатывании из гиперссылок, которые охватывают несколько строк, подсказки будут центрироваться. Используйте
white-space: nowrap;
на<a>
, чтобы избежать этого поведения.
Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.
Одним из способов инициализации все подсказки на странице будет выбрать их 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>
Использование
Плагин всплывающей подсказки генерирует контент и разметки по требованию, а по умолчанию места подсказки после запуска элемента.
Вызвать подсказку через JavaScript:
$('#example').tooltip(options)
Разметки
Требуемая разметка для подсказки только data
атрибут title
на HTML элемент, который вы хотите иметь подсказку. Созданный разметки подсказки достаточно проста, хотя и требует установки (по умолчанию значение top
плагином).
Делая подсказки для работы клавиатуры и пользователей ассистивных технологий
Следует только добавить всплывающие подсказки для элементов HTML, которые традиционно клавиатурой и интерактивным (например, ссылки или элементы управления формы). Хотя произвольный HTML-элементы (такие как <span>
) может быть сделан фокус на добавление tabindex="0"
атрибута, это может Добавить закладку раздражает и смущает останавливается на неинтерактивные элементы для пользователей клавиатуры. Кроме того, большинство технологий, в настоящее время не озвучит подсказки в этой ситуации.
<!-- HTML писать -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Сгенерированной разметке плагин -->
<div role="tooltip">
<div></div>
<div>
Some tooltip text!
</div>
</div>
Варианты
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-
, а на data-animation=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
animation | boolean | true | Нанесите CSS плавного перехода к подсказке |
container | string | false | false | Добавляет всплывающую подсказку к конкретному элементу. Пример: |
delay | number | object | 0 | Задержка отображения и скрытия подсказки (мс) — не применяется к ручной запуск Тип Если номер указан, задержка применяется как скрыть/показать Структура объекта: |
html | boolean | false | Вставить HTML в подсказке. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак. |
placement | string | function | ‘top’ | Как подсказка — сверху | снизу | слева | справа | авто. Когда функция используется для определения размещения, это называется с tooltip DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В |
selector | string | false | Если имеется селектор, объектов пирог будет передана указанным целям. На практике это используется для включения динамического содержимого HTML для эклеров добавил. Смотрите это и информативный пример. |
template | string | '<div role="tooltip"><div></div><div></div></div>' | Базовый HTML-для использования при создании всплывающей подсказки. Подсказки
Элемент внешней оболочки должен иметь |
title | string | element | function | » | По умолчанию название значение, если атрибут Если дана функция, она будет вызвана с его |
trigger | string | ‘hover focus’ | Как подсказка срабатывает клик | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. «вручную» не может сочетаться с любой другой триггер. |
constraints | Array | [] | Множество препятствий — прошел на Tether. Дополнительные сведения см. в разделе Tether’ы ограничение документы. |
offset | string | ‘0 0’ | Смещение окна относительно своей цели. Дополнительные сведения см. в разделе Tether’ы смещение документы. |
Атрибуты данных для отдельных подсказки
Варианты индивидуальных подсказки также может быть задан с помощью атрибутов данных, как описано выше.
Методы
$().tooltip(options)
Присоединяет обработчик подсказки к коллекции элементов.
.tooltip('show')
Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. 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')
Скрывает и уничтожает всплывающей подсказки элемента. Подсказки, что использовать делегирование (которые создаются с помощью selector
опция) не может быть индивидуально уничтожен потомок триггерных элементов.
$('#element').tooltip('dispose')
События
Тип События | Описание |
---|---|
show.bs.tooltip | Это событие возникает сразу же, когда show вызывается способ экземпляра. |
shown.bs.tooltip | Это событие запускается, когда подсказка была сделана видимой для пользователя (будет ждать CSS переходы для завершения). |
hide.bs.tooltip | Это событие сразу же уволили, когда hide метод экземпляра называется. |
hidden.bs.tooltip | Это событие запускается, когда подсказка закончит быть скрыта от пользователя (будет ждать CSS переходы для завершения). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// сделать что-то...
})
Компоненты
Вдохновленные замечательным плагином jQuery.tipsy, написанным Jason Frame, подсказки являются обновленной версией, которая не использует изображение, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.
Содержание
Обзор
Что нужно знать при использовании плагина подсказок:
- Подсказки полагаются на третью библиотеку Tether для позиционирования. Вы должны включить tether.min.js перед bootstrap.js для того, чтобы подсказки работали!
- Подсказки выбираются по соображениям производительности, поэтому вы должны их инициализировать самостоятельно.
- Подсказки с названиями нулевой длины никогда не отображаются.
- Укажите
container: 'body'
чтобы избежать проблем с отображением более сложных компонентов (например, групп ввода, групп кнопок и т. д.). - Запуск подсказок для скрытых элементов не будет работать.
- Подсказки для
.disabled
илиdisabled
элементов нуждаются в обертывании. - При запуске из гиперссылок, которые охватывают несколько строк, подсказки будут центрированы. Используйте
white-space: nowrap;
на ваших<a>
, чтобы избежать этого.
Получили все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.
Одним из способов инициализации всех всплывающих подсказок на странице — выбрать их с помощью атрибута 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"
, это добавит потенциально раздражающие и путающие табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство ассистивных технологий в настоящее время не объявляет всплывающую подсказку в этой ситуации.
<!-- 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>
Параметры
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием атрибута в data-
, как в примере: data-animation=""
.
Название | Тип | По умолчанию | Описание |
---|---|---|---|
animation | логический | true | применяет CSS для плавного перехода к подсказке |
container | строковый | element | false | false |
Добавляет всплывающую подсказку к определенному элементу. Пример: |
delay | числовой | object | 0 |
Задержка показа и сокрытия подсказок (ms) — не применяется для ручного типа вызова Если указывается число, задержка применяется и для сокрытия, и для отображения Структура объекта: |
html | логический | false |
Вставляет HTML в подсказку. Если true, HTML-теги в Используйте текст, если вы беспокоитесь об атаках XSS. |
placement | строковый | функция | ‘top’ |
Как позиционировать подсказку — сверху | снизу | слева | справа. Когда функция используется для определения места размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента, а узел DOM триггера — со вторым. Контекст |
selector | строковый | false | Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для того, чтобы динамический HTML-контент добавлял подсказки. Смотрите это и информативный пример. |
template | строковый | '<div role="tooltip"><div></div><div></div></div>' |
Базовый HTML для использования при создании всплывающей подсказки.
Внешний элемент-обтекатель должен иметь класс |
title | строковый | элемент | функция | » |
Значение заголовка по умолчанию, если атрибут Если функция задана, она будет вызвана с |
trigger | строковый | ‘hover focus’ | Как запускается всплывающая подсказка — нажатие | наведение | фокус | manual. Вы можете передавать несколько триггеров; разделите их пробелом. `Manual` не может комбинироваться с любым другим триггером. |
constraints | массив | [] | Массив ограничений — передан Tether. Для получения дополнительной информации обратитесь к документам ограничений Tether. |
offset | строковый | ‘0 0’ | Смещение всплывающей подсказки относительно ее цели. Для получения дополнительной информации обратитесь к offset docs Tether. |
Атрибуты данных для индивидуальных подсказок
Параметры для индивидуальных подсказок еще можете указывать через атрибуты данных, как описано выше.
Методы
$().tooltip(options)
Закрепите обработчик подсказки по набору элементов.
.tooltip('show')
Показывает всплывающую подсказку элемента. Возвращается вызывающей стороне до того, как всплывающая подсказка была фактически показана (то есть до события shown.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки. Подсказки с названиями нулевой длины никогда не отображаются.
$('#element').tooltip('show')
.tooltip('hide')
Скрывает всплывающую подсказку элемента. Возвращает вызывающей стороне до того, как всплывающая подсказка была скрыта (то есть до события hidden.bs.tooltip
event occurs). Это считается «ручным» запуском всплывающей подсказки.
$('#element').tooltip('hide')
.tooltip('toggle')
Переключает подсказку элемента. Возвращается вызывающей стороне до того, как всплывающая подсказка была показана или скрыта (то есть до события shown.bs.tooltip
или hidden.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки.
$('#element').tooltip('toggle')
.tooltip('dispose')
Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (которые создаются с помощью the selector
option) не могут быть индивидуально уничтожены в элементах триггера-спутника.
$('#element').tooltip('dispose')
События
Тип События | Описание |
---|---|
show.bs.tooltip | Это событие срабатывает во время вызова метода show . |
shown.bs.tooltip | Это событие срабатывает, когда подсказка будет отображаться для пользователя (при этом ожидается завершение CSS переходов). |
hide.bs.tooltip | Это событие срабатывает во время вызова метода hide . |
hidden.bs.tooltip | Это событие срабатывает, когда сокрытие элемента для пользователя завершится (при этом ожидается завершение CSS переходов). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})