如何使用Angular PrimeNG pTooltip创建带标签和标题的自定义提示框？

一、直接用pTooltip实现需求 #

可以通过pTooltip的HTML内容支持特性来实现，步骤如下：

1. 开启HTML内容支持：给pTooltip组件添加escape="false"属性，让传入的HTML结构不会被转义。
2. 自定义提示框结构：在pTooltip的内容中写入包含标签（label）和标题（caption）的HTML，并给二者分别添加类名用于样式控制。
3. 添加自定义CSS：通过类名给label和caption设置不同的样式。

修改后的代码示例：

<div class="field">
    <label for="firstname" class="p-sr-only">Username</label>
    <input 
        id="firstname" 
        type="text" 
        pInputText 
        placeholder="Username" 
        pTooltip="<div class='tooltip-label'>用户名提示</div><div class='tooltip-caption'>请输入您的用户名，长度不少于6位</div>"
        escape="false"
    >
</div>
<button 
    pButton 
    pRipple 
    type="button" 
    label="Save" 
    icon="pi pi-check" 
    pTooltip="<div class='tooltip-label'>保存操作</div><div class='tooltip-caption'>点击此按钮提交当前表单内容</div>"
    escape="false"
>
</button>

对应的CSS样式：

/* 提示框标签样式 */
.tooltip-label {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    color: #2d3748;
}

/* 提示框标题样式 */
.tooltip-caption {
    font-size: 12px;
    color: #4a5568;
    line-height: 1.4;
}

注意：如果提示内容包含用户输入的动态数据，一定要做好XSS防护，避免安全风险。

二、更优替代方案：OverlayPanel组件 #

如果需要更复杂的提示内容（比如嵌入图标、按钮，或者绑定动态数据），PrimeNG的OverlayPanel组件是更灵活的选择，它支持完全自定义模板，还能实现更多交互逻辑。

示例代码：

1. 定义OverlayPanel模板：

<p-overlayPanel #customTooltipPanel>
    <div class="custom-tooltip-container">
        <div class="tooltip-label">{{ currentTooltipLabel }}</div>
        <div class="tooltip-caption">{{ currentTooltipCaption }}</div>
    </div>
</p-overlayPanel>

2. 绑定到目标元素：

<div class="field">
    <label for="firstname" class="p-sr-only">Username</label>
    <input 
        id="firstname" 
        type="text" 
        pInputText 
        placeholder="Username" 
        (mouseenter)="setTooltipContent('用户名提示', '请输入您的用户名，长度不少于6位'); customTooltipPanel.toggle($event)"
        (mouseleave)="customTooltipPanel.hide()"
    >
</div>
<button 
    pButton 
    pRipple 
    type="button" 
    label="Save" 
    icon="pi pi-check"
    (mouseenter)="setTooltipContent('保存操作', '点击此按钮提交当前表单内容'); customTooltipPanel.toggle($event)"
    (mouseleave)="customTooltipPanel.hide()"
>
</button>

3. 组件内的逻辑方法：

currentTooltipLabel: string = '';
currentTooltipCaption: string = '';

setTooltipContent(label: string, caption: string) {
    this.currentTooltipLabel = label;
    this.currentTooltipCaption = caption;
}

4. 额外给OverlayPanel容器调整外观的CSS：

.custom-tooltip-container {
    padding: 8px 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

OverlayPanel不仅支持hover触发，还能支持点击等其他触发方式，适合需要复杂自定义的场景。

内容的提问来源于stack exchange，提问作者bewa