Как отобразить диалог в React прямо над Div, который его открыл? ⇐ CSS

[Anonymous]

Я разрабатываю браузерную игру на React. У меня есть сетка ячеек, и я хочу, чтобы при щелчке по ячейке прямо над ней открывалось диалоговое окно с некоторыми параметрами.
Вот примерное представление о том, как ее следует расположить. при нажатии на эту ячейку, строка 5, столбец 4:



Я открыт для использования в диалоге любой техники или библиотека.
Я пытался использовать диалоговое окно в Headless UI - https://headlessui.com/react/dialog
Я могу только центрировать его или расположите его, используя фиксированные элементы, например:

Код: Выделить всё

Проблема с этим в том, что мне придется рассчитать их для каждой ячейки, и, поскольку макет должен быть отзывчивым, было бы сложным для расчета для разных размеров экрана.
В идеале у меня был бы диалог, который открывается по сравнению с ячейкой (Div), которая была нажата. CSS, либо с какой -то библиотекой компонентов React?

Подробнее здесь: https://stackoverflow.com/questions/793 ... -opened-it