Я боюсь, что вы не можете использовать простой css, потому что контент допускает только \A, чтобы сделать разрывную строку, но это невозможно, используя attr -it, возможно указывать que \ A как строку в содержимом- ( и не разрешать. html)
Что ж, мы можем предпринять еще один подход, который заключается в том, чтобы использовать div в качестве всплывающей подсказки и использовать рендерер для прослушивания mouseout и mouseover
Если наш div как
<div #toolTip class="tooltip"
(mouseover)="onTool=true"
(mouseout)="onTool=false"
[style.display]="show || onTool?'inline-block':'none'"
[innerHTML]="toolTipMessage">
</div>
И имеет две переменные и получить div, используя ViewChild
@ViewChild('toolTip') tool:ElementRef
show:boolean=false;
onTool:boolean=false;
Мы можем изменить нашу функцию displayMonth, чтобы добавить указатель мыши и мышь
displayMonth() {
let elements = document.querySelectorAll(".endDate");
let x = elements[0].querySelectorAll(".mat-calendar-body-cell");
x.forEach(y => {
const dateSearch = this.dateToString(
new Date(y.getAttribute("aria-label"))
);
const data = this.dates.find(f => f.date == dateSearch);
if (data) {
this.renderer.listen(y, "mouseover", () => this.showTool(y, data.text));
this.renderer.listen(y, "mouseout", () => this.hideTool());
}
});
}
showTool(y, data) {
this.show = true;
this.toolTipMessage = data;
this.renderer.setStyle(
this.tool.nativeElement,
"top",
y.getBoundingClientRect().y+ "px"
);
this.renderer.setStyle(
this.tool.nativeElement,
"left",
y.getBoundingClientRect().x + "px"
);
}
hideTool() {
this.show = false;
}
См. стекблиц