Каждое приложение использует компоненты с выпадающими блоками. Такие панели используются в выпадающем списке, Autocomplete, Tooltip и т.д. В Material CDK есть инструмент Overlay для создания такого функционала. С точки зрения простого html и css, мы можем использовать Z-index. Например, для dropdownmenu есть следующий рецепт. Но как писал Александр Инкин в своей статье, мы получим войну миров z-index. У Taiga UI есть свой способ решить эту проблему. Рассмотрим альтернативный инструмент от команды Material - CDK Overlay. Может показаться, что Material CDK обязывает использовать нас библиотеку компонентов Angular Material, но это не так. CDK и его базовые стили можно подключить отдельно. Благодаря этому команда создателей CDK дала возможность использовать их наработки в своих проектах. Более того, популярные и крупные проекты тоже активно используют этот CDK.  Библиотеки компонентов, которые используют Material CDK: Material Ant Design (ng-zorro) Tooltip  Dialog Select Autocomplete  DropDawnMenu  TreeSelect Calendar Почему бы не попробовать использовать его в своей работе, ведь он облегчает решение задач. Ниже мы рассмотрим примеры, как его использовать, и создадим компонент. Установить пакет Можно работать без основных материал компонентов, для этого нужно подключить стиль CDK Перед началом реализации подумаем, как мы его хотим использовать и из чего он будет состоять. Для этого зададим к нему небольшие требования. Не использует Z-index! Может позиционироваться как над, так и под элементом, к которому применяется подсказка и зависит от пространства сверху/снизу. Если нет места сверху на экране, он должен отображаться снизу. Работает в 2-х режимах. Первый скрывает подсказку, если исчезает фокус с элемента (так работает Material). Второй не исчезает (так работает ng-zorro), чтобы можно было скопировать текст или совершить какие-либо действия. Может отображать простой текст или шаблон. Должен иметь легкий API для использования. Директива - используется в компоненте, к которому применяется Tooltip Компонент - это отображение самого Tooltip. Принцип работы   Директива  добавляет функциональность к компоненту. При событии Mouseenter будет создаваться компонент. В работе будут использованы следующие API Angular:  ComponentFactoryResolver  и ViewContainerRef - с их помощью будет создаваться компонент TooltipComponent. ElementRef - для получения ссылки на host элемент, она потребуется для OverlayCdk. Renderer2 - с его помощью него можно подписаться на события (Mouseenter) После создания инстанса компонента ему устанавливаются параметры: title - простой текст; view - ссылка на шаблон; origin - ссылка на host компонент. Теперь самое интересное, работа с СDK Overlay: cdkConnectedOverlay - директива для декларативного создания всплывающих элементов; cdkConnectedOverlayOrigin - сюда передается наш host, элемент относительно которого будет создаваться всплывающая область; cdkConnectedOverlayPositions - список возможного позиционирования всплывающей области. В ней можно настроить всплывающую область сверху, снизу, слева, справа и задать дополнительный класс css. В примере настройка для всплытия снизу и сверху. Код директивы Код Tooltip Мы изучили Material CDK Overlay. Сделали Tooltip и познакомились с некоторыми важными API Angular. Эта статья поможет вам создавать свои прекрасные компоненты на базе CDK. А в следующей части мы рассмотрим создание других компонентов на базе CDK. К примеру нужно относиться как к заготовке и ознакомлением с CDK Overlay. Для того чтобы использовать его в проекте, нужно будет доработать следующие моменты: отписаться от событий; покрыть тестом; прикрутить палитру из ваших переменных темы. Tech Lead using Angular & .net