Question

我试图用文本使这个工具提示动态化（所以当文本较少 - 窗口较小时）但它对我不起作用。我需要这个工具提示来在添加更多文本时更改自身的大小，并在只有几个单词时缩小自身。 Jsfiddle中的示例。

PS：我不喜欢使用JS，但如果有必要，我可以忍受。

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

$product_collection = Mage::getModel('catalog/product')->getCollection();

foreach($product_collection as $product) {

    $new_price = $product->getPrice(); // Update price here.

    $product->setPrice($new_price)
           ->save();
}

Answer 1

从工具提示css中删除width属性应该有效。如果您希望在调整窗口大小时适应高度，请移除高度。

Answer 2

你是否想要取得这样的成就

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在您的代码中，您有工具提示宽度和高度的修正值。

如果您需要根据内容动态调整工具包宽度和高度，则应移除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;
}

添加更多文本时，工具提示窗口会更改高度和宽度

3 个答案: