chore: Add absolute date tooltip in history (#9629)

packages/client/components/SimpleTooltip.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import React, {ReactNode} from 'react'
+import {MenuPosition} from '../hooks/useCoords'
+import useTooltip from '../hooks/useTooltip'
+
+interface Props {
+  text: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+const SimpleTooltip = (props: Props) => {
+  const {text, children, className} = props
+  const {openTooltip, closeTooltip, tooltipPortal, originRef} = useTooltip<HTMLDivElement>(
+    MenuPosition.UPPER_CENTER
+  )
+
+  return (
+    <div
+      onMouseEnter={openTooltip}
+      onMouseLeave={closeTooltip}
+      className={clsx('cursor-pointer', className)}
+      ref={originRef}
+    >
+      {children}
+      {tooltipPortal(text)}
+    </div>
+  )
+}
+
+export default SimpleTooltip

packages/client/components/TimelineEventDate.tsx

@@ -2,7 +2,9 @@ import styled from '@emotion/styled'
 import ms from 'ms'
 import React, {Component} from 'react'
 import {PALETTE} from '../styles/paletteV3'
+import absoluteDate from '../utils/date/absoluteDate'
 import relativeDate from '../utils/date/relativeDate'
+import SimpleTooltip from './SimpleTooltip'
 
 const StyledSpan = styled('span')({
   color: PALETTE.SLATE_600,
@@ -41,7 +43,11 @@ class TimelineEventDate extends Component<Props, State> {
 
   render() {
     const {fromNow} = this.state
-    return <StyledSpan>{fromNow}</StyledSpan>
+    return (
+      <StyledSpan>
+        <SimpleTooltip text={absoluteDate(this.props.createdAt)}>{fromNow}</SimpleTooltip>
+      </StyledSpan>
+    )
   }
 }
 

packages/client/modules/teamDashboard/components/TeamDashInsights/MostUsedEmojisCard.tsx

@@ -2,7 +2,7 @@ import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
 import {MostUsedEmojisCard_insights$key} from '~/__generated__/MostUsedEmojisCard_insights.graphql'
-import Tooltip from '../../../../components/Tooltip'
+import SimpleTooltip from '../../../../components/SimpleTooltip'
 import getReactji from '../../../../utils/getReactji'
 import TeamInsightsCard from './TeamInsightsCard'
 
@@ -41,9 +41,9 @@ const MostUsedEmojisCard = (props: Props) => {
           const {unicode, shortName} = getReactji(emoji.id)
           return (
             <div key={emoji.id} className='flex h-24 w-1/4 flex-col items-center justify-center'>
-              <Tooltip text={`:${shortName}:`}>
+              <SimpleTooltip text={`:${shortName}:`}>
                 <div className='text-2xl'>{unicode}</div>
-              </Tooltip>
+              </SimpleTooltip>
               <div className='p-2 font-semibold'>{emoji.count}</div>
             </div>
           )

packages/client/modules/teamDashboard/components/TeamDashInsights/TeamInsightsCard.tsx

@@ -1,7 +1,7 @@
 import graphql from 'babel-plugin-relay/macro'
 import React, {ReactNode, useState} from 'react'
 import {useFragment} from 'react-relay'
-import Tooltip from '../../../../components/Tooltip'
+import SimpleTooltip from '../../../../components/SimpleTooltip'
 import {Info as InfoIcon} from '@mui/icons-material'
 import {ThumbUp, ThumbDown} from '@mui/icons-material'
 import FlatButton from '../../../../components/FlatButton'
@@ -51,9 +51,9 @@ const TeamInsightsCard = (props: Props) => {
     <div className='relative m-2 flex w-[320px] flex-col overflow-hidden rounded bg-white drop-shadow'>
       <div className='flex items-center justify-between'>
         <div className='p-4 text-sm font-semibold text-slate-600'>{title}</div>
-        <Tooltip text={tooltip} className='pr-3 text-slate-600'>
+        <SimpleTooltip text={tooltip} className='pr-3 text-slate-600'>
           <InfoIcon />
-        </Tooltip>
+        </SimpleTooltip>
       </div>
       <div className='flex flex-grow flex-col justify-center p-4 pt-0'>{children}</div>
       <div className='flex items-center justify-center bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-600'>

packages/client/modules/teamDashboard/components/TeamDashInsights/TopRetroTemplatesCard.tsx

@@ -2,7 +2,7 @@ import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
 import {TopRetroTemplatesCard_insights$key} from '~/__generated__/TopRetroTemplatesCard_insights.graphql'
-import Tooltip from '../../../../components/Tooltip'
+import SimpleTooltip from '../../../../components/SimpleTooltip'
 import TeamInsightsCard from './TeamInsightsCard'
 import plural from '../../../../utils/plural'
 
@@ -46,14 +46,14 @@ const TopRetroTemplatesCard = (props: Props) => {
           const {reflectTemplate, count} = template
           const {name, illustrationUrl} = reflectTemplate
           return (
-            <Tooltip
+            <SimpleTooltip
               text={`Used ${plural(count, 'once', `${count} times`)} in the last 12 months`}
               className='my-2 flex items-center rounded border-2 border-grape-500 bg-fuscia-100 text-sm font-semibold text-slate-700'
               key={index}
             >
               <img className='m-1 h-10 w-10' src={illustrationUrl} />
               {name}
-            </Tooltip>
+            </SimpleTooltip>
           )
         })}
         {topRetroTemplates.length === 1 && (