Jquery UI - Tooltip is not working (showing blank)

Question

For some reason tooltip is working well on some pages but not the other. On this particular page it is showing as blank. I've also checked title attr without jquery tooltip and it is working fine. Any ideas?

header.html

$(document).ready(function ()
{
    //initiate tabs jquery ui
    $( "#tabs" ).tabs();

    //initiate tooltips
    $(document).tooltip();
});

content.html

<td class="options-width">
            <div style="display: inline-block" title="Update">
                <a href="#"><span class="ui-state-default ui-corner-all ui-icon ui-icon-gear"></span></a>
            </div> 
            <div style="display: inline-block" title="Clipboard">
                <a href="#"><span class="ui-state-default ui-corner-all ui-icon ui-icon-clipboard"></span></a>
            </div>
            <div style="display: inline-block" title="Delete">
                <a href="#"><span class="ui-state-default ui-corner-all ui-icon ui-icon-tag"></span></a>
            </div>
            <div style="display: inline-block" title="Tagged">
                <a href="#"><span class="ui-state-default ui-corner-all ui-icon ui-icon-trash"></span></a>
            </div>
</td>

Output:

Answer 1

Since the tooltips are built when the document has finished loading, some dynamic content might not get them initialized.

Also make sure your all pages loads the jquery modules properly.