Как сделать спойлер bootstrap

Bootstrap Tooltips – Создание всплывающих подсказок

Как сделать спойлер bootstrap

Как сделать спойлер bootstrap

В этой статье познакомимся с процессом создания всплывающих подсказок на фреймворке Bootstrap 3 и 4 версиях.

Tooltips и основные сведения о всплывающих подсказках

Всплывающая подсказка – это блок с некоторой информацией, появляющейся возле элемента при наведении на него курсора. Tooltips в Bootstrap могут быть добавлены к любым HTML элементам: img (изображениям), a (ссылкам), span и др.

Как сделать спойлер bootstrap

В Bootstrap 3 и 4 компонент Tooltips построен как с использованием стилей, так и кода на JavaScript.

Позиционирование всплывающей подсказки возле элемента в Bootstrap 3 осуществлялось собственным кодом. В Bootstrap 4 эта ситуация изменилась, теперь это осуществляется с использованием сторонней библиотеки «popper.js». Это означает что файл «bootstrap.js» зависит от «popper.js» и его нужно подключить перед ним.

Кроме этого варианта, можно ещё воспользоваться одним файлом «bootstrap.bundle.js». Данный файл включает уже включает в себя библиотеку «popper.js».

При самостоятельной сборке JavaScript из исходных кодов Bootstrap 4, для работы компонента Tooltips необходимо кроме файла «tooltips.js» в проект ещё включить «utils.js».

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

Перед тем как переходить к созданию всплывающих подсказок для элементов необходимо рассмотреть некоторые особенности работы с ними:

Создание всплывающей подсказки осуществляется посредством добавления к HTML-элементу атрибута title с необходимым сообщением.

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

Для этого нужно прописать в скрипт следующий код:

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

Как сделать спойлер bootstrap

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

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

Список параметров компонента Tooltips:

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

Пример настройки расположения всплывающих подсказок, как с помощью data-атрибута, так и посредством JavaScript:

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

Ссылка, при нажатии на которую отображается всплывающая подсказка, которая в свою очередь тоже содержит ссылки (в примере используются параметры title, placement, trigger, html):

Как сделать спойлер bootstrap

Всплывающая подсказка, содержащая изображение (в примере используются параметры title, html):

Как сделать спойлер bootstrap

Изменения шаблона всплывающей подсказки осуществляется с помощью параметра template:

Как сделать спойлер bootstrap

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

Как сделать спойлер bootstrap

Подсказка для элемента, имеющего состояние disabled

Элементы с атрибутом disabled являются не интерактивными, т.е. они не могут находиться в состоянии focus, hover или click. Поэтому для того, чтобы добавить подсказку к такому элементу, его необходимо обернуть, например, с помощью div или span, и вызвать уже подсказку посредством этого элемента.

Как сделать спойлер bootstrap

Методы плагина Tooltips

Методы плагина Tooltips приведены в таблице.

ИмяОписание
.tooltip(options)Этот метод инициализирует для одного или множества выбранных элементов всплывающие подсказки с указанными параметрами.
.tooltip(‘show’)Метод, который включает отображение всплывающей подсказки у элемента.
.tooltip(‘hide’)Метод, который убирает отображение всплывающей подсказки у элемента.
.tooltip(‘toggle’)Этот метод переключает отображение подсказки у элемента. Т.е. если подсказка отображается у элемента, то убирает её. А если она не отображается, то включает её.
.tooltip(‘destroy’)Имеется только в Bootstrap 3. Этот метод убирает всплывающую подсказку у элемента и удаляет её.
.tooltip(‘enable’)Имеется только в Bootstrap 4. Этот метод включает возможность показа всплывающий подсказки у элемента. Всплывающие подсказки включены по умолчанию.
.tooltip(‘disable’)Имеется только в Bootstrap 4. Этот метод отключает возможность показа всплывающий подсказки у элемента. Для того чтобы снова включить возможность показа всплывающей подсказки у элемента, для него необходимо вызвать метод tooltip с параметром ‘enable’ или ‘toggleEnabled’.
.tooltip(‘toggleEnabled’)Имеется только в Bootstrap 4. Метод переключает возможность показа всплывающий подсказки у элемента.
.tooltip(‘update’)Имеется только в Bootstrap 4. Обновляет положение всплывающей подсказки у элемента.
.tooltip(‘dispose’)Имеется только в Bootstrap 4. Этот метод убирает всплывающую подсказку у элемента и удаляет её.

Пример использование методов для управления всплывающими подсказками (Bootstrap 3):

Пример использование методов для управления всплывающими подсказками (Bootstrap 4):

События плагина Tooltips

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

Пример работы с событиями (при возникновении события выведем имя события, и время когда оно произошло):

Как сделать спойлер bootstrap

Как изменить цвет и ширину подсказки с помощью CSS

Изменить некоторые параметры подсказки можно посредством переопределения её CSS-свойств.

Например, изменим цвет подсказки и её максимальную ширину (Bootstrap 4):

Источник

Как сделать спойлер bootstrap

Как сделать спойлер bootstrap

Статья, в которой рассмотрим компонент фреймворка Bootstrap 3 и 4 для создания на сайте различных по цветовой гамме сообщений.

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

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

Цветовая гамма сообщений (alers) в Bootstrap:

Как сделать спойлер bootstrap

Создание сообщений в Bootstrap 3 и 4

Примеры сообщений (Bootstrap 3):

Примеры сообщений (Bootstrap 4):

Кроме этого в сообщениях (alerts) доступен класс для стилизации ссылок alert-link :

В сообщение кроме этого можно ещё помещать дополнительные элементы.

Как сделать спойлер bootstrap

Закрытие (удаление) сообщений

Для добавления к сообщению кнопки со значком «крестика» необходимо:

Класс alert-dismissible предназначен для позиционирования кнопки внутри сообщения и добавления к ней дополнительного отступа справа. Атрибут data-dismiss=»alert» используется в качестве ключа, с помощью которого JavaScript добавляет к кнопке необходимый функционал.

Сообщение с кнопкой «Закрыть» (Bootstrap 3):

Сообщение с кнопкой «Закрыть» (Bootstrap 4):

Как сделать спойлер bootstrap

Закрытие сообщений с помощью JavaScript

События при закрытии сообщений

Список событий, связанных с закрытием сообщений (alerts):

СобытиеОписание
close.bs.alertСобытие возникает перед закрытием сообщения
closed.bs.alertСобытие возникает после закрытия сообщения

Как создать сообщение с иконкой

Пример, в котором сообщение построено с помощью CSS Flexbox и содержит в левой части иконку. В этом примере в качестве иконок используются значки из бесплатной коллекции Font Awesome 5.

Вариант сообщений (alerts) с иконками, которые по сравнению с текстом имеют более большой размер.

Ещё один пример сообщений, которые построены с использованием иконки и стрелочки.

Источник

Информеры

Документация и примеры добавления всплывающих подсказок 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 для анимации, и атрибуты данных для хранения локальных заголовков.

Обзор

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

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

Пример: задействуйте подсказки везде

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

Примеры

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

Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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

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

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

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

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

Разметка

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

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

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

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

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

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

Параметры

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

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

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

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

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

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

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

НазваниеТипУмолчаниеОписание
animationbooleantrueПрименяет CSS-переход к подсказке
containerstring | element | falsefalse
selectorstring | falsefalseЕсли селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще.
templatestring

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

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

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

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

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

Методы

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

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

$().tooltip(options)

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

.tooltip(‘show’)

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

.tooltip(‘hide’)

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

.tooltip(‘toggle’)

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

.tooltip(‘dispose’)

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

.tooltip(‘enable’)

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

.tooltip(‘disable’)

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

.tooltip(‘toggleEnabled’)

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

Источник

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

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