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