Отображение всплывающей подсказки при наведении мыши на индикатор выполнения

Question

Я пытаюсь отобразить всплывающую подсказку, когда пользователь наводит указатель мыши на моем индикаторе прогресса:

Таким образом, подсказка должна бытьпоказано над синей линией или на индикаторе выполнения

Примерно так:

Я подписанэтот веб-сайт: PrimeNg всплывающая подсказка

Я сделал все операции импорта, например:

import {TooltipModule} from 'primeng/tooltip';

Мой код выглядит следующим образом:

  <div>
      <table>
          <tr *ngFor="let item of freqValues | keyvalue: valueAscOrder">
                <td class="first">{{ item.value.name }}</td>
                <td class="middle">
                  <p-progressBar value={{item.value.pValue}} pTooltip="Enter your username" tooltipPosition="top"></p-progressBar>   // here is tooltip integration
                 </td>
                 <td class="last">{{item.value.value}}</td>
                 </tr>
                 </table>
                      </div>

Примечание. Приведенный выше вывод кода выглядит так, как будто на 1-м изображении есть тег Уникальные значения.

Кто-нибудь может подсказать, как это сделать?