ツールチップCSSを使用しているときに水平線の間隔を減らすには

Question

見出しに上下の水平線を追加する必要があります。私もtooltip CSSを使用していますが、見出しの上部と下部のスペースが増えます。どのようにスペースを減らすことができます。ありがとう！

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
     
 

 
    /* Position the tooltip */ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
} 
 

 
hr{ 
 
    padding: 0px; 
 
    margin: 0px;  
 
    }

<hr> 
 
<div class="tooltip"><h1 >MAIN HEADING</h1> 
 
<span class="tooltiptext">Help text goes here</span> 
 
</div> 
 
<hr>

Answer 1

あなたはCSSプロパティを変更することができます：position: relative;position: absolute;へ（注：ツールチップがラインの下に表示されます） - あなたはで実際のデモを見ることができます：これは役立つかもしれhttps://jsfiddle.net/a7w2ve1f/

・ホープ。