diff --git a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap
index d26a406a2..6d04016b5 100644
--- a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap
+++ b/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap
@@ -6,6 +6,7 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
 >
   <span
     className="hover-ref-wrapper"
+    onClick={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
diff --git a/app/soapbox/components/hover_ref_wrapper.js b/app/soapbox/components/hover_ref_wrapper.js
index fe6ac2bed..652e4a387 100644
--- a/app/soapbox/components/hover_ref_wrapper.js
+++ b/app/soapbox/components/hover_ref_wrapper.js
@@ -26,6 +26,13 @@ const handleMouseLeave = (dispatch) => {
   };
 };
 
+const handleClick = (dispatch) => {
+  return e => {
+    showProfileHoverCard.cancel();
+    dispatch(closeProfileHoverCard(true));
+  };
+};
+
 export const HoverRefWrapper = ({ accountId, children, inline }) => {
   const dispatch = useDispatch();
   const ref = useRef();
@@ -37,6 +44,7 @@ export const HoverRefWrapper = ({ accountId, children, inline }) => {
       className='hover-ref-wrapper'
       onMouseEnter={handleMouseEnter(dispatch, ref, accountId)}
       onMouseLeave={handleMouseLeave(dispatch)}
+      onClick={handleClick(dispatch)}
     >
       {children}
     </Elem>
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index b3fb4fc31..f0053a65a 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -106,15 +106,8 @@
   }
 }
 
-.detailed-status {
-  .profile-hover-card {
-    top: 0;
-    left: 0;
-  }
-}
-
 /* Hide the popper when the reference is hidden */
-#popper[data-popper-reference-hidden] {
+.profile-hover-card[data-popper-reference-hidden] {
   visibility: hidden;
   pointer-events: none;
 }