From 5d116ede22cae1f83a985ef7b90053f7f5b2acd0 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Thu, 7 Sep 2023 21:45:22 +0300
Subject: [PATCH] Popper position update (#212)

---
 src/components/Article/FullArticle.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 6aaebc35..a4545dc2 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -134,7 +134,9 @@ export const FullArticle = (props: Props) => {
     const tooltipElements: NodeListOf<HTMLElement> = document.querySelectorAll(
       '[data-toggle="tooltip"], footnote'
     )
-    if (!tooltipElements) return
+    if (!tooltipElements) {
+      return
+    }
     tooltipElements.forEach((element) => {
       const tooltip = document.createElement('div')
       tooltip.classList.add(styles.tooltip)
@@ -149,7 +151,8 @@ export const FullArticle = (props: Props) => {
       if (element.hasAttribute('href')) {
         element.setAttribute('href', 'javascript: void(0);')
       }
-      createPopper(element, tooltip, {
+
+      const popperInstance = createPopper(element, tooltip, {
         placement: 'top',
         modifiers: [
           {
@@ -161,13 +164,16 @@ export const FullArticle = (props: Props) => {
             options: {
               offset: [0, 8]
             }
+          },
+          {
+            name: 'flip',
+            options: { fallbackPlacements: ['top'] }
           }
         ]
       })
 
       tooltip.style.visibility = 'hidden'
       let isTooltipVisible = false
-
       const handleClick = () => {
         if (isTooltipVisible) {
           tooltip.style.visibility = 'hidden'
@@ -176,6 +182,8 @@ export const FullArticle = (props: Props) => {
           tooltip.style.visibility = 'visible'
           isTooltipVisible = true
         }
+
+        popperInstance.update()
       }
 
       const handleDocumentClick = (e) => {