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

fix: tooltip appears at bottom of page instead of near hovered element

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
2025-10-07 11:56:26 +05:30
parent c1c14e401a
commit b4a5fe6c45
2 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { select, type Selection } from 'd3';
import { select } from 'd3';
import { log } from '../../logger.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import common from '../common/common.js';
@@ -474,42 +474,50 @@ export class ClassDB implements DiagramDB {
};
private readonly setupToolTips = (element: Element) => {
let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
select('.mermaidTooltip');
// @ts-expect-error - Incorrect types
if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
if (tooltipElem.empty()) {
tooltipElem = select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0);
.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');
const nodes = svg.selectAll('g.node');
const nodes = svg.selectAll('g').filter(function () {
return select(this).attr('title') !== null;
});
nodes
.on('mouseover', (event: MouseEvent) => {
const el = select(event.currentTarget as HTMLElement);
const title = el.attr('title');
// Don't try to draw a tooltip if no data is provided
if (title === null) {
if (!title) {
return;
}
// @ts-ignore - getBoundingClientRect is not part of the d3 type definition
const rect = this.getBoundingClientRect();
const rect = (event.currentTarget as Element).getBoundingClientRect();
tooltipElem.transition().duration(200).style('opacity', '.9');
tooltipElem
.text(el.attr('title'))
.style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
.style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
.html(title.replace(/&lt;br\/&gt;/g, '<br/>'))
.style('left', `${window.scrollX + rect.left + rect.width / 2}px`)
.style('top', `${window.scrollY + rect.bottom + 4}px`);
el.classed('hover', true);
})
.on('mouseout', (event: MouseEvent) => {
tooltipElem.transition().duration(500).style('opacity', 0);
const el = select(event.currentTarget as HTMLElement);
el.classed('hover', false);
select(event.currentTarget as HTMLElement).classed('hover', false);
});
};

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

@@ -611,6 +611,21 @@ 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');
}
/**