PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Fix field tooltips
This commit is contained in:
Michael Telatynski 2020-07-20 15:18:53 +01:00 committed by GitHub
commit 476c3eb7c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/elements/_Tooltip.scss
View file

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

1
src/components/views/elements/Field.tsx
View file

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

3
src/components/views/elements/Tooltip.tsx
View file

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