невозможно показать / отобразить подсказку при загрузке скрипта html из java

Question

Я ng-2-tooltip для отображения моего настроенного html внутри подсказки, и он работает нормально, если я добавлю следующую строку в мой файл HTML:

<span tooltip='<p>Hello text</p>'> My Data</span>

Я рисую заголовок моей таблицы (Jquery Datatable) html из машинописного файла:

 getIndicatorSummaryIndexHeader() {
    return "<thead>"
        + "<tr>"
        + "    <th class='" + this.colA + "</th>"
        + "    <th class='" + this.colB + "</th>"
        + "    <th class='" + this.colC + "</th>"       
        + "</thead>";
}

Но когда я пытаюсь загрузить tooptip из файла сценария, он не отображается должным образом:

getIndicatorSummaryIndexHeader() {
    return "<thead>"
        + "<tr>"
        + "    <th class='" + this.colA + " <span tooltip='<p>Hello text</p>'>Test Tooltip</span></th>"
        + "    <th class='" + this.colB + "</th>"
        + "    <th class='" + this.colC + "</th>"       
        + "</thead>";
}

Вот как рендеринг в DOM :

РАБОТАЕТ: (загрузка всплывающей подсказки в html файле)

<span _ngcontent-c15="" tooltip="<p>Hello text</p>" ng-reflect-tooltip-value="<p>Hello text</p>"> My Data</span>

НЕ РАБОТАЕТ: (загрузка всплывающей подсказки в файле typscrip внутри функции)

<th class="header-vertical-center sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Team Board Test Tooltip: activate to sort column ascending" style="width: 63.6px;">Team Board 
    <span>Test Tooltip</span>
</th>