With revealjs, plotly tooltip not aligned correctly

[lizwillow]

plotly tooltip misaligned in quarto with revealjs

Rendering the following example results in an html file where the tooltip is off-center. You would need to position the pointer above and to the left of the point you want to select in order to view the information for that data point. I tried opening it in Microsoft Edge and Google Chrome and both had this issue.

---
title: "example"
author: "tmp"
format:
  revealjs
---

## slide 1

```{r}
library(plotly)
plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
```

Additional information:
Version of quarto: 1.1.189
Operating system: Windows 10 Enterprise
IDE you’re using, and its version: RStudio version 2022.7.1.554

Checklist

• Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• Please format your issue so it is easier for us to read the bug report.
• Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• Please document the operating system you're running. If on Linux, please provide the specific distribution.

[cscheid]

I'm pretty sure this is happening because the tooltip is using units that are getting affected by the transform node that the revealjs format uses. Unfortunately, it means that it will be hard for us to solve this in general.

@jjallaire This is a big change, but I think we should consider forking revealjs and reworking their setup so we never have a transform node in the DOM. It wreaks havoc with a ton of downstream library expectations.

[jjallaire]

The counterpoint to this is that the transform is kind of Reveal's secret sauce because it allows you to target a known set of pixel dimensions with your content (no matter how the viewport is resized). It's also extremely important to be able to target images, arrows, illustrations, etc. with absolute positions. Interestingly for a lot of people used to having this level of control in PowerPoint, etc. Reveal is the first HTML slides framework that gives them this control and they love it. I could be missing something here but given all this I'm not sure we'll ever get away from the transform w/o losing some of the rest of Reveal's benefits.

[cscheid]

I see, that makes sense, thanks.

The issue comes from HTML libraries that love to inject transient DOM nodes (tooltips, for example; I see the same thing with mermaidjs) at the end of the body or somewhere else where they try to get absolute positioning. Then, the fact that they inject the DOM node in a place with a different transform makes it impossible to line them up.

I wonder if, instead, we can make the transform node take more of the DOM, so that these libraries can't accidentally escape it.

[cderv]

Just to share some references as we had related issue in the R package at some point and it was fixed in plotly.js directly.
See more details in rstudio/revealjs#47 (comment) and the plotly.js PR : plotly/plotly.js#5193

New plotly.js has been available in plotly R package v4.10.0

However, it seems a new issue already reported in plotly and reveal.js

• Mouse position is wrong when style:zoom is applied on the plotly-graph-div  plotly/plotly.js#6169
• Force use of scale() instead of zoom() hakimel/reveal.js#3208

In short, zoom attributes is used for the slide scaling system, and it creates the tooltip issue.

I believe this has been fixed upstream in reveal.js already and zoom is no more used. See hakimel/reveal.js@e281b32

Possibly using this commit or master for our embed reveal.js, or patching it will solve the issue here..

[cderv]

I confirm that using the hakimel/reveal.js@e281b32 for the revealjs version, change the scaling and fix the issue.

In HTML we had

<div class="slides" style="width: 1050px; height: 700px; zoom: 1.69843;">
<!-- slides in there-->
</div>

which becomes

<div class="slides" style="width: 1050px; height: 700px; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(1.69843);">
<!-- slides in there-->
</div>

See the PR #2437 for a branch with the updated revealjs that fixed the issue. I share this as an example that upstream seems to have fixed this scaling issue.