import RichDestinyText from 'app/dim-ui/RichDestinyText';
import { useD2Definitions } from 'app/manifest/selectors';
import BungieImage from '../dim-ui/BungieImage';
import PressTip from '../dim-ui/PressTip';
import './ActivityModifier.scss';

export function ActivityModifier({ modifierHash }: { modifierHash: number }) {
  const defs = useD2Definitions()!;

  const modifier = defs.ActivityModifier.get(modifierHash);
  const modifierName = modifier.displayProperties.name;
  const modifierIcon = modifier.displayProperties.icon;

  if (!modifier || (!modifierName && !modifierIcon)) {
    return null;
  }

  return (
    <div className="milestone-modifier">
      {Boolean(modifierIcon) && <BungieImage src={modifierIcon} />}
      {Boolean(modifierName) && (
        <div className="milestone-modifier-info">
          <PressTip tooltip={<RichDestinyText text={modifier.displayProperties.description} />}>
            <div className="milestone-modifier-name">{modifierName}</div>
          </PressTip>
        </div>
      )}
    </div>
  );
}

import { useD2Definitions } from 'app/manifest/selectors';
import React from 'react';
import BungieImage from '../dim-ui/BungieImage';
import PressTip from '../dim-ui/PressTip';
import './ActivityModifier.scss';

export function ActivityModifier({ modifierHash }: { modifierHash: number }) {
  const defs = useD2Definitions()!;

  const modifier = defs.ActivityModifier.get(modifierHash);
  const modifierName = modifier.displayProperties.name;
  const modifierIcon = modifier.displayProperties.icon;

  if (!modifier || (!modifierName && !modifierIcon)) {
    return null;
  }

  return (
    <div className="milestone-modifier">
      {Boolean(modifierIcon) && <BungieImage src={modifierIcon} />}
      {Boolean(modifierName) && (
        <div className="milestone-modifier-info">
          <PressTip tooltip={modifier.displayProperties.description}>
            <div className="milestone-modifier-name">{modifierName}</div>
          </PressTip>
        </div>
      )}
    </div>
  );
}

--- 
+++ 
@@ -1,5 +1,5 @@
+import RichDestinyText from 'app/dim-ui/RichDestinyText';
 import { useD2Definitions } from 'app/manifest/selectors';
-import React from 'react';
 import BungieImage from '../dim-ui/BungieImage';
 import PressTip from '../dim-ui/PressTip';
 import './ActivityModifier.scss';
@@ -20,7 +20,7 @@
       {Boolean(modifierIcon) && <BungieImage src={modifierIcon} />}
       {Boolean(modifierName) && (
         <div className="milestone-modifier-info">
-          <PressTip tooltip={modifier.displayProperties.description}>
+          <PressTip tooltip={<RichDestinyText text={modifier.displayProperties.description} />}>
             <div className="milestone-modifier-name">{modifierName}</div>
           </PressTip>
         </div>
Use RichDestinyText for activity modifier tooltips.
