在另一个powerTip中有一个jQuery powerTip吗？

Question

框架

• jQuery 1.8.3
• jQuery PowerTip 1.1.0

目的

我想在另一个powerTip内加powerTip。

当前结果

第一个提示（tip1）显示正常，但第二个提示（tip2）根本不显示。 tip2的CSS有效，因为底部边框显示全部，但是当您滚动时，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
    });
});

Answer 1

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

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

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

显然，该插件并非针对此类用例而设计。

Answer 2

为什么不使用qTip？

类似的例子：Tooltip on tooltip

另请注意，qTip v2已存在。