popper bootstrap что это

Информеры

Документация и примеры добавления всплывающих подсказок Bootstrap, подобных тем, которые находятся в iOS, к любому элементу вашего сайта.

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов (поповеров):

Ниже несколько примеров.

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

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

Пример: использование параметра container

Пример

Четыре направления

Четыре параметра выравнивания доступны: верх, право, низ, лево.

Отмена по клику

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

Для такого поведения нужна специальная разметка

Отключение элементов

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

Активируйте поповеры через JavaScript:

GPU acceleration

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

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

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

Параметры

Дефолтное значение содержимого, если атрибут data-content не существует.

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

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

Структура объекта такова: delay: < "show": 500, "hide": 100 >.

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

НазваниеТипПо умолчаниюОписание
animationbooleantrueПрименяет CSS переход «угасание» к поповеру.
containerstring | element | falsefalse
htmlbooleanfalseВводит HTML-код в поповер. Если «false», для вставки контента в DOM будет использован текстовый метод jQuery. Используйте, если вы беспокоитесь насчет XSS-атак.
placementstring | function‘right’
selectorstring | falsefalseЕсли селектор задан, объекты поповера будут «делегированы» определенным целям. На практике это используется для активации возможности добавления поповеров в динамическое содержимое HTML. Смотри сюда и сюда.
templatestring

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

.arrow станет «стрелочкой» поповера.

Дефолтное название, если title не задан.

Атрибуты для индивидуальных поповеров

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

Методы

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

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

$().popover(options)

Инициализирует поповеры для коллекции элементов.

.popover(‘show’)

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

.popover(‘hide’)

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

.popover(‘toggle’)

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

.popover(‘dispose’)

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

.popover(‘enable’)

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

.popover(‘disable’)

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

.popover(‘toggleEnabled’)

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

Источник

Информеры

Документация и примеры добавления всплывающих подсказок Bootstrap, подобных тем, которые находятся в iOS, к любому элементу вашего сайта.

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов (поповеров):

Ниже несколько примеров.

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

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

Пример: использование параметра container

Пример

Четыре направления

Четыре параметра выравнивания доступны: верх, право, низ, лево.

Отмена по клику

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

Для такого поведения нужна специальная разметка

Отключение элементов

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

Активируйте поповеры через JavaScript:

Параметры

Дефолтное значение содержимого, если атрибут data-content не существует.

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

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

Структура объекта такова: delay: < "show": 500, "hide": 100 >.

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

НазваниеТипПо умолчаниюОписание
animationbooleantrueПрименяет CSS переход «угасание» к поповеру.
containerstring | element | falsefalse
htmlbooleanfalseВводит HTML-код в поповер. Если «false», для вставки контента в DOM будет использован текстовый метод jQuery. Используйте, если вы беспокоитесь насчет XSS-атак.
placementstring | function‘right’
selectorstring | falsefalseЕсли селектор задан, объекты поповера будут «делегированы» определенным «целям». На практике это используется для активации возможности добавления поповеров в динамическое содержимое HTML. Смотри сюда и сюда.
templatestring

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

.arrow станет «стрелочкой» поповера.

Дефолтное название, если title не задан.

Атрибуты для индивидуальных поповеров

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

Методы

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

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

$().popover(options)

Инициализирует поповеры для коллекции элементов.

.popover(‘show’)

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

.popover(‘hide’)

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

.popover(‘toggle’)

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

.popover(‘dispose’)

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

.popover(‘enable’)

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

.popover(‘disable’)

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

.popover(‘toggleEnabled’)

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

Источник

Информеры

Документация и примеры добавления всплывающих окон Bootstrap к любому элементу на вашем сайте, подобных тем, какие есть в iOS.

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов подсказки (поповеров):

Ниже несколько примеров.

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

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

Пример: Использование параметра container

Пример

Четыре направления

Четыре параметра выравнивания доступны: верх, право, низ, лево.

Отмена по клику

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

Для такого поведения нужна специальная разметка

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

Переменные

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

Активируйте поповеры через JavaScript:

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

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

Параметры

Значение содержимого по умолчанию, если атрибут data-bs-content отсутствует.

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

Структура объекта: delay:

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

НаименованиеТипПо умолчаниюОписание
animationbooleantrueПрименить переход CSS fade к всплывающему окну
containerstring | element | falsefalse
htmlbooleanfalseВставьте HTML в всплывающее окно. Если false, свойство, innerText будет использоваться для вставки содержимого в DOM. Используйте текст, если Вас беспокоят XSS-атаки.
placementstring | function‘right’
selectorstring | falsefalseЕсли указан селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-контента. См. это и информативный пример.
templatestring

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

.popover-arrow станет стрелкой всплывающего окна.

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

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

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

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

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

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

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

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

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

Методы

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

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

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

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

toggle

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

dispose

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

enable

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

disable

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

toggleEnabled

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

update

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

getInstance

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

Источник

Информеры

Документация и примеры добавления всплывающих подсказок Bootstrap, подобных тем, которые находятся в iOS, к любому элементу вашего сайта.

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов (поповеров):

Ниже несколько примеров.

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

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

Пример: использование параметра container

Пример

Четыре направления

Четыре параметра выравнивания доступны: верх, право, низ, лево.

Отмена по клику

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

Для такого поведения нужна специальная разметка

Отключение элементов

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

Активируйте поповеры через JavaScript:

Параметры

Дефолтное значение содержимого, если атрибут data-content не существует.

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

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

Структура объекта такова: delay: < "show": 500, "hide": 100 >.

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

НазваниеТипПо умолчаниюОписание
animationbooleantrueПрименяет CSS переход «угасание» к поповеру.
containerstring | element | falsefalse
htmlbooleanfalseВводит HTML-код в поповер. Если «false», для вставки контента в DOM будет использован текстовый метод jQuery. Используйте, если вы беспокоитесь насчет XSS-атак.
placementstring | function‘right’
selectorstring | falsefalseЕсли селектор задан, объекты поповера будут «делегированы» определенным «целям». На практике это используется для активации возможности добавления поповеров в динамическое содержимое HTML. Смотри сюда и сюда.
templatestring

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

.arrow станет «стрелочкой» поповера.

Дефолтное название, если title не задан.

Атрибуты для индивидуальных поповеров

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

Методы

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

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

$().popover(options)

Инициализирует поповеры для коллекции элементов.

.popover(‘show’)

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

.popover(‘hide’)

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

.popover(‘toggle’)

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

.popover(‘dispose’)

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

.popover(‘enable’)

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

.popover(‘disable’)

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

.popover(‘toggleEnabled’)

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

Источник

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

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

Обзор

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

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

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

Примеры

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

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

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

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

Переменные

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

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

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

Переполнение auto и scroll

Разметка

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

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

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

Параметры

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

Структура объекта: delay:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Методы

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

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

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

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

toggle

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

dispose

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

enable

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

disable

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

toggleEnabled

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

update

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

getInstance

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

getOrCreateInstance

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

События

Источник

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

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

НаименованиеТипПо умолчаниюОписание
animationbooleantrueПрименить переход CSS fade к всплывающей подсказке
containerstring | element | falsefalse
selectorstring | falsefalseЕсли предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM (поддержка jQuery.on ). Смотрите это и информативный пример.
templatestring

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

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

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

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

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