Have a jQuery powerTip inside of another powerTip?

Question

Frameworks

• jQuery 1.8.3
• jQuery PowerTip 1.1.0

Objective

I want to have a powerTip inside of another powerTip.

Current Outcome

The first tip (tip1) displays fine but the second (tip2) doesn't display at all. The CSS for tip2 works, in that the bottom border shows and all, but when you roll over it the powerTip won't show.

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

Answer 1

The reason why your tooltip doesn't show up is because the contents of each tooltip seem to get copied into a seperate div, and the events attached to it get lost in the process. You can see that quite well e.g. if you inspect the apearing tooltip via the chrome developer tools.

So, what you would need to do is create the powerTip2 instance inside the div#powerTip once the tooltip opens. Also you need unique ids for every opened tooltip.

Example on JsFiddle

Code:

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

As you can see in the example, the nested tooltip has no CSS attached to it. So you'd have to copy all the #powerTip CSS over for #powerTip2

Clearly, the plugin has not been designed for such a use case.