Как динамически создать всплывающее окно для элемента?

Question

[Денис]

Я хочу создать всплывающее окно, которое срабатывает при выборе текста и нажатии кнопки.

Моя конечная цель — когда пользователь выбирает нужную область текста и нажимает кнопку, это вызывает всплывающее окно под выделяенной областью

Answer 1

[Андрей]

Конкретно для данного случая используйте Selection API. Можете получить Range, а от него getBoundingClientRect() и рассчитать позицию вашего попапа

Comments

[Денис]

а есть какие нибудь конкретные примеры чтобы посмотреть?

Answer 2

[Mizutsune]

Поисковые запросы для поиска примеров и готовых решений данной задачи:

popover on selected text
popover on selected text vanilla js
tooltip on text selection

Как это реализовать? Используйте Selection API, как вам и подсказали в соседнем ответе, далее нужно будет определить позицию выделенного текста. Далее создаем popover окно с нужным содержимым, устанавливаем абсолютное позиционирование, добавляем дополнительные стили, а ещё: устанавливаем в качестве параметров top и left, полученные позиции. Вот нашелся вариант: https://codepen.io/FezVrasta/pen/vWXQdq