Tooltip window changing height and width when more text is added

Question

i tried to make this tooltip dynamic with the text (so when there is less text - smaller window) but it didn't work for me. I need this tooltip to change size of itself when more text is added and shrink itself when there is only a few words. Example in Jsfiddle.

PS: I don't like to use JS, but if it's necessary I can live with that.

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

Removing the width property from the tooltip css should work. Remove the height too if you want it to adapt when resizing the window.

Answer 2

Are you trying to achieved something like this

 .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

In your code you have a fix value for your tooltip width and height.

If you need to make the toolip width and height adjusted dynamically by its content you should remove the width and height value.

Edit based on your comment.

If you need to keep some space between the tooltip and your view port you can use margin property, this will allow some space on each d side of your tooltip.

Try to comment out as in the follow example:

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;
}