How can you use Angular PrimeNG pTooltip to create a tooltip with a label and caption?-CodePudding

I have a tooltip from PrimeNG and I want to add a label and a caption to both be displayed with different styling in the tooltip. Is there a way I can do this using using the pTooltip? Are there any better alternatives?

Current tooltip:

Code Fragment:

<div >
    <label for="firstname" >Username</label>
    <input id="firstname" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
</div>
<button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>

Desired Layout:

CodePudding user response：

PrimeNG's tooltip can render HTML if you disable the escape attribute:

<button pButton type="button" label="Save" icon="pi pi-check" pTooltip="<div>LABEL</div><br/><div>Caption</div>" [escape]="false"></button>

StackBlitz