Попови
Документация и примери за добавяне на изскачащи елементи на Bootstrap, като тези в iOS, към всеки елемент на вашия сайт.
Неща, които трябва да знаете, когато използвате плъгина popover:
- Popovers разчитат на библиотеката на трета страна Popper.js за позициониране. Трябва да включите popper.min.js преди bootstrap.js или да използвате
bootstrap.bundle.min.js
/bootstrap.bundle.js
, който съдържа Popper.js, за да работят popovers! - Popovers изискват приставката за подсказки като зависимост.
- Ако изграждате нашия JavaScript от изходния код, той изисква
util.js
. - Popovers са включени поради причини, свързани с производителността, така че трябва да ги инициализирате сами .
- Нулевата дължина
title
иcontent
стойностите никога няма да показват изскачане. - Посочете
container: 'body'
, за да избегнете проблеми с рендирането в по-сложни компоненти (като нашите входни групи, групи бутони и т.н.). - Задействането на изскачащи съобщения върху скрити елементи няма да работи.
- Изскачащи съобщения за
.disabled
илиdisabled
елементи трябва да се задействат върху обвиващ елемент. - Когато се задействат от анкери, които преминават през множество линии, изскачащите екрани ще бъдат центрирани между общата ширина на котвите. Използвайте
white-space: nowrap;
на вашия<a>
s, за да избегнете това поведение. - Popovers трябва да бъдат скрити, преди съответните им елементи да бъдат премахнати от DOM.
Продължете да четете, за да видите как работят изскачащите екрани с някои примери.
Един от начините за инициализиране на всички изскачащи съобщения на страница е да ги изберете по техния data-toggle
атрибут:
Когато имате някои стилове на родителски елемент, които пречат на изскачащ прозорец, ще искате да посочите персонализиран container
, така че HTML на изскачащия елемент да се показва вместо това в този елемент.
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Налични са четири опции: подравнени отгоре, отдясно, отдолу и отляво.
Използвайте focus
спусъка, за да отхвърлите изскачащи съобщения при следващото щракване на потребителя върху елемент, различен от превключващия елемент.
Изисква се специфично маркиране за отхвърляне при следващо щракване
За правилното поведение между различни браузъри и различни платформи трябва да използвате <a>
маркера, а не маркера <button>
, и също трябва да включите tabindex
атрибут.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
Елементите с disabled
атрибута не са интерактивни, което означава, че потребителите не могат да задържат курсора или да щракнат върху тях, за да задействат изскачащ прозорец (или подсказка). Като заобиколно решение ще искате да задействате изскачащия прозорец от обвивка <div>
или да <span>
замените pointer-events
елемента на деактивирания елемент.
За забранени изскачащи тригери може също да предпочетете data-trigger="hover"
изскачащия прозорец да се показва като незабавна визуална обратна връзка за вашите потребители, тъй като те може да не очакват да щракнат върху деактивиран елемент.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Активиране на изскачащи прозорци чрез JavaScript:
Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-
, както в data-animation=""
.
Име | Тип | По подразбиране | Описание |
---|---|---|---|
анимация | булево | вярно | Приложете CSS избледняващ преход към изскачащия прозорец |
контейнер | низ | елемент | невярно | невярно | Добавя изскачащия прозорец към конкретен елемент. Пример: |
съдържание | низ | елемент | функция | '' | Стойност на съдържанието по подразбиране, ако Ако е дадена функция, тя ще бъде извикана с нейната |
забавяне | номер | обект | 0 | Забавяне на показването и скриването на изскачащия прозорец (ms) - не се отнася за тип ръчно задействане Ако е предоставен номер, забавянето се прилага и за скриване/показване Структурата на обекта е: |
html | булево | невярно | Вмъкнете HTML в изскачащия прозорец. Ако е невярно, text методът на jQuery ще се използва за вмъкване на съдържание в DOM. Използвайте текст, ако се притеснявате от XSS атаки. |
поставяне | низ | функция | "точно" | Как да позиционирате изскачащия прозорец - автоматично | отгоре | дъно | наляво | точно. Когато функция се използва за определяне на разположението, тя се извиква с изскачащия DOM възел като първи аргумент и задействащия елемент DOM възел като втори. Контекстът |
селектор | низ | невярно | невярно | Ако е предоставен селектор, изскачащите обекти ще бъдат делегирани на посочените цели. На практика това се използва, за да се даде възможност за добавяне на изскачащи съобщения към динамично HTML съдържание. Вижте това и един информативен пример . |
шаблон | низ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Основен HTML за използване при създаване на изскачащ прозорец. Popover's Popover's
Най-външният обвиващ елемент трябва да има |
заглавие | низ | елемент | функция | '' | Стойност на заглавието по подразбиране, ако Ако е дадена функция, тя ще бъде извикана с нейната |
спусък | низ | 'клик' | Как се задейства popover - щракнете върху | кръжи | фокус | ръководство. Можете да подадете няколко тригера; отделете ги с интервал. `ръчно` не може да се комбинира с друг тригер. |
изместване | номер | низ | 0 | Отместване на изскачащия прозорец спрямо неговата цел. За повече информация вижте офсетните документи на Popper.js . |
резервно поставяне | низ | масив | "обръщане" | Позволете да укажете коя позиция ще използва Popper при резервно връщане. За повече информация вижте документите за поведение на Popper.js |
граница | низ | елемент | 'scrollParent' | Граница на ограничението за препълване на изскачащия прозорец. Приема стойностите на 'viewport' , 'window' , 'scrollParent' или препратка към HTMLElement (само за JavaScript). За повече информация вижте документите за предотвратяване на Overflow на Popper.js . |
Атрибути на данни за отделни изскачащи съобщения
Опциите за отделни изскачащи екрани могат алтернативно да бъдат определени чрез използването на атрибути на данни, както е обяснено по-горе.
Асинхронни методи и преходи
Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .
Инициализира изскачащи прозорци за колекция от елементи.
Разкрива изскачане на елемент. Връща се към повикващия, преди изскачащият прозорец действително да е бил показан (т.е. преди да shown.bs.popover
настъпи събитието). Това се счита за „ръчно“ задействане на popover. Изскачащи съобщения, чието заглавие и съдържание са с нулева дължина, никога не се показват.
Скрива изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащото съобщение да е действително скрито (т.е. преди да hidden.bs.popover
се случи събитието). Това се счита за „ръчно“ задействане на popover.
Превключва изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащият прозорец действително да е бил показан или скрит (т.е. преди събитието shown.bs.popover
или да hidden.bs.popover
се появи). Това се счита за „ръчно“ задействане на popover.
Скрива и унищожава popover на елемент. Popovers, които използват делегиране (които се създават с помощта на selector
опцията ), не могат да бъдат унищожени поотделно на елементи на задействане на потомък.
Дава възможност за показване на popover на елемент. Изскачащите екрани са активирани по подразбиране.
Премахва възможността за показване на изскачащ прозорец на елемент. Изскачащият прозорец ще може да се показва само ако бъде активиран отново.
Превключва възможността изскачащият прозорец на елемент да бъде показан или скрит.
Актуализира позицията на изскачащия прозорец на елемент.
Тип събитие | Описание |
---|---|
show.bs.popover | Това събитие се задейства веднага, когато show се извика методът на екземпляра. |
показано.bs.popover | Това събитие се задейства, когато изскачащият прозорец е направен видим за потребителя (ще изчака CSS преходите да завършат). |
hide.bs.popover | Това събитие се задейства незабавно, когато hide методът на екземпляра е извикан. |
скрити.bs.popover | Това събитие се задейства, когато popover приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат). |
вмъкнато.bs.popover | Това събитие се задейства след show.bs.popover събитието, когато изскачащият шаблон е добавен към DOM. |