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

Question

I have an R Markdown document with an interactive tree diagram with tooltips. After the document is knitted to HTML, the tooltip appears in the correct position when the HTML document is opened in R Studio after knitting. However, when I open the HTML doc in my browser (Chrome), the tooltip appears in the wrong position, as it is fixed to the top of the page. I have tested other browsers to see if the same problem occurs, and have found that it also happens in Microsoft Edge, but not in Mozilla Firefox. Below is a minimal reproductible example of my R Markdown code (I have incuded the Iris data to highlight the issue with the tooltip).

{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)

I think the problem is linked to the CSS code behind the toolip. After right clicking on the tree and pressing "Inspect element", I got the CSS code for the tooltip. Based on this link, I tried changing the position from absolute to relative but this has not worked. I am clueless when it comes to CSS, so I don't really know how to correctly modify this code, or even if I really should. I am attaching the CSS code for the tooltip below, any help on how to solve this issue would be much appreciated.

{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

Wrap the whole code chunk that contains the tree in a relative div. This works in Edge & Chrome.

<div style = "position: relative;">

``{r}

tree

``
</div>