Плавающее либо привязанное всплывающее окно, как эффективнее сделать?

Question

[helboi]

Доброго времени суток. Я прошу прощения за банальный и наверно очень глупый вопрос, но честно сказать, вникнуть не могу, как сделать нужный мне функционал.
Задача такая - имеется у меня небольшая интерактивная карта (вернее даже заготовка под карту). Великий интернет помог реализовать всплывающие окна, которые, однако строго привязаны к определенной позиции. Это накладывает некоторые неудобства пользования, когда применяется масштабирование карты. Хочу чтобы окна реализовывались либо с привязкой к курсору, либо просто были плавающими. Надеюсь, вопрос поставил понятно. Заранее спасибо за помощь =)
Ссылку к сожалению прикрепить не могу к самой карте, не допускает такой пост. =(

Comments

[Ankhena]

Разбейте задачу на мелкие.
Например:
1. Узнать позицию курсора.
- относительно окна
- относительно блока (если нужно)
2. Задать css свойства для позиционирования попапа.
- как это сделать через кастомные свойства
3. Как обновлять всё это при ресайзе.

Что такое вы имеете в виду под "просто плавающими" из контекста не очевидно.

[helboi]

Ankhena, Огромное спасибо за советы. Решил задачу добавлением в css:

spoiler

transform: translateY(10%) translateX(10%);
position: absolute;

Следом в js:

spoiler

document.addEventListener('DOMContentLoaded', () => {

const followCursor = () => {
const el = document.querySelector('.description')

window.addEventListener('mousemove', e => {
const target = e.target
if (!target) return
el.style.left = e.pageX + 'px'
el.style.top = e.pageY + 'px'
})
}

followCursor()

})

Сейчас если ещё докумекаю, как сделать так, чтобы при достижении края видимой области попап отображался с другой стороны, будет вообще замечательно =)

spoiler

[Антон Романков]

helboi, проверить, не выходит ли правый край за область просмотра.
getBoundingClientRect для поиска позиции слева и ширины. Так можно вычислить правую координату. Ну и поставить стиль позиции left

[helboi]

Антон Романков, честно сказать, я похоже в танке, и не могу понять Вас, как это сделать =)

[Антон Романков]

helboi, Набросал пример: https://codesandbox.io/s/quirky-shadow-ycv2l?file=...
Но учтите, что он не учитывает ресайз окна. То есть, если мы окно ресайзим, то страницу надо будет обновить. Если это тоже нужно учитывать, то стоит делать реализацию через Redux или его аналог. Можно написать простой аналог самостоятельно. Вот тут описано, как это сделать: https://habr.com/ru/post/439104/

[helboi]

Антон Романков, Огромнейшее Вам спасибо, буду разбираться =)