Angular Directive to update Tooltip on Kendo MultiSelectComponent Chips

I am attempting to update the tooltip on selected items in an Angular Kendo MultiSelectComponent. I do not wish to use the <ng-template kendoMultiSelectTagTemplate> because I don't want to specify it everywhere I use the directive.

Here is the code:

ngAfterViewInit(): void {

this.multiselect.filterable = true;
this.multiselect.textField = 'name';
this.multiselect.valueField = 'value';

this.multiselect.tagMapper = this.tagMapper;

this.multiselect.valueChange
.pipe(
takeUntilDestroyed(this.destroyRef),
tap((item) => {
this.zone.runOutsideAngular(() => {
this.setChipTooltips();
});
// setTimeout(() => {
// this.setChipTooltips();
// }, 0);
})
)
.subscribe();

this.setChipTooltips();

}

private setChipTooltips(): void {

const chips = this.elRef.nativeElement.querySelectorAll('.k-chip');
const values = this.multiselect.value || [];

chips.forEach((chip: HTMLElement, index: number) => {
const fullValue = values[index];
if (fullValue && fullValue.name) {
const label = fullValue.name;
// neither of these work
chip.title = label;
this.renderer.setAttribute(chip, 'title', label);

console.log("Double-check: " + chip.outerHTML);
}
});

}



The logged outerHTML shows the title attribute is added, but the DOM is not updated.

Edit:

I just want the reference to be extremely simple/concise:


<kendo-multiselect
departmentCodeLookup>
</kendo-multiselect>

Continue reading...