feat(#ott2784): favorite icons tooltip added

src/features/UserFavorites/index.tsx

@@ -6,6 +6,8 @@ import map from 'lodash/map'
 import { FavoritesActions } from 'requests'
 
 import { Modal } from 'features/Modal'
+
+import { Name } from 'features/Name'
 import { ProfileLink } from 'features/ProfileLink'
 import { Close } from '../../libs/objects/Close'
 
@@ -20,6 +22,7 @@ import {
   ExclamationSign,
   FavoriteModal,
   Text,
+  TournamentNameTooltip,
   ScrollWrapper,
 } from './styled'
 
@@ -66,6 +69,9 @@ export const UserFavorites = ({ marginTop }: Props) => {
                 })}
               >
                 <Close size={8} />
+                <TournamentNameTooltip>
+                  <Name nameObj={item.info} />
+                </TournamentNameTooltip>
               </UserSportFavXWrapper>
               <TooltipBlock
                 topPosition={position}

src/features/UserFavorites/styled.tsx

@@ -18,7 +18,8 @@ export const UserSportFavWrapper = styled.aside`
   left: 0;
   top: 0;
   bottom: 0;
-  z-index: 1;
+  z-index: 10;
+
   ${isMobileDevice
     ? css`
      display: none;
@@ -33,7 +34,7 @@ export const ScrollWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow-y: auto;
+  /* overflow-y: auto; */
   ${customScrollbar}
 `
 
@@ -130,3 +131,22 @@ export const Text = styled(T9n)`
   text-align: center;
   line-height: 160.2%;
 `
+
+export const TournamentNameTooltip = styled.div`
+  position: absolute;
+  top: -0.1875rem;
+  left: 1.25rem;
+  min-width: 14.5rem;
+  max-width: 14.5rem;
+  padding-left: 6px;
+  line-height: 1.3125rem;
+  background-color: #fff;
+  border-radius: 6px;
+  color: #000;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  text-transform: uppercase;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`