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

Prevent tooltip from drifting outside window

Browse Source
This commit is contained in:
Joshua Sigona 2021-08-10 22:35:50 +09:00
parent 9131a5003c
commit cf1b131403
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/TestPanel.js
View File

@ -70,13 +70,26 @@ function PageControl(p) {
for (var i=0;i<p.pages;i++) {
pages.push(<PageControlButton pageName={p.pageNames?p.pageNames[i]:undefined} currentPage={p.currentPage} setCurrentPage={p.setCurrentPage} page={i+1}/>)
}
console.log(JSON.stringify(p.children))
if (p.children) {
<li className="pagecontroldetails">{p.children}</li>
}
return pages.length>0&&<ul className="boxmenu">
{pages.map((page,i)=>{return <React.Fragment key={i}>{page}</React.Fragment>})}
</ul>
}
function ExpandTooltip(p) {
return <><span data-tip data-for={p.id}>{p.children}</span><ReactTooltip id={p.id} className="xTooltip">{p.tooltip}</ReactTooltip></>
return <><span data-tip data-for={p.id}>{p.children}</span><ReactTooltip id={p.id} className="xTooltip" overridePosition={ (
{ left, top },
currentEvent, currentTarget, node) => {
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></>
}
function Class(p) {
@ -433,7 +446,7 @@ useEffect(()=>{
<div className="box">
<div className="boxTitleBar">
<h1>Damage Stats</h1></div>
<PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/>
<PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}>Testing</PageControl>
<table className="basicInfo">
<tbody>
{statPage===1?<>