テキストが追加されたときの高さと幅の変更ツールチップウィンドウ

Question

このツールチップをテキストで動的にしようとしました。より多くのテキストが追加されたときに、それ自体のサイズを変更するには、このツールチップが必要です。 Jsfiddleの例。

PS：私はJSを使いたくないのですが、必要ならば私はそれで生きることができます。

JsFiddle：https://jsfiddle.net/d4m5hj6f/

.content { 
 
    position: static; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    position: relative; 
 
    margin-top: 40px; 
 
} 
 

 
th, td { 
 
    border:1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
th { 
 
    background-color: #eff0f0; 
 
} 
 

 
td { 
 
    background-color: #eed6b1; 
 
    height: 45px; 
 
} 
 

 
tr:nth-child(even) td { 
 
    background-color: #FFF1E1; 
 
} 
 

 
table { 
 
    table-layout: fixed; 
 
    min-width: 2000px; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    margin-left: 5px; 
 
} 
 

 
.DZ { 
 
    text-align: center; 
 
} 
 

 

 
tr:hover td { 
 
    background-color: #ccc; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #e5e5e5; 
 
} 
 

 
tr td { 
 
    border-right: 1px solid #a5a5a5; 
 
} 
 

 
.Bezborder { 
 
    border-right: 1px solid black; 
 
} 
 

 
.ht:hover .tooltip { 
 
    display: block; 
 
} 
 

 
.tooltip { 
 
    position:absolute; 
 
    display: none; 
 
    background-color: #fafbb8; 
 
    border: 1px solid black; 
 
    border-radius: 4px; 
 
    margin-left: 28px; 
 
    padding: 10px; 
 
    position:absolute; 
 
    z-index: 1000; 
 
    width: 680px; 
 
    height: 50px; 
 
    font-weight: bold; 
 
}

<div class="content"> 
 
    <div class="header"> 
 
    </div> 
 

 
    <a name="172016"> 
 
    <!--1. riadok H--> 
 
    <table cellspacing="0" cellpadding="0" border="0"> 
 
     <tr> 
 
     <th width="50px">C. u.</th> 
 
     <th width="30px">Zobrazit</th> 
 
     <th width="30px">Typ</th> 
 
     <th width="220px">Look here ---></th> 
 
     <th width="650px">hover Under this</th> 
 
     <th width="130px">System</th> 
 
     <th width="100px">Dopad/Symptom</th> 
 
     <th width="100px">Dátum zadania</th> 
 
     <th width="100px">Dátum vzniku</th> 
 
     <th width="100px">Datum Verifikacie</th> 
 
     <th width="80px">Ukoncenie</th> 
 
     <th width="100px">Dátum</th> 
 
     </tr> 
 
     <!--2. riadok D--> 
 
     <tr> 
 
     <td style="text-align:center">100</td> 
 
     <td style="text-align:center">X</td> 
 
     <td style="text-align:center">C </td> 
 
     <td>DOBRIKOVA/DURACKA</td> 
 
     <td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">Tooltip windows need to change with text, more text - larger window, less text = smaller windows.</span></td> \t 
 
     <td>CORAIL/CONSO</td> 
 
     <td></td> 
 
     <td class="DZ">06/07/2016</td> 
 
     <td class="DZ">06/07/2016</td> 
 
     <td class="DZ">06/07/2016</td> 
 
     <td style="text-align:center">OK</td> 
 
     <td class="Bezborder" style="text-align:center">07/07/2016</td> 
 
     </tr> 
 
     <!--3. riadok D--> 
 
     <tr> 
 
     <td style="text-align:center">101</td> 
 
     <td style="text-align:center">X</td> 
 
     <td style="text-align:center">C </td> 
 
     <td>DOBRIKOVA/DURACKOVA</td> 
 
     <td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">You see there is a big tooltip window space under this.</span></td> 
 
     <td>CORAIL/CONSO</td> 
 
     <td></td> 
 
     <td class="DZ">06/07/2016</td> 
 
     <td class="DZ">06/07/2016</td> 
 
     <td class="DZ">06/07/2016</td> 
 
     <td style="text-align:center">OK</td> 
 
     <td class="Bezborder" style="text-align:center">07/07/2016</td> 
 
     </tr> 
 
    </table> 
 
    </a> 
 
</div>

Answer 1

ツールチップのCSSのwidthプロパティが動作するはずの削除します。ウィンドウのサイズを変更するときに高さを調整したい場合は、高さも削除します。

Answer 2

あなたはこの

.content { 
 
position: static; 
 
} 
 

 
.header { 
 
text-align: center; 
 
position: relative; 
 
margin-top: 40px; 
 
} 
 

 

 
th, td{ 
 
border:1px solid black; 
 
overflow: hidden; 
 
} 
 

 
th{ 
 
background-color: #eff0f0; 
 
} 
 

 
td{ 
 
background-color: #eed6b1; 
 
height: 45px; 
 
} 
 

 
tr:nth-child(even) td { 
 
background-color: #FFF1E1; 
 
} 
 

 
table{ 
 
table-layout: fixed; 
 
min-width: 2000px; 
 
border-collapse: collapse; 
 
width: 100%; 
 
margin-left: 5px; 
 
} 
 

 
.DZ { 
 
text-align: center; 
 
} 
 

 

 
tr:hover td{ 
 
background-color: #ccc; 
 
} 
 

 
tr:nth-child(even) { 
 
background-color: #e5e5e5; 
 
} 
 

 
tr td{ 
 
border-right: 1px solid #a5a5a5; 
 
} 
 

 
.Bezborder { 
 
border-right: 1px solid black; 
 
} 
 
.ht:hover .tooltip { 
 
display: block; 
 
} 
 

 
.tooltip { 
 
position:absolute; 
 
display: none; 
 
background-color: #fafbb8; 
 
border: 1px solid black; 
 
border-radius: 4px; 
 
margin-left: 28px; 
 
padding: 10px; 
 
position:absolute; 
 
z-index: 1000; 
 
width: 680px; 
 
/* height: 50px;*/ 
 
font-weight: bold; 
 
}

<div class="content"> 
 
    <div class="header"> 
 
    </div> 
 

 
<a name="172016"> 
 
    <!--1. riadok H--> 
 
<table cellspacing="0" cellpadding="0" border="0"> 
 
<tr> 
 
<th width="50px">C. u.</th> 
 
<th width="30px">Zobrazit</th> 
 
<th width="30px">Typ</th> 
 
<th width="220px">Cislo/Meno</th> 
 
<th width="650px">Popis</th> 
 
<th width="130px">System</th> 
 
<th width="100px">Dopad/Symptom</th> 
 
<th width="100px">Dátum zadania</th> 
 
<th width="100px">Dátum vzniku</th> 
 
<th width="100px">Datum Verifikacie</th> 
 
<th width="80px">Ukoncenie</th> 
 
<th width="100px">Dátum</th> 
 
</tr> 
 
<!--2. riadok D--> 
 
<tr> 
 
<td style="text-align:center">100</td> 
 
<td style="text-align:center">X</td> 
 
<td style="text-align:center">C </td> 
 
<td>DOBRIKOVA/DURACKA</td> 
 
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>  
 
<td>CORAIL/CONSO</td> 
 
<td></td> 
 
<td class="DZ">06/07/2016</td> 
 
<td class="DZ">06/07/2016</td> 
 
<td class="DZ">06/07/2016</td> 
 
<td style="text-align:center">OK</td> 
 
<td class="Bezborder" style="text-align:center">07/07/2016</td> 
 
</tr> 
 
<!--3. riadok D--> 
 
<tr> 
 
<td style="text-align:center">101</td> 
 
<td style="text-align:center">X</td> 
 
<td style="text-align:center">C </td> 
 
<td>DOBRIKOVA/DURACKOVA</td> 
 
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td> 
 
<td>CORAIL/CONSO</td> 
 
<td></td> 
 
<td class="DZ">06/07/2016</td> 
 
<td class="DZ">06/07/2016</td> 
 
<td class="DZ">06/07/2016</td> 
 
<td style="text-align:center">OK</td> 
 
<td class="Bezborder" style="text-align:center">07/07/2016</td> 
 
</tr>

Answer 3

のような達成に何かしようとしていますコードには、ツールチップの幅と高さの修正値があります。

コンテンツでツールチップの幅と高さを動的に調整する必要がある場合は、widthとheightの値を削除する必要があります。

あなたのコメントに基づいて編集してください。

ツールチップとビューポートの間にスペースを確保する必要がある場合は、marginプロパティを使用できます。これにより、ツールチップの各d面にスペースができるようになります。

は続くの例のようにコメントアウトしてください：

https://jsfiddle.net/d4m5hj6f/6/

.tooltip { 
    position:absolute; 
    display: none; 
    background-color: #fafbb8; 
    border: 1px solid black; 
    border-radius: 4px; 
    margin: 28px; 
    padding: 10px; 
    position:absolute; 
    z-index: 1000; 
    /*width: 680px;*/ 
    /*height: 50px;*/ 
    font-weight: bold; 
}