CSS의 각 단어를 줄 바꿈하지 말고 툴팁 범위를 중지하십시오.

Question

특정 링크가 맴돌 때 나타나는 툴팁을 만들었습니다. 툴팁은 클래스 tooltiptext의 스팬이고 링크는 gloss이라는 ID를 사용합니다.

문제는 툴팁이 그 안에있는 가장 긴 단어의 너비가된다는 것입니다. 나는 최소 너비를 설정하려고 시도했지만 일부는 툴팁이 단지 몇 마디이고 다른 것은 전체 단락이므로 비실용적입니다. 텍스트 단락이있는 경우 모든 텍스트가 같은 줄에있는 것을 원하지 않으므로 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>