New source found from dndbeyond.com

ddb_main/components/SpellName/SpellName.tsx

@@ -2,7 +2,6 @@ import clsx from "clsx";
 import { FC, HTMLAttributes, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 
-import { Tooltip } from "@dndbeyond/character-common-components/es";
 import {
   SpellUtils,
   EntityUtils,
@@ -12,6 +11,7 @@ import {
   characterEnvSelectors,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Tooltip } from "~/components/Tooltip";
 import { useCharacterTheme } from "~/contexts/CharacterTheme";
 import { useUnpropagatedClick } from "~/hooks/useUnpropagatedClick";
 
@@ -77,23 +77,29 @@ export const SpellName: FC<Props> = ({
         {...props}
       >
         {showExpandedType && expandedInfoText !== "" && (
-          <Tooltip
-            title={expandedInfoText}
-            className={styles.expanded}
-            isDarkMode={isDarkMode}
-          >
-            +
-          </Tooltip>
+          <>
+            <span
+              data-tooltip-id="expandedInfoText"
+              data-tooltip-content={expandedInfoText}
+              className={styles.expanded}
+            >
+              +
+            </span>
+            <Tooltip id="expandedInfoText" />
+          </>
         )}
         {SpellUtils.getName(spell)}
         {SpellUtils.isCustomized(spell) && (
-          <Tooltip
-            title="Spell is Customized"
-            className={styles.customized}
-            isDarkMode={isDarkMode}
-          >
-            *
-          </Tooltip>
+          <>
+            <span
+              data-tooltip-id="spellIsCustomized"
+              data-tooltip-content="Spell is Customized"
+              className={styles.customized}
+            >
+              *
+            </span>
+            <Tooltip id="spellIsCustomized" />
+          </>
         )}
         {showIcons && SpellUtils.getConcentration(spell) && (
           <ConcentrationIcon