CSSの各単語の折り返しからツールチップのスパンを停止する

Question

特定のリンクが上に乗ったときに表示されるツールチップを作成しました。ツールチップはクラスtooltiptextのスパンであり、リンクはID glossを使用します。

問題は、ツールチップがその中で最も長い単語の幅になることです。私は最小幅を設定しようとしましたが、ツールチップのいくつかがほんの数ワードであるのに対して、他のものは全段落であるため実用的ではありません。テキストの段落がある場合、すべてのテキストが同じ行にあることを望んでいないので、white-space: nowrapも実用的ではありません。

アイデア？

#gloss { 
 
    border-bottom: solid 1pt blue; 
 
    position: relative; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
#gloss:hover { 
 
    text-decoration: none; 
 
} 
 

 
.tooltiptext { 
 
    visibility: hidden; 
 
    text-align:center; background-color:#8899ff; 
 
    color: #000; 
 
    border-radius: 6px; 
 
    box-shadow: 2px 2px 1px #aaa; 
 
    border: 1px solid #000; 
 
    padding: 5px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
    opacity: 0; 
 
    transition: all 0.15s ease; 
 
    pointer-events: none; 
 
} 
 

 
#gloss:hover .tooltiptext { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<br><br><br><br><br> 
 
<!--<br>s to move the paragraph down--> 
 
<p>This is some text, with a <a href="#" id="gloss">link<span class="tooltiptext">Here is some information about the link.</span></a>. And the text continues.</p>

Answer 1

は

<br><br><br><br><br> 
<!--<br>s to move the paragraph down--> 
<p>This is some text, with a <a href="#" id="gloss">link<span style="width: auto;" class="tooltiptext">Here is some information about the link</span></a>. And the text continues.</p>