fix: NFT Grid tooltip (#31625)

## **Description**

Adds tooltip to truncated NFT Grid titles.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31625?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

Hover over NFT grid item that is truncated, if truncated it should
tooltip, if the title is fully visible it should not tooltip

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/ea98bb55-1325-4c83-ba17-a830318f3ecf

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: gambinish

ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap

@@ -80,12 +80,6 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
                   </div>
                 </div>
               </button>
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
-              />
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              />
             </div>
           </div>
         </div>

ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap

@@ -81,14 +81,6 @@ exports[`NFT full image should match snapshot 1`] = `
                     </div>
                   </div>
                 </button>
-                <p
-                  class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
-                />
-                <p
-                  class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-                >
-                  Punk #4
-                </p>
               </div>
             </div>
           </div>

ui/components/multichain/nft-item/nft-item.tsx

@@ -27,6 +27,10 @@ import {
   getTestNetworkBackgroundColor,
 } from '../../../selectors';
 import { NFT } from '../asset-picker-amount/asset-picker-modal/types';
+import Tooltip from '../../ui/tooltip/tooltip';
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
+// eslint-disable-next-line import/no-restricted-paths
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 
 type NftItemProps = {
   nft?: NFT;
@@ -104,6 +108,15 @@ export const NftItem = ({
       />
     );
 
+  const environmentType = getEnvironmentType();
+  const maxStrLen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN ? 40 : 20;
+
+  const isLongName = nft?.name && nft.name.length > maxStrLen;
+  const isLongCollection =
+    nft?.collection?.name &&
+    typeof nft?.collection?.name === 'string' &&
+    nft.collection.name.length > maxStrLen;
+
   return (
     <Box className="nft-item__card">
       <Box
@@ -136,16 +149,34 @@ export const NftItem = ({
           {nftImageComponentToRender}
         </BadgeWrapper>
       </Box>
-      <Text variant={TextVariant.bodySm} color={TextColor.textDefault} ellipsis>
-        {nft?.name}
-      </Text>
-      <Text
-        variant={TextVariant.bodySm}
-        color={TextColor.textAlternative}
-        ellipsis
-      >
-        {nft?.collection?.name || name}
-      </Text>
+      {nft && (
+        <Tooltip
+          position="bottom"
+          html={
+            <>
+              <span>{nft?.name}</span>
+              <br />
+              <span>{nft?.collection?.name || name}</span>
+            </>
+          }
+          disabled={!isLongName && !isLongCollection}
+        >
+          <Text
+            variant={TextVariant.bodySm}
+            color={TextColor.textDefault}
+            ellipsis
+          >
+            {nft?.name}
+          </Text>
+          <Text
+            variant={TextVariant.bodySm}
+            color={TextColor.textAlternative}
+            ellipsis
+          >
+            {nft?.collection?.name || name}
+          </Text>
+        </Tooltip>
+      )}
     </Box>
   );
 };

ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap

@@ -37,12 +37,6 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
             </div>
           </div>
         </button>
-        <p
-          class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
-        />
-        <p
-          class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-        />
       </div>
     </div>
     <h2

ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/__snapshots__/nft-send-heading.test.tsx.snap

@@ -37,12 +37,6 @@ exports[`<NFTSendHeading /> renders component 1`] = `
             </div>
           </div>
         </button>
-        <p
-          class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
-        />
-        <p
-          class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-        />
       </div>
     </div>
     <h2