From c980b58c699bdc3418a54c580bbf5da77c90c576 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 18 Jul 2020 11:36:23 +0100
Subject: [PATCH] Fix field tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/elements/_Tooltip.scss      | 12 ++++++++++++
 src/components/views/elements/Field.tsx   |  1 +
 src/components/views/elements/Tooltip.tsx |  3 ++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index 45202ff5f9..d90c818f94 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -81,6 +81,18 @@ limitations under the License.
     }
 }
 
+// These tooltips use an older style with a chevron
+.mx_Field_tooltip {
+    background-color: $menu-bg-color;
+    color: $primary-fg-color;
+    border: 1px solid $menu-border-color;
+    text-align: unset;
+
+    .mx_Tooltip_chevron {
+        display: unset;
+    }
+}
+
 .mx_Tooltip_title {
     font-weight: 600;
 }
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 9a889a0351..d9fd59dc11 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -248,6 +248,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
                 tooltipClassName={classNames("mx_Field_tooltip", tooltipClassName)}
                 visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
+                forceOnRight
             />;
         }
 
diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx
index 9b1e0c8350..14381808b8 100644
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@@ -35,6 +35,7 @@ interface IProps {
         visible?: boolean;
         // the react element to put into the tooltip
         label: React.ReactNode;
+        forceOnRight?: boolean;
 }
 
 export default class Tooltip extends React.Component<IProps> {
@@ -82,7 +83,7 @@ export default class Tooltip extends React.Component<IProps> {
         }
 
         style.top = (parentBox.top - 2) + window.pageYOffset + offset;
-        if (parentBox.right > window.innerWidth / 2) {
+        if (!this.props.forceOnRight && parentBox.right > window.innerWidth / 2) {
             style.right = window.innerWidth - parentBox.right - window.pageXOffset - 8;
         } else {
             style.left = parentBox.right + window.pageXOffset + 6;