Поповер — небольшой немодальный диалог без затемнения, который открывается рядом с триггерным элементом. Он может содержать текст, поля ввода, любые другие элементы управления.

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

Поповеры с компактным содержимым открываются с уменьшенными внутренними полями. У поповеров такого размера нет шапки и футера:

Высота поповера зависит от содержимого. Рекомендуемая максимальная высота — 480px (может быть увеличена по усмотрению дизайнера).

Чтобы гибко управлять отступами поповера в зависимости от его контента, сбросите стандартные значения с помощью параметра [defaultPaddings]="false". После этого задавайте внутренние отступы (padding) напрямую в шаблоне контентной части:

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

Поповер имеет дополнительный параметр kbqPopoverOffset, который отвечает за смещение поповера относительно триггерного объекта.

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

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

Поповер выравнивается по границе триггерного элемента, указатель расположен на фиксированном расстоянии от края поповера. Если триггерный элемент слишком маленький, то указатель выравнивается по его центру.

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

Поповер может закрываться при скролле страницы; какое поведение выбрать — решает проектировщик.

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

Чтобы поповер не перекрывал нужный вам элемент при прокрутке, а скрывался под ним, настройте положение через кастомный z-index или параметры смещения.

Поповер можно использовать без шапки и футера — это необязательные элементы.

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

Заголовок можно перенести в контентную область, а не располагать в отдельной панели хедера. Этот прием хорошо подходит, когда в поповере нет прокрутки.

Кнопку «Закрыть» можно расположить в хедере или в правом верхнем углу, когда панели хедера нет. Это способ избавиться от футера с единственной кнопкой «Закрыть».

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

Дропдаун подойдет, если нужно показать список команд. У дропдауна нет навигации внутри выпадающего меню клавишей Tab. Поповер же работает как модальное окно: при открытии он перехватывает фокус и ведет по содержимому окна.