javascript - 在进度条中完成鼠标悬停时显示工具提示

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>

注意：上面的代码输出看起来像第一张图片有标签唯一值。

任何人都可以建议如何做到这一点？

标签： javascriptangular7