Prime Ng 工具提示不适用于悬停选项卡

Question

工具提示不处理 p-tabpanel 标题文本，而是显示在选项卡的内容上，请帮我解决可能的解决方案

它应该只使用 prime ng 选项卡面板来完成

Answer 1

PrimeNG 选项卡面板中的工具提示功能可以通过使用“pTooltip”指令来实现。默认情况下，工具提示将显示在选项卡面板的内容上，但您可以使用“position”属性更改此行为以在标题文本上显示工具提示。

如何实现这个的例子：

<p-tabView>
  <p-tabPanel header="Tab 1" [pTooltip]="'Tab 1 Tooltip'" [position]="'top'">
    Content of Tab 1
  </p-tabPanel>
  <p-tabPanel header="Tab 2" [pTooltip]="'Tab 2 Tooltip'" [position]="'top'">
    Content of Tab 2
  </p-tabPanel>
</p-tabView>

在此示例中，“position”属性设置为“top”，以便工具提示将显示在标题文本的顶部。您还可以根据自己的喜好将其设置为“右”、“下”或“左”。