6

构架

客观的

我想拥有powerTip另一个人的内心powerTip。

当前结果

第一个提示 ( tip1) 显示正常，但第二个 ( tip2) 根本不显示。工作的CSS tip2，底部边框显示和所有，但是当你滚动它powerTip时不会显示。

HTML

<p>
    Blah blah blah blah blah
    <span data-powertiptarget="tip1">Blah</span>
    and more blah blah blah.
</p>

<div id="tip1" class="tooltip-div">
    <p>
        Email: <a href="mailto:me@somebody.com">me@somebody.com</a><br/>
        <span data-powertiptarget="tip2">Nomenclature</span>: Blah
    </p>
</div>

<div id="tip2" class="tooltip-div">
    Nomenclature: blah blah blah blah.
</div>

CSS

.tooltip {
    border-bottom: 1px dashed #333333;
}

.tooltip-div {
    display: none;
}

#powerTip {
    text-align: left;
}

#powerTip a {
    color: #FFFFFF;
}

#powerTip a:visited {
    color: #F0F0F0;
}

#powerTip .tooltip {
    border-bottom: 1px dashed #FFFFFF;
}

JavaScript

$('span[data-powertiptarget]').addClass('tooltip');
$('span[data-powertiptarget]').each( function() {
    $(this).powerTip( {
        placement: 'ne',
        mouseOnToPopup: true,
        smartPlacement: true
    });
});
4

2 回答 2

6

您的工具提示没有显示的原因是因为每个工具提示的内容似乎被复制到一个单独的 div 中，并且附加到它的事件在此过程中丢失了。您可以很好地看到这一点，例如，如果您通过 chrome 开发人员工具检查显示的工具提示。

因此，您需要做的是在工具提示打开后在 div#powerTip 中创建 powerTip2 实例。此外，每个打开的工具提示都需要唯一的 ID。

JsFiddle 上的示例

代码：

$('span[data-powertiptarget]').addClass('tooltip');
createPowerTips($('span[data-powertiptarget]'),'powerTip');

function createPowerTips($elems, popupId) {
    $elems.each( function() {
        $(this).powerTip( {
            popupId: popupId,
            placement: 'ne',
            mouseOnToPopup: true,
            smartPlacement: true
        }).on({
            powerTipOpen: function() {
                createPowerTips(
                    $('#powerTip').find('span[data-powertiptarget]'),
                    'powerTip2'
                );
            }
        });
    });
}

正如您在示例中看到的，嵌套的工具提示没有附加任何 CSS。所以你必须为#powerTip2复制所有#powerTip CSS

显然，该插件并不是为这样的用例而设计的。

于 2012-12-18T23:59:52.627 回答
0

为什么不使用 qTip 代替？

一个类似的例子：Tooltip on tooltip

另外，请注意存在qTip v2。

于 2012-12-19T03:59:58.877 回答