Use Compound tooltips on MessageTimestamp to improve UX of date time …

…discovery (#11732) * Use Compound tooltips on MessageTimestamp to improve UX of date time discovery Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
matrix-org · Oct 13, 2023 · 4605fd7 · 4605fd7
1 parent 27bb67b
commit 4605fd7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/src/components/views/messages/MessageTimestamp.tsx b/src/components/views/messages/MessageTimestamp.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from "react";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from "../../../DateUtils";
 
@@ -42,14 +43,11 @@ export default class MessageTimestamp extends React.Component<IProps> {
         }
 
         return (
-            <span
-                className="mx_MessageTimestamp"
-                title={formatFullDate(date, this.props.showTwelveHour)}
-                aria-hidden={true}
-                aria-live="off"
-            >
-                {timestamp}
-            </span>
+            <Tooltip label={formatFullDate(date, this.props.showTwelveHour)}>
+                <span className="mx_MessageTimestamp" aria-hidden={true} aria-live="off">
+                    {timestamp}
+                </span>
+            </Tooltip>
         );
     }
 }