Javascript 在另一个powerTip中有jQuery powerTip吗？ 框架 客观的

我想在另一个

powerTip

内部安装一个

powerTip

当前结果 第一个提示（

tip1

）显示良好，但第二个提示（

tip2

）根本不显示。

tip2

的CSS可以工作，因为底部边框显示所有内容，但是当您滚动到它上面时，

powerTip

不会显示

HTML JavaScript

---

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

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

代码：

正如您在示例中看到的，嵌套的工具提示没有附加CSS。因此，您必须将所有的#powerTip CSS复制到#powerTip2

---

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

为什么不改用qTip呢

一个类似的例子：

---

另外，请注意，这是存在的。

好吧，这感觉太不对劲了。。你为什么想要这样的东西？工具提示之类的东西应该只用于小的额外信息显示，而不是某些复杂的对象…@VytautasButkus，恰恰相反。想象一下，如果您将为一个组织的内部命名提供工具提示。自然，在语言中，术语中有术语。我希望能够在任何可能出现的地方显示命名法的工具提示，这甚至意味着在其他工具提示中。

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

.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;
}

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

$('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'
                );
            }
        });
    });
}