From a00d359422a6a31ad109808fdc546b9d371c328c Mon Sep 17 00:00:00 2001
From: Eric Eastwood <erice@element.io>
Date: Tue, 18 Jan 2022 21:08:11 -0600
Subject: [PATCH] Fix left positioned tooltips being wrong and offset by fixed
 value (#7551)

Previously, the `left` positioning seemed to only work with icons which are all about the same size so the arbitrary offset worked. Now we actually position off to the left of the element and we have equal `margin-left` and `margin-right` to determine the offset.

Spawned from https://github.com/matrix-org/matrix-react-sdk/pull/7339#discussion_r767154349
---
 res/css/views/elements/_Tooltip.scss                          | 3 ++-
 res/css/views/rooms/_EventTile.scss                           | 4 ++++
 src/components/views/elements/Tooltip.tsx                     | 4 ++--
 src/components/views/rooms/EventTile.tsx                      | 2 +-
 .../views/elements/__snapshots__/TooltipTarget-test.tsx.snap  | 2 +-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index 7e6b36a2ba..93ee6912b4 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -60,7 +60,8 @@ limitations under the License.
     font-weight: 500;
     max-width: 200px;
     word-break: break-word;
-    margin-right: 50px;
+    margin-left: 6px;
+    margin-right: 6px;
 
     background-color: #21262C; // Same on both themes
     color: $accent-fg-color;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 87afb4734a..181a300ef7 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -20,6 +20,10 @@ $left-gutter: 64px;
 .mx_EventTile {
     .mx_EventTile_receiptSent,
     .mx_EventTile_receiptSending {
+        // Give it some dimensions so the tooltip can position properly
+        display: inline-block;
+        width: 14px;
+        height: 14px;
         // We don't use `position: relative` on the element because then it won't line
         // up with the other read receipts
 
diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx
index 3e20c6c268..7c37d89127 100644
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@@ -117,8 +117,8 @@ export default class Tooltip extends React.Component<ITooltipProps> {
         );
         const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
         const top = baseTop + offset;
-        const right = width - parentBox.right - window.pageXOffset - 16;
-        const left = parentBox.right + window.pageXOffset + 6;
+        const right = width - parentBox.left - window.pageXOffset;
+        const left = parentBox.right + window.pageXOffset;
         const horizontalCenter = (
             parentBox.left - window.pageXOffset + (parentWidth / 2)
         );
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 4ebe8f2300..7af5a4b2f0 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1728,7 +1728,7 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
             }
             // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated
             // with the read receipt.
-            tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={20} />;
+            tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={3} />;
         }
 
         return (
diff --git a/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap b/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
index cdb12e5af4..9d8516af77 100644
--- a/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TooltipTarget /> displays tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
-  style="right: 1008px; top: -26px; display: block;"
+  style="right: 1024px; top: -26px; display: block;"
 >
   <div
     class="mx_Tooltip_chevron"