2017-12-07 1 views
0

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

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

+0

は、私はあなたの青写真を見ることができ、それが動作しますあなたのspanタグにstyle="width: auto;"を追加しますか? – zynkn

+0

私は質問のあるコードを掲載しました。それ以外に何が必要ですか? – jcvamp

+0

私はちょうどあなたが作りたいものを見るために写真を望んでいます。 – zynkn

答えて

0

<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> 
+0

応答をありがとう。 'width:auto;'を追加する違いはありません。 – jcvamp

関連する問題