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 #7339 (comment)

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;

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
 

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)
         );

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 (

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"