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 { 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 { @@ -82,7 +83,7 @@ export default class Tooltip extends React.Component { } 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;