Have a jQuery powerTip inside of another powerTip?

css, html, javascript, jquery

Solution

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.

Problem

Original source