jaread83
9 years agoChampion
Custom tooltip in component
Is there a way to replicate the functionality of the tooltips that are used in Lithium? I have tried using the same markup in my custom components but the popup text does not work even though I have assigned a unique ID to the containers. The markup is identical to others that are used except for the ID. I found another post about it but it was dated back to four years ago and the resources linked have since vanished (jquerytools.org for example).
<span class="HelpIcon"> <a class="lia-link-navigation help-icon lia-tooltip-trigger" id="link_2" href="#"> <span class="lia-img-icon-help lia-fa-icon lia-fa-help lia-fa" id="display_2" alt="${tooltiptext}"></span> </a> <div class="lia-content lia-tooltip-pos-bottom-left lia-panel-tooltip-wrapper" id="link_2-tooltip-element"> <div class="lia-tooltip-arrow"></div> <div class="lia-panel-tooltip"> <div class="content">${tooltiptext}</div> </div> </div> </span>
This is the code I am using in my component. The element renders fine but the lia-panel-tooltip-wrapper does not get cloned to the bottom of the page like the others do.
Any tips? (see what I did there!)