15308555518/ docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-12-26 01:33:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs(theme-mermaid): Document how to style Mermaid tooltips

This commit is contained in:
Taylor Reece 2025-10-31 09:43:28 -05:00
parent f8bedbd0a0
commit 088e133ac4
2 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
website/docs/guides/markdown-features/markdown-features-diagrams.mdx
View File

@ -66,6 +66,52 @@ export default {
See the [Mermaid theme documentation](https://mermaid-js.github.io/mermaid/#/theming) for more information on theming Mermaid diagrams.
### Styling tooltips {#styling-tooltips}
Mermaid charts support [Interactions](https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html#interaction), which allow you to add hyperlinks to your diagrams. These hyperlinks can include tooltips that appear when hovering over elements in the diagram. Tooltips do not appear by default, but you can enable them by adding a custom `.mermaidTooltip` CSS class to your [site's stylesheet](../../styling-layout.mdx) (customize as you see fit).
```css title="src/css/custom.css"
.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
background: var(--ifm-background-color);
border: 1px solid var(--ifm-color-primary);
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
```
When a `.mermaidTooltip` class is defined, tooltips will appear on hover over any diagram elements that include a `click` directive. For example,
````md title="Example Mermaid diagram with clickable elements and tooltips"
```mermaid
flowchart TB
GH[Docusaurus GitHub]
MI[Mermaid.js Installation]
SWIZZ[Swizzling Article]
click GH "https://www.github.com/facebook/docusaurus" "Git repo for the Docusaurus project"
click MI "#installation" "Link to the installation section of this doc"
click SWIZZ "../swizzling" "Link to the swizzling article"
```
````
Will yield clickable elements with tooltips:
```mermaid
flowchart TB
GH[Docusaurus GitHub]
MI[Mermaid.js Installation]
SWIZZ[Swizzling Article]
click GH "https://www.github.com/facebook/docusaurus" "Git repo for the Docusaurus project"
click MI "#installation" "Link to the installation section of this doc"
click SWIZZ "../swizzling" "Link to the swizzling article"
```
## Mermaid Config {#configuration}
Options in `mermaid.options` will be passed directly to `mermaid.initialize`:

13
website/src/css/custom.css
View File

@ -241,3 +241,16 @@ html[data-navbar='false'] {
html[data-red-border] div#__docusaurus {
border: red solid thick;
}
/* Show tooltips for clickable UI elements in Mermaid diagrams */
.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
background: var(--ifm-background-color);
border: 1px solid var(--ifm-color-primary);
border-radius: 2px;
pointer-events: none;
z-index: 100;
}