Dynamically add matTooltip in text for specific keywords

Question

I am working in a personal Angular project (using Angular Material) and I can't find a solution for this problem.

For example, I have a long text like this :

When you take the Dodge action, you focus entirely on avoiding attacks. Until the start of your next turn, any Attack roll made against you has disadvantage if you can see the attacker, and you make Dexterity Saving Throws with advantage. You lose this benefit if you are Incapacitated (as explained in Conditions ) or if your speed drops to 0.

I have some keywords, here disadvantage, advantage incapacitated. I would like to make the font bold and add a tooltip to add a small explanation for each keyword.

I have no problem making the font bold with a pipe, but I can't find a solution for adding a tooltip for the keywords. Using innerHTML does not work, here is my current solution :

<div innerHTML="description | transformKeyWord"></div>

And my pipe :

transform(value: string, ...args: unknown[]): unknown {
    let result = value
      result = result.replace('advantage', '<span matTooltip="Advantage description">advantage</span>')
      result = result.replace('incapacitated', '<b [matTooltip]="Incapacitated description">incapacitated</b>')
    return result;
  }

I don't think this is the good solution using a pipe with innerHTML, that is why I am asking for help.