diff --git a/res/css/_components.scss b/res/css/_components.scss
index 8f3c187ff8..d0432b2f23 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -146,7 +146,6 @@
@import "./views/messages/_MjolnirBody.scss";
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
-@import "./views/messages/_ReactionsRowButtonTooltip.scss";
@import "./views/messages/_RedactedBody.scss";
@import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss";
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index 7efea2c3f7..a3a90e2a4f 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -52,7 +52,7 @@ limitations under the License.
display: none;
position: fixed;
border: 1px solid $menu-border-color;
- border-radius: 4px;
+ border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
@@ -60,7 +60,7 @@ limitations under the License.
pointer-events: none;
line-height: $font-14px;
font-size: $font-12px;
- font-weight: 600;
+ font-weight: 500;
color: $primary-fg-color;
max-width: 200px;
word-break: break-word;
@@ -87,3 +87,12 @@ limitations under the License.
}
}
}
+
+.mx_Tooltip_title {
+ font-weight: 600;
+}
+
+.mx_Tooltip_sub {
+ opacity: 0.7;
+ margin-top: 4px;
+}
diff --git a/res/css/views/messages/_ReactionsRowButtonTooltip.scss b/res/css/views/messages/_ReactionsRowButtonTooltip.scss
deleted file mode 100644
index cf4219fcec..0000000000
--- a/res/css/views/messages/_ReactionsRowButtonTooltip.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_ReactionsRowButtonTooltip_reactedWith {
- opacity: 0.7;
-}
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index f4d63136e1..af4316225f 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -24,6 +24,7 @@ import Tooltip from './Tooltip';
interface ITooltipProps extends IProps {
title: string;
+ tooltip?: React.ReactNode;
tooltipClassName?: string;
}
@@ -52,7 +53,7 @@ export default class AccessibleTooltipButton extends React.PureComponent