Browse Source

feat(replays): Add a tooltip to show relative time on event chapters (#34399)

### Description

- Add a tooltip on relativeTime to show absolute time on event chapters components

Closes #34225 

### Screenshots

<img width="328" alt="image" src="https://user-images.githubusercontent.com/14813235/167479606-98b4f8d2-397b-4397-bf8c-2940d580492e.png">
Daian Scuarissi 2 years ago
parent
commit
c7202f4eec
1 changed files with 15 additions and 1 deletions
  1. 15 1
      static/app/components/replays/playerRelativeTime.tsx

+ 15 - 1
static/app/components/replays/playerRelativeTime.tsx

@@ -1,5 +1,8 @@
 import styled from '@emotion/styled';
 
+import DateTime from 'sentry/components/dateTime';
+import Tooltip from 'sentry/components/tooltip';
+
 import {showPlayerTime} from './utils';
 
 type Props = {
@@ -12,7 +15,18 @@ const PlayerRelativeTime = ({relativeTime, timestamp}: Props) => {
     return <div />;
   }
 
-  return <Value>{showPlayerTime(timestamp, relativeTime)}</Value>;
+  return (
+    <Tooltip
+      title={<DateTime date={timestamp} />}
+      disabled={!timestamp}
+      skipWrapper
+      disableForVisualTest
+      underlineColor="gray300"
+      showUnderline
+    >
+      <Value>{showPlayerTime(timestamp, relativeTime)}</Value>
+    </Tooltip>
+  );
 };
 
 const Value = styled('p')`