How to show multiple tooltip with arrow mark in angular18

So, you're using multiple instances, but you're referencing only the first directive instance, hence the behavior here.

@ViewChild(TooltipDirective) tooltip?: TooltipDirective; @ViewChild(TooltipDirective) tooltip2?: TooltipDirective;

So, instead, you need to reference each instance, which can be done by adding template reference to each tooltip:

<button ... #t1="bs-tooltip" <button ... #t2="bs-tooltip"

but, this won't work if you only reference template variable, because you actually want to reference each element's directive, which can be done by adding read option to ViewChild which will read the directive:

@ViewChild('t1', {read:TooltipDirective}) tooltip?: TooltipDirective; @ViewChild('t2', {read:TooltipDirective}) tooltip2?: TooltipDirective;

demo