How to use tooltips in mermaid nodes?

[harrelfe]

In the following the link to a web page works but the tooltip is ignored:

---

title: "Test"
format: html

```{mermaid}
flowchart TD
  A[this] --> B[that]
  click A "https://hbiostat.org" "label"
  click B callback "Tooltip for B"

I tried adding the following after the yaml as suggested on the `mermaid` web site (mainly to try `securityLevel`), to no effect:

<script> var callback = function(){ alert('A callback was triggered'); } var config = { startOnLoad:true, flowchart:{ useMaxWidth:true, htmlLabels:true, curve:'cardinal', }, securityLevel:'loose', }; mermaid.initialize(config); </script>

[cscheid]

I think this is an upstream bug, at least for me. Tooltips appear to be non-functional even on mermaid's webpage: https://mermaid-js.github.io/mermaid/#/flowchart Links work, but tooltips and js callbacks don't.

[cscheid]

In releases earlier than today, quarto prerendered the mermaidjs diagrams on the server, which made mermaidjs's tooltip functionality unworkable. As of a couple of hours ago, we changed the behavior so that by default, in Javascript-compatible output formats the default is to use client-side rendering.

With that said, we currently don't set securityLevel to loose in quarto, and neither do we expose that option. The mermaidjs codebase is reasonably complicated, and I don't understand the full implications of that setting. Generally, I am concerned about unexpected side effects of allowing arbitrary eval() of code in mermaidjs diagrams.

[harrelfe]

The new version does make tooltips "work" without the need to tamper with securityLevel, but unfortunately as I saw reported elsewhere (perhaps related to markdown) the tooltip appears at the bottom of the document. I hope that someday soon mermaid can fix that as the ability to make more dynamic diagrams has a number of applications.

[harrelfe]

I found the fix - put this in the script:

<style>
  .mermaidTooltip {
      position: absolute;
      text-align: center;
      max-width: 200px;
      padding: 2px;
      font-family: 'trebuchet ms', verdana, arial;
      font-size: 12px;
      background: #ffffde;
      border: 1px solid #aaaa33;
      border-radius: 2px;
      pointer-events: none;
      z-index: 100;
    }
</style>

[cscheid]

@jjallaire should we add something like this to our includes? the issue is that the tooltip is a custom div that the runtime inserts into the main document. We can do that or something like trying to sniff elements with .mermaidTooltip and move them to better places

[jjallaire]

I don’t think we need to do anything too fancy here. We just need to include the CSS in the dependency. Let’s work on this real-time on Monday

[harrelfe]

Given the nice change in the new version of quarto I found the fix that makes everything work as advertised. Add this in the script:

<style>
  .mermaidTooltip {
      position: absolute;
      text-align: center;
      max-width: 200px;
      padding: 2px;
      font-family: 'trebuchet ms', verdana, arial;
      font-size: 12px;
      background: #ffffde;
      border: 1px solid #aaaa33;
      border-radius: 2px;
      pointer-events: none;
      z-index: 100;
    }
</style>

[jjallaire]

@cscheid If we end up using exactly this CSS (i.e. no variation by theme) then we could just add a mermaid.css file alongside mermaid.min.js and include it in the dependency. If we want/need it to vary by theme we'd probably want to put it in _quarto-rules.scss

[radovan-miletic]

Also, you might need to set z-index: 100; to body (.column-body-outset), page and screen columns (otherwise, the tooltip will appear behind the graph).

---
title: "Test"
format: html
---

<style>
  .mermaidTooltip {
      position: absolute;
      text-align: center;
      max-width: 200px;
      padding: 2px;
      font-family: 'trebuchet ms', verdana, arial;
      font-size: 12px;
      background: #ffffde;
      border: 1px solid #aaaa33;
      border-radius: 2px;
      pointer-events: none;
      z-index: 100;
    }
  .page-columns .column-page-inset {
      z-index: 100;                     /* default z-index: 998; */
    }
</style>

::: column-page-inset 
```{mermaid}
flowchart TD
  A[this] --> B[that]
  click A "https://hbiostat.org" "label"
  click B callback "Tooltip for B"
```
:::   

[cscheid]

We're going to hold off on this change for a bit until we figure out a way to make it sufficiently robust. There are currently a few issues with mermaid tooltips, specifically in the presence of multiple diagrams on the same page.

Please continue to use this CSS if it works well for you, and stay tuned (to make it work on our side, we might require a few upstream bugfixes to mermaid, so no short-term solution for now... sorry about that!).

[cscheid]

This is the mermaid-js issue, for full context: mermaid-js/mermaid#3111

[cscheid]

Ok, we now run our own fork of mermaid-js (as of 5a889b6). This fork has improved tooltip positioning and includes the CSS suggested by @harrelfe (with a z-index of 1000 instead of 100 to win that particular fight).

In order for this feature to work, you need to have %%| mermaid-format: js enabled in the diagrams you want to have tooltips. I've tested HTML documents and revealjs presentations. Let me know if this doesn't work for you!

[cscheid]

I apologize if I'm expressing myself unclearly, but the <pre> tag is not supposed to be formatted at all. In order for that to happen, mermaid needs to allow the content of mermaid diagrams to be interpreted as HTML, and the mermaid authors have removed that because of security concerns.

In other words, the fact that the <pre> tag was rendering as a pre-formatted block was actually (in the assessment of mermaidjs authors) a mermaidjs bug.

[harrelfe]

Thanks for the clarification. This would have been easy to workaround if setting font-family: courier had worked, but when I tried that a few days ago mermaid jumbled the text, not keeping the line breaks. I need a way to control tooltip formatting.

[cscheid]

I think that is solvable wit font-family: courier and white-space: pre in the CSS.

[harrelfe]

That worked. I put this in my .qmd file:

<style>
  .mermaidTooltip {
      font-family: courier;
      white-space: pre;
    }
</style>

Am I right to assume that this will modify the style that Quarto provides, leaving all the other parameters as specified by Quarto?

More good news: once I took <pre> out of the tooltip all the tooltips are not showing correctly. Thanks for all the great help.

[cscheid]

Am I right to assume that this will modify the style that Quarto provides, leaving all the other parameters as specified by Quarto?

Yes, that's correct. There's a (complicated) algorithm for how browsers are suppose to resolve which CSS rules "win" when they conflict with one another. But one simple property of that algorithm is that if there's two rules with the same selector (.mermaidTooltip) that compete for some property, the "last" rule wins, as determined by document order.