h1 Tooltip is Much Higher Than on an h4 - html

Question

I have a tooltip and I have it on an h1 and an h4. Here is what it looks like on the h4:
And here is what an h1 looks like:
The tooltip is much higher up on the h1 than the h4. Basically, I want both of them to look exactly the same.
Here is my code:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
font-size: 16px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class = "tooltip"><span id = "htmlHub" class = "contact">programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id = "rockPaperScissors" class = "programs tooltip"><h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>
Thanks in advance!

Answer 1

This is mostly because the h1 has a large top/bottom margin, but also affecting the position is the line-height. To have it match the way it displays over your span, just set the margin to 0 and optionally, the line-height to 1 or whatever works for your layout.
h1 {
margin: 0;
line-height: 1;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
font-size: 16px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class = "tooltip"><span id = "htmlHub" class = "contact">programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id = "rockPaperScissors" class = "programs tooltip"><h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>

Answer 2

Instead of using both left and bottom as percentages, I'd recommend simply using a negative pixel-based top. I've gone with -35px in my example.
Note that depending on where exactly you want the tooltip to sit horizontally, you will need to use margin-left. I've just gone with -100px here, but you might want to make that relative.
This will make the <h1> tooltip slightly higher than the <h4> tooltip:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
/*visibility: hidden;*/
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
margin-left: -100px;
font-size: 16px;
top: -35px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class="tooltip"><span id="htmlHub" class="contact">Programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id="rockPaperScissors" class="programs tooltip">
<h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>
Optionally, you can use the line-height attribute to override the differing line heights for the headings. Setting this to 0 for both elements ensures that the tooltip will remain at the same height for both headings:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
/*visibility: hidden;*/
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
margin-left: -100px;
font-size: 16px;
top: -35px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
h1,
h4 {
line-height: 0;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class="tooltip"><span id="htmlHub" class="contact">Programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id="rockPaperScissors" class="programs tooltip">
<h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>
Hope this helps! :)