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!)