New tooltip implementation.

package-lock.json

@@ -1267,6 +1267,15 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@hypnosphi/create-react-context": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
+      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -5323,6 +5332,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -7339,6 +7356,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "optional": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -11598,6 +11620,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -13138,6 +13165,20 @@
         "utils": "^0.3.1"
       }
     },
+    "react-popper": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
+      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "@hypnosphi/create-react-context": "^0.3.1",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -13324,6 +13365,29 @@
         }
       }
     },
+    "react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "requires": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "reactstrap": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.10.0.tgz",
+      "integrity": "sha512-MsFUB/fRZj6Orf8Mxc93iYuAs+9ngnFmy2cfYlzkmc4vi5oM4u6ziY/DsO71lDG3cotxHRyS3Flr51cuYv+IEQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^1.3.6",
+        "react-transition-group": "^2.3.1"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -15582,6 +15646,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

package.json

@@ -29,6 +29,7 @@
     "react-scripts": "4.0.3",
     "react-toggle": "^4.1.2",
     "react-tooltip": "^4.2.21",
+    "reactstrap": "^8.10.0",
     "request": "^2.79.0",
     "save": "^2.4.0",
     "typescript": "^4.4.3",

src/TestPanel.js

@@ -8,6 +8,7 @@ import axios from 'axios';
 import Helmet from 'react-helmet'
 import ReactPlaceholder from 'react-placeholder';
 import "react-placeholder/lib/reactPlaceholder.css";
+import { UncontrolledTooltip } from 'reactstrap';
 
 import { useLocation,useHistory,useParams,matchPath } from 'react-router'
 
@@ -968,10 +969,9 @@ function deepCopySkills(skillData) {
   }}
   displayFunction={(item)=>{
   return<div className={"itemWrapper r"+item[WEAPON_WEAPON].rarity} onClick={()=>{setSelectedWeapon(item);setWeaponSelectWindowOpen(false)}}><div className="itemImgWrapper"><img alt="" src={DisplayIcon(item[WEAPON_EXISTENCE_DATA]?.icon)} /></div><div className="itemNameWrapper rifle">{GetSpecialWeaponName(item)}</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">{item[WEAPON_WEAPON].atk}</span>
-    
+        <span className="pot" id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id}>{item[WEAPON_POTENTIAL].name}</span>
-    <ExpandTooltip id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id} tooltip={<>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><React.Fragment key={i}>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it,ii)=><React.Fragment key={ii}>{it}<br/> </React.Fragment>):<React.Fragment key={i}/>}</React.Fragment>)}</>}>
+    <ExpandTooltip target={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id}>
-
+      <>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><React.Fragment key={i}>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it,ii)=><React.Fragment key={ii}>{it}<br/> </React.Fragment>):<React.Fragment key={i}/>}</React.Fragment>)}</>
-    <span className="pot">{item[WEAPON_POTENTIAL].name}</span>
     </ExpandTooltip></div></div>}}
   />
   

src/components/ExpandTooltip.js

@@ -1,17 +1,10 @@
-import ReactTooltip from 'react-tooltip' //https://wwayne.github.io/react-tooltip/
+import { UncontrolledTooltip } from "reactstrap"
 
 function ExpandTooltip(p) {
 
-	return <><span data-tip data-tip-disable={p.tooltip?.length===0} data-for={p.id}>{p.children}</span><ReactTooltip id={p.id} className="xTooltip" overridePosition={ (
+	return <UncontrolledTooltip className="xTooltip" fade={true} placement="bottom" {...p}>
-    { left, top },
+      {p.children}
-    currentEvent, currentTarget, node) => {
+    </UncontrolledTooltip>
-  const d = document.documentElement;
-  left = Math.min(d.clientWidth - node.clientWidth, left);
-  top = Math.min(d.clientHeight - node.clientHeight, top);
-  left = Math.max(0, left);
-  top = Math.max(0, top);
-  return { top, left }
-} }>{p.tooltip}</ReactTooltip></>
 }
 
 export {ExpandTooltip}

src/style.css

@@ -508,20 +508,16 @@ overflow-y: initial;
 }
 .tooltip {
 	cursor: help;
-}
-.tooltip span {
 	color: white;
 	font-size:10pt;
-	visibility: hidden;
 	width: 200px;
 	background-color: rgba(38,53,63,0.9);
 	text-align: left;
 	/*border-radius: 6px;*/
 	padding: 5px;
-	/* Position the tooltip */
-	position: absolute;
 	white-space: normal;
 	left: 1em;
+	animation: fadeIn 0.15s;
 }
 .xTooltip {
 	margin: 0 10px 0 0;
@@ -530,6 +526,7 @@ overflow-y: initial;
 	color: white;
 	font-size:10pt;
 	text-align: left;
+	animation: fadeIn 0.15s;
 }
 
 [class*="BaseToolTop"] {

touhous

@@ -1,2 +1,3 @@
 【東方 Touhou Vocal】Sentence - EURO mix【Sliver Forest】
 [Touhou Vocal] [GET IN THE RING] Last Remote～Blaze mix (spanish & english subtitles)
+「Touhou Vocal」[FELT] Innocent Eyes (Eris's double helix mix)