refactor: use a shared utility function for creating tooltip

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

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<HTMLDivElement, unknown>('.mermaidTooltip');
+    const tooltipElem = createTooltip();
-    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 svg = select(element).select('svg');
 

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<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;
+};

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');
+    const tooltipElem = createTooltip();
-    // @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 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');
   }
 
   /**