diff --git a/src/features/MatchSidePlaylists/components/EventButton/index.tsx b/src/features/MatchSidePlaylists/components/EventButton/index.tsx
index cd369d1f..e5017e82 100644
--- a/src/features/MatchSidePlaylists/components/EventButton/index.tsx
+++ b/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 = ({
{(score1 || score2) && ` (${score1}-${score2})`}
-
- {nameObj && 'num' in nameObj && (
-
- {(nameObj as Event['pl'])!.num}
-
- )}{' '}
+
+ {playerName?.num}{' '}
{(playerId || teamId) && nameObj && }
+ {isTooltipShown && modalRoot.current && createPortal(
+
+ {tooltipText}
+ ,
+ modalRoot.current,
+ )}
)
}
diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx
index f96cb113..bb5955ad 100644
--- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx
+++ b/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;
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx
index 2122ee81..360a000d 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx
+++ b/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,
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx
index 7a721c9c..caf2403a 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx
+++ b/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',
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
index f7dc7afe..f5e082d8 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
+++ b/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;
@@ -218,10 +216,6 @@ export const Button = styled(ButtonBase) `
background-size: cover;
` : ''
)}
-
- &:hover ${EventDesc} {
- overflow: visible;
- }
${({ isHomeTeam }) => (
isHomeTeam
diff --git a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx
index 94355c8d..701d94f7 100644
--- a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx
+++ b/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;
- padding: 2px 10px;
+ display: flex;
+ 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;
diff --git a/src/hooks/useTooltip.tsx b/src/hooks/useTooltip.tsx
index 161f12d2..e2c236e6 100644
--- a/src/hooks/useTooltip.tsx
+++ b/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%)' }),