template | string | ‘ Обычный 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: ПараметрыНазвание | Тип | По умолчанию | Описание |
---|
animation | boolean | true | Применяет CSS переход «угасание» к поповеру. | container | string | element | false | false | Дефолтное значение содержимого, если атрибут data-content не существует. Откладывает показ и скрытие поповера (милисекунды) – не применяется к типу «триггер вручную». Если число задано, отсрочка применяется и к показу, и к скрытию. Структура объекта такова: delay: < "show": 500, "hide": 100 >. html | boolean | false | Вводит HTML-код в поповер. Если «false», для вставки контента в DOM будет использован текстовый метод jQuery. Используйте, если вы беспокоитесь насчет XSS-атак. | placement | string | function | ‘right’ | Когда функция используется для определения расположения, она вызывается «узлом» поповера в DOM, который выступает как первый аргумент, и запускающий элемент «узла» DOM – как второй. Контекст this задается экземпляру поповера. selector | string | false | false | Если селектор задан, объекты поповера будут «делегированы» определенным «целям». На практике это используется для активации возможности добавления поповеров в динамическое содержимое HTML. Смотри сюда и сюда. | template | string | ‘ Обычный 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 переместит пользователя клавиатуры в сам поповер. Короче говоря, простое добавление интерактивных элементов управления в поповер может сделать эти элементы управления недоступными / непригодными для пользователей клавиатуры и пользователей вспомогательных технологий или, по крайней мере, создать нелогичный общий порядок фокусировки. В этих случаях рассмотрите возможность использования модального диалога. ПараметрыНаименование | Тип | По умолчанию | Описание |
---|
animation | boolean | true | Применить переход CSS fade к всплывающему окну | container | string | element | false | false | Значение содержимого по умолчанию, если атрибут data-bs-content отсутствует. Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта: delay: html | boolean | false | Вставьте HTML в всплывающее окно. Если false, свойство, innerText будет использоваться для вставки содержимого в DOM. Используйте текст, если Вас беспокоят XSS-атаки. | placement | string | function | ‘right’ | Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающего окна в качестве первого аргумента и узла DOM элемента запуска в качестве второго. Контекст this установлен на экземпляр всплывающего окна. selector | string | false | false | Если указан селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-контента. См. это и информативный пример. | template | string | ‘ Базовый 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: ПараметрыНазвание | Тип | По умолчанию | Описание |
---|
animation | boolean | true | Применяет CSS переход «угасание» к поповеру. | container | string | element | false | false | Дефолтное значение содержимого, если атрибут data-content не существует. Откладывает показ и скрытие поповера (милисекунды) – не применяется к типу «триггер вручную». Если число задано, отсрочка применяется и к показу, и к скрытию. Структура объекта такова: delay: < "show": 500, "hide": 100 >. html | boolean | false | Вводит HTML-код в поповер. Если «false», для вставки контента в DOM будет использован текстовый метод jQuery. Используйте, если вы беспокоитесь насчет XSS-атак. | placement | string | function | ‘right’ | Когда функция используется для определения расположения, она вызывается «узлом» поповера в DOM, который выступает как первый аргумент, и запускающий элемент «узла» DOM – как второй. Контекст this задается экземпляру поповера. selector | string | false | false | Если селектор задан, объекты поповера будут «делегированы» определенным «целям». На практике это используется для активации возможности добавления поповеров в динамическое содержимое HTML. Смотри сюда и сюда. | template | string | ‘ Обычный 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 не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно). В качестве обходного пути Вы захотите вызвать всплывающую подсказку из оболочки ПараметрыНаименование | Тип | По умолчанию | Описание |
---|
animation | boolean | true | Применить переход CSS fade к всплывающей подсказке | container | string | element | false | false | Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта: delay: Разрешить HTML во всплывающей подсказке. Если `true`, HTML-теги в title всплывающей подсказки будут отображаться во всплывающей подсказке. Если `false`, свойство innerText будет использоваться для вставки содержимого в DOM. Используйте текст, если Вас беспокоят XSS-атаки. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM триггерного элемента в качестве второго. Контекст this установлен на экземпляр всплывающей подсказки. selector | string | false | false | Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM (поддержка jQuery.on ). Смотрите это и информативный пример. | template | string | ‘ Базовый HTML для использования при создании всплывающей подсказки. .tooltip-arrow станет стрелкой всплывающей подсказки. Значение заголовка по умолчанию, если атрибут title отсутствует. Само по себе ‘hover’ приведет к появлению всплывающих подсказок, которые нельзя вызвать с клавиатуры, и их следует использовать только при наличии альтернативных методов передачи той же информации для пользователей клавиатуры. | fallbackPlacements | array | [‘top’, ‘right’, ‘bottom’, ‘left’] | Определите резервные места размещения, предоставив список мест размещения в массиве (в порядке предпочтения). Для получения дополнительной информации смотрите документацию о поведении Popper. | boundary | string | element | ‘clippingParents’ | Граница ограничения переполнения всплывающей подсказки (применяется только к модификатору Popper preventOverflow). По умолчанию это ‘clippingParents’ и может принимать ссылку HTMLElement (только через JavaScript). Дополнительную информацию смотрите в detectOverflow в документации Popper. | customClass | string | function | » | Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные имена классов. Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: 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, или создать новый, если он не был инициализирован. СобытияИсточник
|
|
|
|