sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement beautiful tooltips.

Browse Source
This commit is contained in:
sigonasr2, Sig, Sigo 2021-08-10 00:55:27 +00:00
parent 9aae32d1a4
commit 51a81bfb0e
3 changed files with 60 additions and 21923 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21961
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -21,8 +21,8 @@
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.4.3", "react-router-hash-link": "^2.4.3",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-simple-tooltip": "^2.6.3",
"react-toggle": "^4.1.2", "react-toggle": "^4.1.2",
"react-tooltip": "^4.2.21",
"typescript": "^4.3.5", "typescript": "^4.3.5",
"web-vitals": "^1.1.2" "web-vitals": "^1.1.2"
}, },

20
src/TestPanel.js
View File

@ -1,5 +1,5 @@
import React, { useEffect,useState,useRef } from 'react'; import React, { useEffect,useState,useRef } from 'react';
import Tooltip from 'react-simple-tooltip' //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/ import ReactTooltip from 'react-tooltip' //https://wwayne.github.io/react-tooltip/
import Modal from 'react-modal' import Modal from 'react-modal'
/** /**
@ -75,19 +75,7 @@ function PageControl(p) {
} }
function ExpandTooltip(p) { function ExpandTooltip(p) {
return <Tooltip return <><span data-tip data-for={p.id}>{p.children}</span><ReactTooltip id={p.id} className="xTooltip">{p.tooltip}</ReactTooltip></>
background="rgba(38,53,63,0.95);"
border="0"
arrow={10}
fadeDuration={200}
fadeEasing="linear"
fixed={false}
offset={0}
padding={16}
placement="top"
radius={5}
zIndex={1}
className="xTooltip" content={p.tooltip}>{p.children}</Tooltip>
} }
function Class(p) { function Class(p) {
@ -439,6 +427,8 @@ useEffect(()=>{
</div> </div>
</div> </div>
<ExpandTooltip id="test" tooltip="Hello!">Testing</ExpandTooltip>
<SelectorWindow title="Class Select" modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}>ez pz</SelectorWindow> <SelectorWindow title="Class Select" modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}>ez pz</SelectorWindow>
<SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData} <SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
@ -479,7 +469,7 @@ useEffect(()=>{
} }
}} }}
displayFunction={(item)=>{ displayFunction={(item)=>{
return <li className={"itemwep r"+item[1].rarity}><div class="itemWeaponWrapper"><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em></div><br /><span className="atk">{item[1].atk}</span> <ExpandTooltip tooltip={<>{item[3].map((pot,i)=><>{(i!==0)&&<br/>}{pot.name}: {pot.description.split("\\n").map((it)=><>{it}<br/> </>)}</>)}</>}> return <li className={"itemwep r"+item[1].rarity}><div class="itemWeaponWrapper"><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em></div><br /><span className="atk">{item[1].atk}</span> <ExpandTooltip id={"mouseover-tooltip"+item[0].id+"_"+item[1].id+"_"+item[2].id+"_"+item[3].id} tooltip={<>{item[3].map((pot,i)=><>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it)=><>{it}<br/> </>):<></>}</>)}</>}>
<span className="pot">{item[2].name}</span> <span className="pot">{item[2].name}</span>
</ExpandTooltip></li>}} </ExpandTooltip></li>}}