Merge pull request #5014 from matrix-org/t3chguy/tooltips

Fix field tooltips

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

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
             />;
         }
 

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;