Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve the look of tooltips #7049

Merged
merged 3 commits into from
Nov 2, 2021
Merged

Improve the look of tooltips #7049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f4919b
Remove unused CSS classes
SimonBrandner Oct 28, 2021
eebdf58
Update how tooltips look
SimonBrandner Oct 28, 2021
b333a67
Make the opacity of tooltips 100%
SimonBrandner Nov 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions res/css/views/elements/_Tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
8 changes: 3 additions & 5 deletions src/components/views/elements/AccessibleTooltipButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down