h1ツールチップがh4よりもはるかに高いです

Question

私はtooltipを持っており、h1とh4にあります。ここでは、h4上で次のようになります。

そして、ここではh1は、次のようになります。

tooltipはh4よりh1最大はるかに高いです。基本的に、私は両者がまったく同じに見えるようにしたい。事前に

.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> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<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> 
 
&nbsp; 
 
<!-- 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 1

これは主にh1が大きなトップ/ボトムがmarginであることに起因しますが、位置にも影響するのはline-heightです。 spanに表示する方法と一致させるには、marginを0に設定し、オプションでline-height〜1に設定するか、レイアウトに適したものを設定します。

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> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<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> 
 
&nbsp; 
 
<!-- 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

代わりパーセンテージとしてleftとbottomの両方を使用して、私は負のピクセルベースtopを用いて単にお勧めします。私の例では-35pxに行きました。

正確にツールチップを水平に置く場所によっては、margin-leftを使用する必要があります。私はちょうど-100pxと一緒に行ったことがありますが、あなたはその親戚を作りたいかもしれません。

.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> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<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> 
 
    &nbsp; 
 
    <!-- 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>

オプションで、見出しの異なる行の高さを上書きするline-height属性を使用することができます。

これは<h4>ツールチップよりわずかに高い<h1>ツールヒントになります。

.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> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<p></p> 
 
&nbsp; 
 
<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> 
 
    &nbsp; 
 
    <!-- 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>

は、この情報がお役に立てば幸いです：両方の要素のために0に設定すると、ツールチップには、両方の見出しの同じ高さのままであることを保証します！ :)