Question

我在JQuery UI选项卡中的DataTables中有Powertips。我将工具提示设置为跟随鼠标（因此我只能更改保证金的位置）。工具提示仅显示在现有内容上，如果表格下方没有任何内容，则工具提示将更高，以适应现有内容。

工具提示的位置必须设置为绝对位置，否则无法正常工作。

更改仓位或保证金是行不通的，因为结果会因表格中的条目数而有所不同。我尝试将UI标签位置更改为相对位置，但这并不起作用。我不认为这是div盒子的定位问题，因为它可能出现在div之外，而不是没有内容的地方。

我没有z-index的问题，工具提示会向上移动，以便它可以适应现有内容。

这是我的布局

<body>
<div id="tabs">
<ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
</ul>
<div id="tabs-1">
<table id="table_id" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th id="column-icon">Headers</th>...</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="" class="tooltips icon-small 1"><img src="icon.png" width="40" /></a></td>
        <td id="row-name"><a href="" class="tooltips 1">Name</a></td>
        <td>Content</td>...</td>
    </tr>
</tbody>
</table>
</div>
<div id="tabs-2">
    <p>tab two content.</p>
</div>
</div>
</body>

我没有为Tabs设置标准div元素。我尝试添加位置：相对;但它没有效果。

#tabs {
    border-radius: 0px 0px 2px 2px;
    padding-top:10px;
    background-color:#242424;
    width:1200px;
    padding-bottom:37px;
}

类工具提示正在使用此javascript

$('.tooltips').powerTip({
    followMouse: true,
});

并且第1类是powertip工具提示内容。 icon-small只是一些css悬停叠加的类

我获得所需效果的唯一时间是在任何元素之外的末尾添加大量内容（在本例中为中断）。

我正在使用最新的JQuery，JQuery UI，JQuery DataTables和JQuery Powertips。

显示Powertip工具提示不会显示内容不足

0 个答案: