使用 R Markdown 编织后，工具提示在浏览器中的位置错误

Question

我有一个 R Markdown 文档，其中包含一个带有工具提示的交互式树形图。将文档编入 HTML 后，在编入后在 R Studio 中打开 HTML 文档时，工具提示会出现在正确的位置。但是，当我在浏览器 (Chrome) 中打开 HTML 文档时，工具提示出现在错误的位置，因为它固定在页面顶部。我测试了其他浏览器是否会出现同样的问题，发现在Microsoft Edge中也会出现，但在Mozilla Firefox中不会出现。下面是我的 R Markdown 代码的最小可重现示例（我包含 Iris 数据以突出显示工具提示的问题）。

{r, echo=FALSE, warning=F, message=F}
library(collapsibleTree)
library(tidyverse)
head(iris,20)
dat<- data.frame(level1= c(NA,"A","A"),
           level2=c("A","B","C"),
           att=c("First", "Second","Second"),
           tt=rep("hello",3))

collapsibleTreeNetwork(dat, attribute = "att", 
                       collapsed = F,
                       tooltipHtml = "tt",zoom=F)

我认为问题与工具提示背后的 CSS 代码有关。右键单击树并按“检查元素”后，我得到了工具提示的 CSS 代码。基于，我尝试将位置从绝对位置更改为相对位置，但这没有用。我对 CSS 一无所知，所以我真的不知道如何正确修改这段代码，或者即使我真的应该这样做。我在下面附上了工具提示的 CSS 代码，非常感谢任何有关如何解决此问题的帮助。

{css}
.tooltip {
    position: absolute;
    z-index: 1;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    filter: alpha(opacity=0);
    opacity: 0;
    line-break: auto;
}

Answer 1

将包含树的整个代码块包装在一个相对 div 中。这适用于 Edge & Chrome.


<div style = "position: relative;">

``{r}

tree

``
</div>

使用 R Markdown 编织后，工具提示在浏览器中的位置错误

Tooltip is in wrong position in browser after knitting with R Markdown

html

css

r

tooltip

r-markdown