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 = 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) => {