Repository navigation
With revealjs, plotly tooltip not aligned correctly #2430
Description
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.
Activity
cscheid commentedon Sep 13, 2022
I'm pretty sure this is happening because the tooltip is using units that are getting affected by the
transformnode 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
transformnode in the DOM. It wreaks havoc with a ton of downstream library expectations.jjallaire commentedon Sep 14, 2022
The counterpoint to this is that the
transformis 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 thetransformw/o losing some of the rest of Reveal's benefits.cscheid commentedon Sep 14, 2022
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 commentedon Sep 14, 2022
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
In short,
zoomattributes 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
zoomis no more used. See hakimel/reveal.js@e281b32Possibly using this commit or master for our embed reveal.js, or patching it will solve the issue here..
[revealjs] pin to commit hash version to get fix on slide scaling for…
cderv commentedon Sep 14, 2022
I confirm that using the hakimel/reveal.js@e281b32 for the revealjs version, change the scaling and fix the issue.
In HTML we had
which becomes
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.
[revealjs] pin to commit hash version to get fix on slide scaling for…
timbmg commentedon Dec 27, 2023
I still seem to experience this issue with vega-altair plots
cderv commentedon Dec 28, 2023
@timbmg this is highly possible as the original issue was a conflict in revealjs and plotly. Both being JS libraries with there own feature and configuration.
It is possible that this is the same for vega-altair too.
Can you open a new issue to track ?
Investigation will be the following then:
Thanks.