I used to be making an attempt to finish a easy activity on Javascript.data and I am getting my ass crushed by an “a” tag. The duty is to easily place (and take away) a tooltip above the component on hover and I’ve no downside with the roof or the home, however when I attempt to place the field above the hyperlink, it breaks and I am unable to remedy it for my life.
I am asking for assist right here as a result of the answer on the positioning makes use of place:fastened whereas I am making an attempt to make use of place:relative and easily mimicking the answer will not assist me studying something. The issue is all on line 77 and 78, when I attempt to assign tooltip.fashion.left and tooltip.fashion.prime.
If I attempt to assign it usign a literal (for instance, “-58px”), it really works. In any other case, it simply defaults to no matter worth the tooltip on “home” would have. I attempted to see what’s going on with some tactical alerts and it drove me insane. It exhibits me that if I exploit a computed worth, it defaults and if I exploit a literal, it’s going to work usually.
I would like somebody to clarify what’s going on and presumably some perception (stating if I bought mistaken how place:absolute works, how component dimension properties works or one thing on this nature)
The code (I solely made the half that’s within the script tag on line 64, the remainder is from the authors of the duty):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<fashion>
physique {
peak: 2000px;
/* the tooltip ought to work after web page scroll too */
}
.tooltip {
place: fastened;
z-index: 100;
padding: 10px 20px;
border: 1px strong #b3c9ce;
border-radius: 4px;
text-align: heart;
font: italic 14px/1.3 sans-serif;
colour: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
#home {
margin-top: 50px;
width: 400px;
border: 1px strong brown;
}
#roof {
width: 0;
peak: 0;
border-left: 200px strong clear;
border-right: 200px strong clear;
border-bottom: 20px strong brown;
margin-top: -20px;
}
p {
text-align: justify;
margin: 10px 3px;
}
</fashion>
</head>
<physique>
<div data-tooltip="Right here is the home inside" id="home">
<div data-tooltip="Right here is the roof" id="roof"></div>
<p>As soon as upon a time there was a mom pig who had three little pigs.</p>
<p>The three little pigs grew so massive that their mom stated to them, "You're too massive to stay right here any longer. You need to go and construct homes for yourselves. However take care that the wolf doesn't catch you."</p>
<p>The three little pigs set off. "We'll take care that the wolf doesn't catch us," they stated.</p>
<p>Quickly they met a person. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Learn on…">Hover over me</a></p>
</div>
<script>
home.onmouseover= operate(occasion){
let goal= occasion.goal.closest('[data-tooltip]');
let tooltip= doc.createElement('div');
tooltip.textContent= goal.dataset.tooltip;
tooltip.classList.add("tooltip");
goal.append(tooltip);
if(!tooltip.parentElement.fashion.place){
tooltip.parentElement.fashion.place= 'relative';
}
tooltip.fashion.place= 'absolute';
tooltip.fashion.prime= "-"+(tooltip.offsetHeight+5)+"px";
tooltip.fashion.left= -target.clientLeft+(goal.offsetWidth-tooltip.offsetWidth)/2+"px";
//alert("-"+(tooltip.offsetHeight+5)+"px");
//alert(tooltip.fashion.prime);
}
home.onmouseout= operate(occasion){
let goal= occasion.goal.closest('[data-tooltip]');
tooltips= goal.querySelectorAll('.tooltip');
for(tooltip of tooltips){
tooltip.take away();
}
}
</script>
</physique>
</html>
Thanks already 🙂