Как разместить интерактивную всплывающую подсказку рядом с конкретным объектом? ⇐ Jquery

[Гость]

Я пытаюсь создать интерактивную подсказку в Divi.
Она предназначена для отображения ссылок на научную статью. Таким образом, результаты должны выглядеть следующим образом:
пример справочной подсказки с академического сайта
Вот пример страницы, которая показывает желаемый результат в действии (экран захват взят с этого сайта): https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7463562/
На показанном сайте они явно смогли сделайте это — поэтому я знаю, что это возможно.
Похоже, они используют какую-то библиотеку или функцию с префиксом «aria-», поскольку многие из используемых ими классов имеют тот же префикс .
Я могу создать всплывающее окно и вызвать его, когда пользователь наводит курсор на ссылочный номер. Я также могу переместить всплывающую подсказку вверх и вправо на определенное количество пикселей, но я не могу точно расположить окно рядом со ссылочным номером, как того требует мой клиент.
Вот что На данный момент у меня есть:
результаты кода
Я пробовал гуглить «css позиционировать один объект рядом с другим», но не смог найти многого было полезно. Была документация по чему-то под названием Aria Tooltip (которая соответствует исходному коду сайта, упомянутого выше), но то, что я нашел, похоже, описывало класс, а не то, как его использовать.
Я хотел бы разместить эту всплывающую подсказку рядом с триггером в приведенном выше абзаце. Я предполагаю, что это будет сделано с помощью комбинации Aria Tooltip и jQuery, но я не знаю, что делать дальше.
Буду признателен за любую помощь!


Источник: https://stackoverflow.com/questions/781 ... fic-object