Move ItemTooltip

src/app/inventory/ConnectedInventoryItem.tsx

@@ -16,6 +16,7 @@ interface ProvidedProps {
   id?: string; // defaults to item.index - id is typically used for `itemPop`
   allowFilter?: boolean;
   ignoreSelectedPerks?: boolean;
+  includeTooltip?: boolean;
   innerRef?: React.Ref<HTMLDivElement>;
   onClick?(e: React.MouseEvent): void;
   onShiftClick?(e: React.MouseEvent): void;
@@ -71,6 +72,7 @@ function ConnectedInventoryItem({
   onDoubleClick,
   searchHidden,
   ignoreSelectedPerks,
+  includeTooltip,
   innerRef,
 }: Props) {
   return (
@@ -86,6 +88,7 @@ function ConnectedInventoryItem({
       onDoubleClick={onDoubleClick}
       searchHidden={searchHidden}
       ignoreSelectedPerks={ignoreSelectedPerks}
+      includeTooltip={includeTooltip}
       innerRef={innerRef}
     />
   );

src/app/inventory/InventoryItem.tsx

@@ -1,3 +1,4 @@
+import PressTip from 'app/dim-ui/PressTip';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import BungieImage from '../dim-ui/BungieImage';
@@ -9,6 +10,7 @@ import { TagValue } from './dim-item-info';
 import styles from './InventoryItem.m.scss';
 import { DimItem } from './item-types';
 import ItemIcon from './ItemIcon';
+import { DimItemTooltip } from './ItemTooltip';
 import NewItemIndicator from './NewItemIndicator';
 import { selectedSubclassPath } from './subclass';
 import TagIcon from './TagIcon';
@@ -28,6 +30,8 @@ interface Props {
   wishlistRoll?: InventoryWishListRoll;
   /** Don't show information that relates to currently selected perks (only used for subclasses currently) */
   ignoreSelectedPerks?: boolean;
+  /** Don't show information that relates to currently selected perks (only used for subclasses currently) */
+  includeTooltip?: boolean;
   innerRef?: React.Ref<HTMLDivElement>;
   /** TODO: item locked needs to be passed in */
   onClick?(e: React.MouseEvent): void;
@@ -43,6 +47,7 @@ export default function InventoryItem({
   notes,
   searchHidden,
   wishlistRoll,
+  includeTooltip,
   ignoreSelectedPerks,
   onClick,
   onShiftClick,
@@ -115,16 +120,23 @@ export default function InventoryItem({
     );
   }, [isNew, item, notes, subclassPath, tag, wishlistRoll]);
 
-  return (
+  const tooltip = includeTooltip ?? false;
+  const inner = (
     <div
       id={id || item.index}
       onClick={enhancedOnClick}
       onDoubleClick={onDoubleClick}
-      title={`${item.name}\n${subtitle}`}
+      title={!tooltip ? `${item.name}\n${subtitle}` : undefined}
       className={itemStyles}
       ref={innerRef}
     >
       {contents}
     </div>
   );
+
+  if (tooltip) {
+    return <PressTip tooltip={() => <DimItemTooltip item={item} />}>{inner}</PressTip>;
+  } else {
+    return inner;
+  }
 }

src/app/item-picker/ItemTooltip.m.scss → src/app/inventory/ItemTooltip.m.scss

@@ -19,9 +19,6 @@
 
 .stats {
   margin: 4px 0 0 0;
-  :global(.stat-row) {
-    margin-bottom: 8px;
-  }
   :global(.stat) {
     line-height: 8px;
   }

src/app/item-picker/ItemTooltip.tsx → src/app/inventory/ItemTooltip.tsx

@@ -18,17 +18,17 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
       const perk = s.plugged?.plugDef;
       return perk ? [perk] : [];
     });
-    const contents = (
+    const contents = perks.length ? (
       <div className={clsx(styles.perks)}>
         {perks.map((perk, index) => (
           <div key={index}>
             <DefItemIcon itemDef={perk} borderless={true} /> {perk.displayProperties.name}
           </div>
         ))}
       </div>
-    );
+    ) : undefined;
     return <Tooltip def={itemDef} contents={contents} />;
-  } else if (item.bucket.sort === 'Armor' && item.stats) {
+  } else if (item.bucket.sort === 'Armor' && item.stats?.length) {
     const renderStat = (stat: DimStat) => (
       <div key={stat.statHash} className="stat">
         {stat.displayProperties.hasIcon ? (
@@ -49,7 +49,7 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
     );
     return <Tooltip def={itemDef} contents={contents} />;
   } else {
-    return <Tooltip def={itemDef} contents={<></>} />;
+    return <Tooltip def={itemDef} contents={undefined} />;
   }
 }
 

src/app/item-picker/ItemPicker.tsx

@@ -1,5 +1,4 @@
 import ClassIcon from 'app/dim-ui/ClassIcon';
-import PressTip from 'app/dim-ui/PressTip';
 import { t } from 'app/i18next-t';
 import { ItemFilter } from 'app/search/filter-types';
 import SearchBar from 'app/search/SearchBar';
@@ -17,7 +16,6 @@ import { itemSortOrderSelector } from '../settings/item-sort';
 import { sortItems } from '../shell/filters';
 import { ItemPickerState } from './item-picker';
 import './ItemPicker.scss';
-import { DimItemTooltip } from './ItemTooltip';
 
 type ProvidedProps = ItemPickerState & {
   onSheetClosed(): void;
@@ -103,13 +101,12 @@ function ItemPicker({
         <div className="sub-bucket">
           {items.map((item) => (
             <div key={item.index} className="item-picker-item">
-              <PressTip tooltip={() => <DimItemTooltip item={item} />}>
-                <ConnectedInventoryItem
-                  item={item}
-                  onClick={() => onItemSelectedFn(item, onClose)}
-                  ignoreSelectedPerks={ignoreSelectedPerks}
-                />
-              </PressTip>
+              <ConnectedInventoryItem
+                item={item}
+                onClick={() => onItemSelectedFn(item, onClose)}
+                includeTooltip
+                ignoreSelectedPerks={ignoreSelectedPerks}
+              />
               {item.type === 'Class' && (
                 <ClassIcon classType={item.classType} className="item-picker-item-class-icon" />
               )}