diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index 6bcb29b1d..0e9b67dc9 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -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('.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'); diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts index 59c6d43cf..86220b2b1 100644 --- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts +++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts @@ -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('.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; +}; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index d6ecc7142..0c2ef886c 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -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'); } /**