marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-08 08:39:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'tooltip-positioning-issue' of https://github.com/mermaid-js/mermaid into tooltip-positioning-issue

Browse Source
This commit is contained in:
darshanr0107
2025-10-07 12:53:22 +05:30
parent ff15e51d2e ddd4763db2
commit f356836f71
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/mermaid/src/diagrams/class/classDb.ts
View File

@@ -473,6 +473,16 @@ export class ClassDB implements DiagramDB {
LOLLIPOP: 4, LOLLIPOP: 4,
}; };
// Utility function to escape HTML meta-characters
private escapeHtml(str: string): string {
return str
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
private readonly setupToolTips = (element: Element) => { private readonly setupToolTips = (element: Element) => {
let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip'); let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
if (tooltipElem.empty()) { if (tooltipElem.empty()) {
@@ -509,7 +519,7 @@ export class ClassDB implements DiagramDB {
const rect = (event.currentTarget as Element).getBoundingClientRect(); const rect = (event.currentTarget as Element).getBoundingClientRect();
tooltipElem.transition().duration(200).style('opacity', '.9'); tooltipElem.transition().duration(200).style('opacity', '.9');
tooltipElem tooltipElem
.html(title.replace(/&lt;br\/&gt;/g, '<br/>')) .html(this.escapeHtml(title).replace(/&lt;br\/&gt;/g, '<br/>'))
.style('left', `${window.scrollX + rect.left + rect.width / 2}px`) .style('left', `${window.scrollX + rect.left + rect.width / 2}px`)
.style('top', `${window.scrollY + rect.bottom + 4}px`); .style('top', `${window.scrollY + rect.bottom + 4}px`);