mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve the look of tooltips (#7049)

Browse source
This commit is contained in:
Šimon Brandner 2021-11-02 10:41:33 +01:00 committed by GitHub
parent f643839a00
commit 57fae01991
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,7 +52,6 @@ limitations under the License.
display: none;
position: fixed;
border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
padding: 10px;
pointer-events: none;
@ -63,7 +62,7 @@ limitations under the License.
word-break: break-word;
margin-right: 50px;
background-color: $inverted-bg-color;
background-color: #21262C; // Same on both themes
color: $accent-fg-color;
border: 0;
text-align: center;

8
src/components/views/elements/AccessibleTooltipButton.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
*/
import React from 'react';
import classNames from 'classnames';
import AccessibleButton from "./AccessibleButton";
import Tooltip, { Alignment } from './Tooltip';
@ -70,13 +69,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props } = this.props;
const tip = this.state.hover ? <Tooltip
className="mx_AccessibleTooltipButton_container"
tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
const tip = this.state.hover && <Tooltip
tooltipClassName={tooltipClassName}
label={tooltip || title}
yOffset={yOffset}
alignment={alignment}
/> : null;
/>;
return (
<AccessibleButton
{...props}