From 5641e7bff73a9a59c331b3b6fdb987343c1954a5 Mon Sep 17 00:00:00 2001
From: Robert Sese <734194+rsese@users.noreply.github.com>
Date: Thu, 6 Apr 2023 13:32:19 -0500
Subject: [PATCH] check for hover card hovering higher up in main-content
 (#36223)

---
 components/LinkPreviewPopover.tsx        | 8 +++++---
 components/article/ArticleGridLayout.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/LinkPreviewPopover.tsx b/components/LinkPreviewPopover.tsx
index 979f52852a..f349d0581c 100644
--- a/components/LinkPreviewPopover.tsx
+++ b/components/LinkPreviewPopover.tsx
@@ -258,11 +258,13 @@ function popoverHide() {
 
 function testTarget(target: HTMLLinkElement) {
   // Return true if the element is an A tag, whose `href` starts with
-  // a `/`, and it's not one of those permalink ones next to headings
-  // (with the chain looking icon).
+  // a `/`, is contained in either the article-contents (the meat of the article)
+  // or the article-intro (which contain product callouts), and it's not one of
+  // those permalink ones next to headings (with the chain looking icon).
   return (
     target.tagName === 'A' &&
     target.href.startsWith(window.location.origin) &&
+    target.closest('#article-contents, #article-intro') &&
     !target.classList.contains('doctocat-link')
   )
 }
@@ -289,7 +291,7 @@ export function LinkPreviewPopover() {
     // this way we're prepared for the fact that new `a` elements
     // might get introduced some other way. For example, if there's
     // some any other code that does a `container.appendChild(newLink)`
-    const container = document.querySelector<HTMLDivElement>('#article-contents')
+    const container = document.querySelector<HTMLDivElement>('#main-content')
     if (container) {
       container.addEventListener('mouseover', showPopover)
       container.addEventListener('mouseout', hidePopover)
diff --git a/components/article/ArticleGridLayout.tsx b/components/article/ArticleGridLayout.tsx
index 2d821df120..5a70819d00 100644
--- a/components/article/ArticleGridLayout.tsx
+++ b/components/article/ArticleGridLayout.tsx
@@ -23,7 +23,11 @@ export const ArticleGridLayout = ({ intro, topper, toc, children, className }: P
         </SidebarContent>
       )}
 
-      {intro && <Box gridArea="intro">{intro}</Box>}
+      {intro && (
+        <Box id="article-intro" gridArea="intro">
+          {intro}
+        </Box>
+      )}
 
       <Box gridArea="content" data-search="article-body">
         {children}