AORardduaveah
New Member
FrameworksObjectiveI want to have a \[code\]powerTip\[/code\] inside of another \[code\]powerTip\[/code\].Current OutcomeThe first tip (\[code\]tip1\[/code\]) displays fine but the second (\[code\]tip2\[/code\]) doesn't display at all. The CSS for \[code\]tip2\[/code\] works, in that the bottom border shows and all, but when you roll over it the \[code\]powerTip\[/code\] won't show.HTML\[code\]<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>\[/code\]CSS\[code\].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;}\[/code\]JavaScript\[code\]$('span[data-powertiptarget]').addClass('tooltip');$('span[data-powertiptarget]').each( function() { $(this).powerTip( { placement: 'ne', mouseOnToPopup: true, smartPlacement: true });});\[/code\]