时间戳

首页 > 解决方案 > 使用 R Markdown 编织后，工具提示在浏览器中的位置错误

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

问题描述

我有一个带有工具提示的交互式树形图的 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)

我认为问题与 toollip 后面的 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;
}

标签： htmlcssrr-markdowntooltip

解决方案

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


<div style = "position: relative;">

``{r}

tree

``
</div>

推荐阅读