Tooltip

by onejdc

HTML

<div role="tooltip" id=":rh8f:" class="MuiPopper-root MuiTooltip-popper css-112l0a2" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; " data-popper-placement="top">
   <div class="MuiTooltip-tooltip MuiTooltip-tooltipPlacementTop css-1spb1s5" style="opacity: 1; transition: opacity cubic-bezier(0.4, 0, 0.2, 1);">
      <div class="ItemTooltipText_itemTooltipText__zFq3A">
         <div class="ItemTooltipText_name__2JAHA">
            <span>Crimson Sword</span>
         </div>
         <div><span>Amount: 1</span></div>
         <div>Sell Price: 13,824</div>
         <div style="color: #804600;">Daily average price: 60k / 50k (60k / 50k)</div>
         <div class="ItemTooltipText_equipmentDetail__3sIHT">
            <div>Type: Main Hand</div>
            <div>
               <div>Requires: 50 Attack</div>
               <div>Requires: 50 Power</div>
            </div>
            <div class="EquipmentStatsText_equipmentStatsText__djKBS">
               <div>
                  <div class="EquipmentStatsText_stat__27Sus"><span>Combat Style: </span><span>Slash</span></div>
                  <div class="EquipmentStatsText_stat__27Sus"><span>Damage Type: </span><span>Physical</span></div>
                  <div class="EquipmentStatsText_stat__27Sus"><span>Attack Interval: </span><span>3s</span></div>
                  <div class="EquipmentStatsText_stat__27Sus"><span>Slash Accuracy: </span><span>+64%</span></div>
                  <div class="EquipmentStatsText_stat__27Sus"><span>Slash Damage: </span><span>+72%</span></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="NavigationBar_navigationLink__3eAHA NavigationBar_active__3R-QS">
<div class="NavigationBar_nav__3uuUl">
<div class="NavigationBar_contentContainer__1x6WS">
<div class="NavigationBar_textContainer__7TdaI"><span class="NavigationBar_label__1uH-y">Combat</span><span class="NavigationBar_level__3C7eR">40</span></div>
</div>
</div>
<div...

CSS

div.NavigationBar_subSkills__37qWb {
	height: 300px;
	background-color:purple;
	width: 500px;
	overflow:scroll;
}

JavaScript

let playerStats = {};
const statsElements = document.querySelectorAll("div[class^='NavigationBar_textContainer']");
statsElements.forEach(el => {
	// first span is the label, last span is the value.
	let nodes = el.querySelectorAll('span');
	playerStats[nodes[0].textContent] = Number.parseInt(nodes[nodes.length-1].textContent);
})

function highlightLowValues() {
const requiredElement = document.querySelectorAll("div[class^='ItemTooltipText_equipmentDetail'] > div > div");
/* const defaultBackgroundColor = window.getComputedStyle(elems[0]).getPropertyValue('background-color'); */
requiredElement.forEach(el => {
	const matchPattern = /\d+/g;
	if (el.textContent.includes("Requires:")) {
		el.style.backgroundColor = 'blue';
		
		let targetStat = el.textContent.split(" ").pop();
		let targetStatValue = el.textContent.match(matchPattern);
		
		/* console.log(targetStat, targetStatValue) */;
		if (playerStats[targetStat] < Number.parseInt(targetStatValue)) {
			el.style.backgroundColor = 'red';
			el.style.color = 'white';
		}
	}
})
}


document.addEventListener('mouseover',listenForIconMouseOver);
function listenForIconMouseOver(ev) {
    const t = ev.target;
    let hasClass = false;
    for (let x = 0; x < t.classList.length;x++) {
        if (t.classList.item(x).includes('Icon_icon')) { hasClass=true;break;}
    }
    if (hasClass) {
        hilightLowValues();
    }
};