Shiny app CSS: overflow-x: hidden and tooltip z-index not working

I have a div with smaller hoverable divs inside which each have tooltips. I have a lot of these smaller divs so I applied a max-height and overflow-y:scroll - but this creates unwanted overflow-x space. By restricting the div size, the tooltips of the smaller divs also get cut off by the container div.

(1) How do I maintain the overflow-y: scroll; feature but remove the overflow-x (setting to hidden not working and (2) how do I enable the tooltip I created to hover OVER the container when the z-index isn't working.

I tried applying solutions like setting the position: relative but still am having some issues.

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)