CSS: position tooltip over an overflow-hidden div

[MayaGans]

Hi! I know this is more of a CSS question than Shiny but I was hoping to get some help - any tips appreciated!!!

library(shiny)
library(shinyjs)

dummy <- c(a = c(1,2,3), b=c(1,2,3))

rowBlocks <- function(data, name)
{
  div(style = "
      text-align: center;
      font-size: 12px;
      background-color: #A9A9A9;
      border-radius: 10px;
      min-width: 80px;
      color: black; margin-bottom: 5px;
      ",
      div(class = "tt", id = name, name, tags$span(class = "tooltiptext", name)))
}

ui <- fluidPage(
  
  sidebarPanel(
    
    inlineCSS("
              
              .tt {
                position: relative;
              }
              
              .tt .tooltiptext {
                visibility: hidden;
                width: 150px;
                background-color: black;
                color: #fff;
                  text-align: center;
                border-radius: 6px;
                padding: 5px 0;
                position: absolute;
                z-index: 1;
                bottom: 150%;
                left: 50%;
                margin-left: -60px;
              }
              
              .tooltiptext {
                visibility: hidden;
                width: 150px;
                background-color: black;
                color: #fff;
                  text-align: center;
                border-radius: 6px;
                padding: 5px 0;
                position: relative
                z-index: 9999;
                bottom: 150%;
                left: 50%;
                margin-left: -50px;
              }
              
              .tt .tooltiptext::after {
                content: \"\";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: black transparent transparent transparent;
              }
                
                .tt:hover .tooltiptext {
                visibility: visible;
                }
                "),
    
    fluidRow(
      column(6, div(id = "row_source", style = "max-height: 100px; border:2px solid #000000;",
                 div(rowBlocks("A", "A"), rowBlocks("A", "A"), rowBlocks("A", "A")),  style = "max-height: 100px;overflow-y:scroll;")
    )
  )
  )
)


server <- function(input, output, session) {
  
}

shinyApp(ui, server)

[dcruvolo]

It looks like you are using some custom tooltips. Is there something in particular that you are stuck or is something not working correctly?

There are a couple of packages for tooltips in shiny applications. The following packages come to mind.

• Tippy
• shinyBS

If the project is public facing, I would suggest using a library for creating accessible tooltips. This inclusive components post provides a method for creating tooltips. There was a library that I was introduced to, but I can't find the link or remember the name of at the moment.

[MayaGans]

Hi, thanks for the response - I'm using shinyjqui for the drag-drop functionality and bootstrap has a conflict with jquery so I'm not able to use shinyBS.

Thanks for the tippy suggestion, I tried using that but the hover text would just remain after dragging an element so it's not quite what I'd like either.

I'll read your last link and see if that can provide any further help. Thanks for the suggestions!