fix: tooltip fixes (Uniswap#376)

* fix: use state for tooltip for immediate functionality * fix: adjust popper offset to center tooltips
recehantoken · Jan 11, 2023 · cc31c7e · cc31c7e
1 parent 7a5356b
commit cc31c7e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
@@ -107,7 +107,7 @@ export default function Popover({
 
   const options = useMemo((): Options => {
     const modifiers: Options['modifiers'] = [
-      { name: 'offset', options: { offset: [4, offset || 4] } },
+      { name: 'offset', options: { offset: [0, offset || 4] } },
       { name: 'arrow', options: { element: arrow, padding: 4 } },
     ]
     if (contained) {

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -2,7 +2,7 @@ import { Placement } from '@popperjs/core'
 import useHasFocus from 'hooks/useHasFocus'
 import useHasHover from 'hooks/useHasHover'
 import { HelpCircle, Icon } from 'icons'
-import { ComponentProps, ReactNode, useRef } from 'react'
+import { ComponentProps, ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import { IconButton } from './Button'
@@ -35,11 +35,11 @@ export default function Tooltip({
   offset,
   contained,
 }: TooltipProps) {
-  const tooltip = useRef<HTMLDivElement>(null)
-  const showTooltip = useTooltip(tooltip.current)
+  const [tooltip, setTooltip] = useState<HTMLDivElement>()
+  const showTooltip = useTooltip(tooltip)
   return (
     <Popover content={children} show={showTooltip} placement={placement} offset={offset} contained={contained}>
-      <IconTooltip icon={Icon} iconProps={iconProps} ref={tooltip} />
+      <IconTooltip icon={Icon} iconProps={iconProps} ref={setTooltip} />
     </Popover>
   )
 }