Various Tooltips

src/components/layout/dialogs/Search.jsx

@@ -10,9 +10,11 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@apollo/client'
 
-import Utility from '@services/Utility'
+import NameTT from '@components/popups/common/NameTT'
 import { useStore, useStatic } from '@hooks/useStore'
+import Utility from '@services/Utility'
 import Query from '@services/Query'
+
 import Header from '../general/Header'
 import QuestTitle from '../general/QuestTitle'
 
@@ -77,20 +79,28 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
       } = option
       let main
       let amount = 0
+      let tt = ''
       switch (quest_reward_type) {
         case 2:
           main = Icons.getRewards(quest_reward_type, quest_item_id, item_amount)
           amount = main.includes('_a') || item_amount <= 1 ? 0 : item_amount
+          tt = `item_${quest_item_id}`
           break
         case 3:
+          tt = `stardust`
           main = Icons.getRewards(quest_reward_type, stardust_amount)
           amount = main.includes('_a') ? 0 : stardust_amount
           break
         case 4:
+          tt = `poke_${candy_pokemon_id}`
           main = Icons.getRewards(quest_reward_type, candy_pokemon_id)
           amount = main.includes('_a') ? 0 : candy_amount
           break
         case 7:
+          tt = [
+            quest_form_id ? `form_${quest_form_id}` : '',
+            `poke_${quest_pokemon_id}`,
+          ]
           main = Icons.getPokemon(
             quest_pokemon_id,
             quest_form_id,
@@ -101,10 +111,12 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
           )
           break
         case 9:
+          tt = `poke_${xl_candy_pokemon_id}`
           main = Icons.getRewards(quest_reward_type, xl_candy_pokemon_id)
           amount = main.includes('_a') ? 0 : xl_candy_amount
           break
         case 12:
+          tt = `poke_${mega_pokemon_id}`
           main = Icons.getRewards(
             quest_reward_type,
             mega_pokemon_id,
@@ -124,7 +136,13 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
             position: 'relative',
           }}
         >
-          <img src={main} style={{ maxWidth: 45, maxHeight: 45 }} alt={main} />
+          <NameTT id={tt}>
+            <img
+              src={main}
+              style={{ maxWidth: 45, maxHeight: 45 }}
+              alt={main}
+            />
+          </NameTT>
           {Boolean(
             main.includes('stardust')
               ? !main.endsWith('0.png')
@@ -141,25 +159,40 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
         raid_pokemon_evolution,
       } = option
       return (
-        <img
-          src={Icons.getPokemon(
-            raid_pokemon_id,
-            raid_pokemon_form,
-            raid_pokemon_evolution,
-            raid_pokemon_gender,
-            raid_pokemon_costume,
-          )}
-          alt={raid_pokemon_id}
-          style={{ maxWidth: 45, maxHeight: 45 }}
-        />
+        <NameTT
+          id={[
+            raid_pokemon_form ? `form_${raid_pokemon_form}` : '',
+            raid_pokemon_evolution ? `evo_${raid_pokemon_evolution}` : '',
+            `poke_${raid_pokemon_id}`,
+          ]}
+        >
+          <img
+            src={Icons.getPokemon(
+              raid_pokemon_id,
+              raid_pokemon_form,
+              raid_pokemon_evolution,
+              raid_pokemon_gender,
+              raid_pokemon_costume,
+            )}
+            alt={raid_pokemon_id}
+            style={{ maxWidth: 45, maxHeight: 45 }}
+          />
+        </NameTT>
       )
     }
     return (
-      <img
-        src={Icons.getPokemon(nest_pokemon_id, nest_pokemon_form)}
-        alt={nest_pokemon_form}
-        style={{ maxWidth: 45, maxHeight: 45 }}
-      />
+      <NameTT
+        id={[
+          nest_pokemon_form ? `form_${nest_pokemon_form}` : '',
+          `poke_${nest_pokemon_id}`,
+        ]}
+      >
+        <img
+          src={Icons.getPokemon(nest_pokemon_id, nest_pokemon_form)}
+          alt={nest_pokemon_form}
+          style={{ maxWidth: 45, maxHeight: 45 }}
+        />
+      </NameTT>
     )
   }
 

src/components/popups/Pokemon.jsx

@@ -19,6 +19,7 @@ import useStyles from '@hooks/useStyles'
 import Utility from '@services/Utility'
 
 import GenericTimer from './common/Timer'
+import NameTT from './common/NameTT'
 
 const rowClass = { width: 30, fontWeight: 'bold' }
 
@@ -572,17 +573,24 @@ const PvpInfo = ({ pokemon, league, data, t, Icons }) => {
         ? {
             id: `${league}-${each.pokemon}-${each.form}-${each.evolution}-${each.gender}-${each.rank}-${each.cp}-${each.lvl}-${each.cap}`,
             img: (
-              <img
-                src={Icons.getPokemon(
-                  each.pokemon,
-                  each.form,
-                  each.evolution,
-                  each.gender,
-                  pokemon.costume,
-                )}
-                height={20}
-                alt={each.pokemon}
-              />
+              <NameTT
+                id={[
+                  each.form ? `form_${each.form}` : '',
+                  `poke_${each.pokemon}`,
+                ]}
+              >
+                <img
+                  src={Icons.getPokemon(
+                    each.pokemon,
+                    each.form,
+                    each.evolution,
+                    each.gender,
+                    pokemon.costume,
+                  )}
+                  height={20}
+                  alt={t(`poke_${each.pokemon}`)}
+                />
+              </NameTT>
             ),
             rank: each.rank || 0,
             cp: each.cp || 0,

src/components/popups/Pokestop.jsx

@@ -20,6 +20,7 @@ import Title from './common/Title'
 import HeaderImage from './common/HeaderImage'
 import Timer from './common/Timer'
 import PowerUp from './common/PowerUp'
+import NameTT from './common/NameTT'
 
 export default function PokestopPopup({
   pokestop,
@@ -135,6 +136,7 @@ export default function PokestopPopup({
                     expireTime={lure_expire_timestamp}
                     icon={Icons.getPokestops(lure_id)}
                     until
+                    tt={`lure_${lure_id}`}
                   />
                 </>
               )}
@@ -154,6 +156,7 @@ export default function PokestopPopup({
                         expireTime={invasion.incident_expire_timestamp}
                         icon={Icons.getInvasions(invasion.grunt_type)}
                         until
+                        tt={`grunt_a_${invasion.grunt_type}`}
                       />
                     </Fragment>
                   ))}
@@ -336,6 +339,8 @@ const RewardInfo = ({ quest, Icons, config, t }) => {
     stardust_amount,
     candy_pokemon_id,
     candy_amount,
+    xl_candy_pokemon_id,
+    xl_candy_amount,
     mega_pokemon_id,
     mega_amount,
     quest_reward_type,
@@ -347,37 +352,73 @@ const RewardInfo = ({ quest, Icons, config, t }) => {
     with_ar,
   } = quest
 
-  const getImage = () => {
+  const image = (() => {
     switch (quest_reward_type) {
       case 2:
-        return Icons.getRewards(quest_reward_type, quest_item_id, item_amount)
+        return {
+          tooltip: `item_${quest_item_id}`,
+          src: Icons.getRewards(quest_reward_type, quest_item_id, item_amount),
+        }
       case 3:
-        return Icons.getRewards(quest_reward_type, stardust_amount)
+        return {
+          tooltip: `stardust`,
+          src: Icons.getRewards(quest_reward_type, stardust_amount),
+        }
       case 4:
-        return Icons.getRewards(
-          quest_reward_type,
-          candy_pokemon_id,
-          candy_amount,
-        )
+        return {
+          tooltip: `poke_${candy_pokemon_id}`,
+          src: Icons.getRewards(
+            quest_reward_type,
+            candy_pokemon_id,
+            candy_amount,
+          ),
+        }
       case 7:
-        return Icons.getPokemon(
-          quest_pokemon_id,
-          quest_form_id,
-          0,
-          quest_gender_id,
-          quest_costume_id,
-          quest_shiny,
-        )
+        return {
+          tooltip: [
+            quest_form_id ? `form_${quest_form_id}` : '',
+            `poke_${quest_pokemon_id}`,
+          ],
+          src: Icons.getPokemon(
+            quest_pokemon_id,
+            quest_form_id,
+            0,
+            quest_gender_id,
+            quest_costume_id,
+            quest_shiny,
+          ),
+        }
+      case 9:
+        return {
+          tooltip: `poke_${xl_candy_pokemon_id}`,
+          src: Icons.getRewards(
+            quest_reward_type,
+            xl_candy_pokemon_id,
+            xl_candy_amount,
+          ),
+        }
       case 12:
-        return Icons.getRewards(quest_reward_type, mega_pokemon_id, mega_amount)
+        return {
+          tooltip: `poke_${mega_pokemon_id}`,
+          src: Icons.getRewards(
+            quest_reward_type,
+            mega_pokemon_id,
+            mega_amount,
+          ),
+        }
       default:
-        return Icons.getRewards(quest_reward_type)
+        return {
+          tooltip: `quest_reward_${quest_reward_type}`,
+          src: Icons.getRewards(quest_reward_type),
+        }
     }
-  }
+  })()
 
   return (
     <Grid item xs={3} style={{ textAlign: 'center' }}>
-      <img src={getImage()} className="quest-popup-img" alt="quest reward" />
+      <NameTT id={image.tooltip}>
+        <img src={image.src} className="quest-popup-img" alt="quest reward" />
+      </NameTT>
       <Typography variant="caption" className="ar-task" noWrap>
         {config.questMessage
           ? config.questMessage
@@ -611,25 +652,30 @@ const Invasion = ({ pokestop, Icons, t }) => {
   const encounterNum = { first: '#1', second: '#2', third: '#3' }
 
   const makeShadowPokemon = (pkmn) => (
-    <div key={pkmn.id} className="invasion-reward">
-      <img
-        className="invasion-reward"
-        alt="invasion reward"
-        src={Icons.getPokemon(
-          pkmn.id,
-          pkmn.form,
-          0,
-          pkmn.gender,
-          pkmn.costumeId,
-          pkmn.shiny,
-        )}
-      />
-      <img
-        className="invasion-reward-shadow"
-        alt="shadow"
-        src={Icons.getMisc('shadow')}
-      />
-    </div>
+    <NameTT
+      key={pkmn.id}
+      id={[pkmn.form ? `form_${pkmn.form}` : '', `poke_${pkmn.id}`]}
+    >
+      <div className="invasion-reward">
+        <img
+          className="invasion-reward"
+          alt="invasion reward"
+          src={Icons.getPokemon(
+            pkmn.id,
+            pkmn.form,
+            0,
+            pkmn.gender,
+            pkmn.costumeId,
+            pkmn.shiny,
+          )}
+        />
+        <img
+          className="invasion-reward-shadow"
+          alt="shadow"
+          src={Icons.getMisc('shadow')}
+        />
+      </div>
+    </NameTT>
   )
 
   const getRewardPercent = (grunt) => {

src/components/popups/common/NameTT.jsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Tooltip } from '@material-ui/core'
+import { useTranslation } from 'react-i18next'
+
+export default function NameTT({ id, children }) {
+  const { t } = useTranslation()
+
+  return (
+    <Tooltip
+      enterDelay={0}
+      enterTouchDelay={0}
+      placement="left-start"
+      title={
+        Array.isArray(id)
+          ? id
+              .filter(Boolean)
+              .map((i) => t(i))
+              .join(' ')
+          : t(id)
+      }
+    >
+      {children}
+    </Tooltip>
+  )
+}