Do you have jQuery powerTip inside another PowerTip?

Question

Wireframes

• jQuery 1.8.3
• jQuery PowerTip 1.1.0

goal

I want to have powerTip inside another powerTip .

Current result

The first tip ( tip1 ) is displayed normally, but the second ( tip2 ) is not displayed at all. CSS for tip2 works, since the bottom border shows everything, but when you roll it back, powerTip will not be displayed.

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: [e-mail] "> [e-mail] </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 your tooltip doesn't appear is because the contents of each tooltip seem to be copied to a separate div and the events associated with it are lost in the process. You can see it well enough, for example. if you check the tooltip using the Chrome developer tools.

So, you will need to create an instance of powerTip2 inside the div # powerTip after the tooltip. You also need unique identifiers for each open tooltip.

JsFiddle example

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 is not tied to CSS. So you will need to copy all the #powerTip CSS for # powerTip2

Obviously, the plugin was not intended for such use.

Answer 2

Why don't you use qTip?

Similar example: Tooltip tooltip

Also note that qTip v2 is present.