Mermaid2 diagrams with mkdocs annotations shows half the (+) button and nothing happens when you click it

[elgalu]

Description

Originally reported at fralau/mkdocs-mermaid2-plugin#88

The mkdocs.yml -> features: content.code.annotate almost works except that the button is half-visible and more importantly click doesn't trigger the annotation even with securityLevel: loose

Steps to reproduce

Please find a minimal working example with code at:
Demo: https://elgalu.github.io/mermaid2-content.code.annotate/
Code: https://github.com/elgalu/mermaid2-content.code.annotate/

Screenshots

Demo: https://elgalu.github.io/mermaid2-content.code.annotate/

Code Sample

Code: https://github.com/elgalu/mermaid2-content.code.annotate/

Setup

• Mermaid version: https://unpkg.com/browse/[email protected]/dist/
• Browser and Version: Chrome 116.0.5845.179 (Official Build) (64-bit)
• Additional versions: https://github.com/elgalu/mermaid2-content.code.annotate/blob/main/pyproject.toml

[Yokozuna59]

@elgalu Hi, the given code isn't a valid mermaid code, you have to escape (1) in the node title using doable quotes:

graph TD
A["Client (1)"] --> B[Server]

graph TD
A["Client (1)"] --> B[Server]

Loading

[elgalu]

Thanks for the feedback @Yokozuna59 , I escaped as suggested elgalu/mermaid2-content.code.annotate@5dcb326 but the described issue with content.code.annotate remains.

[jgreywolf]

Given this:

Annotations are not supported in Mermaid diagrams.
Reason: with Mermaid, you're in SVG space, which has entirely different layout and positioning semantics than HTML. It is probably possible to make it work, but from my research trying to make tooltips work in SVG, it's quite an effort.

I am going to close this issue as wont fix, since annotations are not supported