javascript - 在另一个 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 开发人员工具检查出现的工具提示。

因此，您需要做的是在工具提示打开后在 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

很明显，该插件不是为这种用例设计的。