Tooltip appears at the bottom of the page instead of near the hovered element

[hkws]

Description

Tooltips are expected to appear next to the hovered node in flowchart / class diagrams.
However, the tooltip is rendered at the bottom of the page instead of near the node.

Steps to reproduce

1. Open the code sample below (or this JSFiddle).
2. Hover over nodes A–D.
3. Observe that the tooltip is shown at the very bottom of the page, below the dummy text.

Screenshots

Code Sample

<pre class="mermaid">
flowchart LR
  A-->B
  B-->C
  C-->D
  click A callback "Tooltip"
  click B "https://www.github.com" "This is a link"
  click C call callback() "Tooltip"
  click D href "https://www.github.com" "This is a link"
</pre>

<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
</pre>

Setup

• Mermaid version: 11.9.0
• Browser and Version: Chrome

Suggested Solutions

The .mermaidTooltip styles are injected into the SVG element’s internal <style> tag. Because the tooltip element is created as a direct child of , those CSS rules do not apply to it. As a result, the tooltip lacks position: absolute, so the left/top offsets set in JS have no effect.

My suggestion is to apply the required styles directly to the tooltip element when it is created

// In flowDb.ts and classDb.ts setupToolTips()
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');

If this approach looks good, I’m happy to open a PR implementing the fix.

Additional Context

Chrome DevTools is showing the following warning: