feat(in-264): fixes

src/features/MatchSidePlaylists/components/EventButton/index.tsx

@@ -1,11 +1,18 @@
-import { ProfileTypes } from 'config'
+import { createPortal } from 'react-dom'
+
+import { isMobileDevice, ProfileTypes } from 'config'
 
 import type { Event, Team } from 'requests'
 
-import { usePageParams } from 'hooks/usePageParams'
+import {
+  useTooltip,
+  usePageParams,
+  useModalRoot,
+} from 'hooks'
 
 import { Name } from 'features/Name'
 import { T9n } from 'features/T9n'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import {
   Avatar,
@@ -16,8 +23,8 @@ import {
   SubTitle,
   EventTime,
   EventLike,
-  PlayerNum,
 } from '../TabEvents/styled'
+import { Tooltip } from '../TabStats/styled'
 
 type Props = {
   active?: boolean,
@@ -37,6 +44,16 @@ export const EventButton = ({
   team,
 }: Props) => {
   const { sportType } = usePageParams()
+  const {
+    isTooltipShown,
+    onMouseLeave,
+    onMouseOver,
+    tooltipStyle,
+    tooltipText,
+  } = useTooltip()
+  const modalRoot = useModalRoot()
+  const { suffix } = useLexicsStore()
+
   const {
     c: clearTime,
     l: lexica,
@@ -82,16 +99,25 @@ export const EventButton = ({
             <T9n t={lexica} />
             {(score1 || score2) && ` (${score1}-${score2})`}
           </Title>
-          <SubTitle>
+          <SubTitle
-            {nameObj && 'num' in nameObj && (
+            onMouseOver={isMobileDevice ? undefined : onMouseOver({
-              <PlayerNum>
+              horizontalPosition: 'right',
-                {(nameObj as Event['pl'])!.num}
+              indent: 15,
-              </PlayerNum>
+              tooltipText: nameObj?.[`name_${suffix}`] || '',
-            )}{' '}
+            })}
+            onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
+          >
+            {playerName?.num}{' '}
             {(playerId || teamId) && nameObj && <Name nameObj={nameObj} />}
           </SubTitle>
         </EventDesc>
       </EventInfo>
+      {isTooltipShown && modalRoot.current && createPortal(
+        <Tooltip style={tooltipStyle}>
+          {tooltipText}
+        </Tooltip>,
+        modalRoot.current,
+      )}
     </Button>
   )
 }

src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx

@@ -79,6 +79,7 @@ export const PlayerNum = styled.span`
 
 export const PlayButton = styled(PlayButtonBase)`
   justify-content: initial;
+  padding-right: 10px;
 
   ${Duration} {
     margin-left: auto;

src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx

@@ -10,7 +10,8 @@ import {
   useTooltip,
 } from 'hooks'
 
-import { Tooltip, CellContainer } from './styled'
+import { Tooltip } from '../TabStats/styled'
+import { CellContainer } from './styled'
 
 type CellProps = {
   anchorId?: string,

src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx

@@ -5,7 +5,6 @@ import styled, { css } from 'styled-components/macro'
 import { isIOS, isMobileDevice } from 'config'
 
 import { customScrollbar } from 'features/Common'
-import { TooltipWrapper } from 'features/Tooltip'
 import {
   ArrowButton as ArrowButtonBase,
   Arrow as ArrowBase,
@@ -76,21 +75,6 @@ export const Table = styled.table`
   table-layout: fixed;
 `
 
-export const Tooltip = styled(TooltipWrapper)`
-  display: block;
-  padding: 2px 10px;
-  border-radius: 6px;
-  transform: none;
-  font-size: 11px;
-  line-height: 1;
-  color: ${({ theme }) => theme.colors.black};
-  z-index: 999;
-
-  ::before {
-    display: none;
-  }
-`
-
 type ParamShortTitleProps = {
   showLeftArrow?: boolean,
   sortDirection: 'asc' | 'desc',

src/features/MatchSidePlaylists/components/TabEvents/styled.tsx

@@ -121,12 +121,10 @@ export const SubTitle = styled(Title)`
   margin-top: 2px;
 
   ${NameStyled} {
-    font-weight: 600;
+    font-weight: 700;
   }
 `
 
-export const PlayerNum = styled.span``
-
 export const EventLike = styled.img`
   position: absolute;
   left: -14px;
@@ -219,10 +217,6 @@ export const Button = styled(ButtonBase) <ButtonProps>`
     ` : ''
   )}
 
-  &:hover ${EventDesc} {
-    overflow: visible;
-  }
-
   ${({ isHomeTeam }) => (
     isHomeTeam
       ? css`padding-left: 60px;`

src/features/MatchSidePlaylists/components/TabStats/styled.tsx

@@ -16,14 +16,16 @@ export const TabList = styled.div.attrs({ role: 'tablist' })`
 `
 
 export const Tooltip = styled(TooltipWrapper)`
-  display: block;
+  display: flex;
-  padding: 2px 10px;
+  justify-content: center;
+  align-items: center;
+  height: 17px;
+  padding: 0 10px;
   border-radius: 6px;
   transform: none;
   font-size: 11px;
   line-height: 1;
   color: ${({ theme }) => theme.colors.black};
-  z-index: 999;
 
   ::before {
     display: none;

src/hooks/useTooltip.tsx

@@ -56,6 +56,7 @@ export const useTooltip = () => {
       position: 'fixed',
       right: !isUndefined(coords.right) ? `${window.screen.width - coords.right}px` : 'auto',
       top: `${coords.top}px`,
+      zIndex: 999,
 
       ...(horizontalPosition === 'center' && { transform: 'translateX: (-50%)' }),
       ...(verticalPosition === 'top' && { transform: 'translateY: (-50%)' }),