工具提示窗口在添加更多文本时改变高度和宽度
Tooltip window changing height and width when more text is added
我试图使这个工具提示与文本动态(所以当有更少的文本-更小的窗口)，但它不适合我。我需要这个工具提示改变自己的大小，当更多的文本添加和收缩自己，当只有几个字。
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>
<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>从工具提示css中删除width属性应该可以工作。如果你想让它在调整窗口大小时适应，也可以删除高度
你想达到这样的目标吗
.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>在你的代码中，你有一个固定的值为你的工具提示宽度和高度。
如果你需要使toolip的宽度和高度根据其内容动态调整，你应该删除width和height的值。
根据你的评论编辑。
如果你需要在工具提示和视图端口之间保持一些空间，你可以使用margin属性，这将允许在你的工具提示的每一面都有一些空间。
试着像下面的例子一样注释掉:
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;
}
相关文章：
- 在按钮改变高度后使标题保持不变
- 当改变比例按钮具有不同的高度时
- 为什么我的图像高度没有改变
- 高度在 jQuery 中的 resize(） 上不会改变
- 如何使JQuery同位素与改变高度的元素一起工作
- 改变高度会带来问题
- 有什么方法可以改变appequests对话框的高度吗
- 如何改变JS库highcharts的高度和工具提示宽度
- Iframe的高度改变，如果点击
- Jquery动画不改变高度自动
- 在动画开始时改变元素高度(Angular)
- 如何改变宽度和高度的文本区域，根据其内容的大小
- 我每隔几秒钟就会改变图像，同时也会以100%的高度和宽度响应缩放图像
- 当滚动条到达页面顶部时，它会改变高度
- 这段代码有什么问题?我试图改变每个部分的高度到窗口的高度
- Angular.js:在加载时改变Iframe的高度;改变的内容
- 不能通过javascript改变图像的宽度和高度
- 根据窗口内部高度改变Div高度
- 使用元素的高度改变页面滚动菜单的CSS
- 动画高度改变在Bootstrap 3旋转木马
