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

refactor: use a shared utility function for creating tooltip

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
2025-10-15 19:48:52 +05:30
parent f356836f71
commit feed9d75bb
3 changed files with 26 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,7 @@ import {
setDiagramTitle,
getDiagramTitle,
} from '../common/commonDb.js';
import { createTooltip } from '../common/svgDrawCommon.js';
import { ClassMember } from './classTypes.js';
import type {
ClassRelation,
@@ -484,23 +485,7 @@ export class ClassDB implements DiagramDB {
}
private readonly setupToolTips = (element: Element) => {
let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
if (tooltipElem.empty()) {
tooltipElem = select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0)
.style('position', 'absolute')
.style('text-align', 'center')
.style('max-width', '200px')
.style('padding', '2px')
.style('font-size', '12px')
.style('background', '#ffffde')
.style('border', '1px solid #333')
.style('border-radius', '2px')
.style('pointer-events', 'none')
.style('z-index', '100');
}
const tooltipElem = createTooltip();
const svg = select(element).select('svg');

22
packages/mermaid/src/diagrams/common/svgDrawCommon.ts
View File

@@ -1,4 +1,5 @@
import { sanitizeUrl } from '@braintree/sanitize-url';
import { select } from 'd3';
import type { SVG, SVGGroup } from '../../diagram-api/types.js';
import { lineBreakRegex } from './common.js';
import type {
@@ -135,3 +136,24 @@ export const getTextObj = (): TextObject => {
};
return testObject;
};
export const createTooltip = () => {
let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
if (tooltipElem.empty()) {
tooltipElem = select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0)
.style('position', 'absolute')
.style('text-align', 'center')
.style('max-width', '200px')
.style('padding', '2px')
.style('font-size', '12px')
.style('background', '#ffffde')
.style('border', '1px solid #333')
.style('border-radius', '2px')
.style('pointer-events', 'none')
.style('z-index', '100');
}
return tooltipElem;
};

26
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -17,6 +17,7 @@ import {
setDiagramTitle,
getDiagramTitle,
} from '../common/commonDb.js';
import { createTooltip } from '../common/svgDrawCommon.js';
import type {
FlowClass,
FlowEdge,
@@ -574,15 +575,7 @@ You have to call mermaid.initialize.`
}
private setupToolTips(element: Element) {
let tooltipElem = select('.mermaidTooltip');
// @ts-ignore TODO: fix this
if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
// @ts-ignore TODO: fix this
tooltipElem = select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0);
}
const tooltipElem = createTooltip();
const svg = select(element).select('svg');
@@ -611,21 +604,6 @@ You have to call mermaid.initialize.`
const el = select(e.currentTarget as Element);
el.classed('hover', false);
});
// @ts-ignore TODO: fix this
tooltipElem = select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0)
.style('position', 'absolute')
.style('text-align', 'center')
.style('max-width', '200px')
.style('padding', '2px')
.style('font-size', '12px')
.style('background', '#ffffde')
.style('border', '1px solid #333')
.style('border-radius', '2px')
.style('pointer-events', 'none')
.style('z-index', '100');
}
/**