Improve anchor link example

atomiks · Jun 10, 2019 · 9283ef9 · 9283ef9
1 parent 6ef657c
commit 9283ef9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 44 deletions.
diff --git a/website/src/components/examples/AnchorLink.js b/website/src/components/examples/AnchorLink.js
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react'
 import styled from 'styled-components'
-import TippyBase, { tippy } from '../Tippy'
+import Tippy, { tippy } from '../Tippy'
 import { MEDIA } from '../Framework'
 
 const Wrapper = styled.div`
@@ -12,12 +12,6 @@ const Wrapper = styled.div`
   }
 `
 
-const Tippy = styled(TippyBase)`
-  .tippy-arrow {
-    margin: 0;
-  }
-`
-
 function AnchorLink({ smart }) {
   const ref = useRef()
 
@@ -28,43 +22,32 @@ function AnchorLink({ smart }) {
   }
 
   useEffect(() => {
-    const instance = tippy(
-      {},
-      {
-        ...sharedOptions,
-        triggerTarget: ref.current,
-        onTrigger(instance, { type, clientX, clientY }) {
-          instance._lastTriggerEventType = type
+    const anchor = ref.current
+    const virtualReference = {}
 
-          if (type === 'mouseenter') {
-            const LINE_HEIGHT = 24
-            const rect = ref.current.getBoundingClientRect()
-            const cursorPoint = Math.round(clientY - rect.top)
-            const lineIndex = Math.floor(cursorPoint / LINE_HEIGHT)
-            const top = rect.top + lineIndex * LINE_HEIGHT
-            const bottom = top + LINE_HEIGHT
+    const instance = tippy(virtualReference, {
+      ...sharedOptions,
+      triggerTarget: anchor,
+      onTrigger(instance, { type, clientY }) {
+        instance._lastTriggerEventType = type
 
-            instance.reference.getBoundingClientRect = () => ({
-              width: 0,
-              height: bottom - top,
-              top,
-              bottom,
-              left: clientX,
-              right: clientX,
-            })
-          } else {
-            instance.reference.getBoundingClientRect = () => {
-              return ref.current.getBoundingClientRect()
-            }
-          }
-        },
-        onMount(instance) {
-          if (instance._lastTriggerEventType === 'mouseenter') {
-            instance.popperInstance.disableEventListeners()
-          }
-        },
+        const rects = Array.from(anchor.getClientRects())
+        const rect = rects.filter(
+          rect =>
+            clientY >= Math.floor(rect.top) &&
+            clientY <= Math.ceil(rect.bottom),
+        )[0]
+
+        virtualReference.getBoundingClientRect = () => {
+          return type === 'mouseenter' ? rect : anchor.getBoundingClientRect()
+        }
+      },
+      onMount(instance) {
+        if (instance._lastTriggerEventType === 'mouseenter') {
+          instance.popperInstance.disableEventListeners()
+        }
       },
-    )
+    })
     return () => {
       instance.destroy()
     }

diff --git a/website/src/pages/misc.mdx b/website/src/pages/misc.mdx
@@ -76,9 +76,7 @@ though it were attached to a block:
   <AnchorLink />
 </Demo>
 
-If this is a problem (e.g. with interactivity), there is a way to solve it.
-Additionally, this makes the tooltip appear right above the mouse cursor,
-similar to the `followCursor` option:
+If this is a problem (e.g. with interactivity), there is a way to solve it:
 
 <Demo style={{ paddingBottom: 20 }}>
   <AnchorLink smart />