javascript - 在另一个powerTip中有一个jQuery powerTip？

构架

客观的

我想在另一个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:[email protected]">[email protected]</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
    });
});

最佳答案

之所以没有显示工具提示，是因为每个工具提示的内容似乎都被复制到了一个单独的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。因此，您必须将所有#powerTip CSS复制到＃powerTip2

显然，该插件尚未针对此类用例进行设计。

关于javascript - 在另一个powerTip中有一个jQuery powerTip？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13880587/

Powertip

javascript - 在另一个powerTip中有一个jQuery powerTip？