Clickable links in State Diagram should use the class mermaidTooltip to match the behavior of other diagrams

[Timac]

Description

📑 Summary

The PR #6423 added support for clickable states for State Diagram using the click directive. However the tooltips for are not rendered like the other types of diagrams. The Flowchart and Class Diagram are displaying tooltips using the mermaidTooltip class.

I would expect the State Diagram to also use the mermaidTooltip class for consistency.

📋 References

• #6423

• #6314

• #6304

• Implementation in flowDb.ts

• Implementation in classDb.ts

Steps to reproduce

Add the mermaidTooltip class to the stateDb.ts file

Code Sample

stateDiagram
    [*] --> Idle
    Idle --> Google
    Google --> [*]
    click Google "https://google.com" "Visit Google"

Setup

• Mermaid version: 11.7.0
• Browser and Version: All

[ShrihaDeo]

Hi, I’m a university student and am new to open-source contribution. This issue looks like a great starting point. Could I take this one on? I’ll follow the existing implementations. Thanks!

[lucasserral]

@ShrihaDeo Did you do it? Here is a good starting point for you on how to start the dev server and the alignment the mantainers want us to follow: https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/contributing.md