So basically I want to implement a tooltip on some text in my RShiny app and tried doing so using raw HTML and CSS styling. I don't have much experience with HTML and especially CSS nor with including them in Shiny apps but using the code below (and also trying pasting the raw CSS with the HTML of which works in any HTML editor, also trying htmlOutput()) there is no output. I guess I am wondering what limitations does RShiny have with regards to including HTML and CSS and is the CSS tooltip an element that it does not accept. And if the answer is no limitations then where might I be going wrong with this approach.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML(".tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}")
)
),
uiOutput("html")
)
server <- function(input, output) {
output$html <- renderUI({
HTML('
<body style="text-align:center;">
<p class="tooltip">TEXT
<span class="tooltiptext">Tooltip text</span>
</p>
</body>
')
})
}
shinyApp(ui = ui, server = server)
