Can you do a <title for=<id of another component> in html?

I have an html primeng app in which I need for several p-checkboxes to have a descriptive title for each of the checkboxes that must be declared outside of the p-checkbox.

The primary reason being that I need to mitigate an empty form label WAVE error and I would really prefer not to put an actual label on the p-checkboxes.

Here's my basic setup using actual labels - which works to mitigate the empty form label errors but I really don't want to have actual labels:

<ng-template pTemplate="body" let-responseParam let-index="rowIndex">
<tr [pSelectableRow]="myRow">
<td style="text-align: center">
<p-checkbox inputId="displayParam-{{index}}"/><label for="displayParam-{{index}}">I really dont want a label</label>
</td>
</tr>
</ng-template>


I can however live with a descriptive title. However this doesn't work. I get the error

Can't bind to 'htmlFor' since it isn't a known property of 'title'.

when I do this...

<ng-template pTemplate="body" let-responseParam let-index="rowIndex">
<tr [pSelectableRow]="myRow">
<td style="text-align: center">
<p-checkbox inputId="displayParam-{{index}}"/><title for="displayParam-{{index}}">Can live with a descriptive title</title>
</td>
</tr>
</ng-template>


Any suggestions?

Thanks much.

Continue reading...