Make infoTooltip be in the front

[lenafm]

InfoTooltip hovers are hidden by other panels.

[brazadas]

@ddazal I have been trying to fix this many times and no luck... The problem is with the overflows: when overflow-y is set to scroll in .panel class, it automatically sets the overflow-x to auto so that a horizontal scroll appears for the tooltip to fit and prevents it to be over-posed to the panel. If the this property is set to visible the tooltip lays over the panel, but off course the vertical scroll is lost in panel and content that overflows it lays outside it. There is a css problem-condition with this:

W3C spec says:
" The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’. "

Anyhow, this is as far as I could get: having a container with scroll that has in it a tooltip and it super-imposes it; I havent been able to reproduce it within the panel of shinypanels though.

@ddazal what do you think?

library(shinypanels)

styles <- "
.container {
  border: 2px solid #eee;
  overflow: scroll;
  /*position: relative;*/
  height: 400px;
}

.has-tooltip {  
  /*position: relative;*/
}

.tooltip-wrapper {
  position: absolute;
  visibility: hidden;
}

.has-tooltip:hover .tooltip-wrapper {
  visibility: visible !important;
  opacity: 0.7;
  /*top: 30px;*/
  /*left: 50%;*/
  /*margin-left: -76px;*/
  /* z-index: 999; defined above with value of 5 */
}

.tooltip {
  display: block;
  position: relative;
    top: 0em;
    right: 2em;
  width: 140px;
  height: 96px;
  /*margin-left: -76px;*/
  color: #FFFFFF;
  background: #000000;
  line-height: 96px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 4px 3px 10px #800000;
}
"
ui <- panelsPage(styles = styles,
                 panel(title = "options",
                       width = 250,
                       color = "chardonnay",
                       body = list(uiOutput("controls1"),
                                   br(),
                                   uiOutput("controls2"))))


server <- function(input, output, session) {
  
  
  output$controls1 <- renderUI({
    infoTooltip("Shinypanels' tooltip", "Te jej jje fjsalsd fjjf dsjjdsalf jfk")
  })
  
  output$controls2 <- renderUI({
    div(class = "container",
        a(class = "has-tooltip",
          href = "#",
          "This is shows a tooltip that is within a scrollable container and overflows' it",
          span(class = "tooltip-wrapper",
               span(class = "tooltip", 
                    "R"))),
        br(),
        br(),
        div("iv>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Proin porttitor elit neque, in condimentum ante pulvinar et. 
        Donec et erat nulla. Vestibulum quis porta tellus. Curabitur
        non blandit metus. Vestibulum nec nisi quis urna tempor pharetra.
        Phasellus volutpat, arcu ac malesuada porttitor,
        iv>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Proin porttitor elit neque, in condimentum ante pulvinar et. 
        Donec et erat nulla. Vestibulum quis porta tellus. Curabitur
        non blandit metus. Vestibulum nec nisi quis urna tempor pharetra.
        Phasellus volutpat, arcu ac malesuada porttitor
        iv>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Proin porttitor elit neque, in condimentum ante pulvinar et. 
        Donec et erat nulla. Vestibulum quis porta tellus. Curabitur
        non blandit metus. Vestibulum nec nisi quis urna tempor pharetra.
        Phasellus volutpat, arcu ac malesuada porttitor
        iv>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Proin porttitor elit neque, in condimentum ante pulvinar et. 
        Donec et erat nulla. Vestibulum quis porta tellus. Curabitur
        non blandit metus. Vestibulum nec nisi quis urna tempor pharetra.
        Phasellus volutpat, arcu ac malesuada porttitor
        iv>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Proin porttitor elit neque, in condimentum ante pulvinar et. 
        Donec et erat nulla. Vestibulum quis porta tellus. Curabitur
        non blandit metus. Vestibulum nec nisi quis urna tempor pharetra.
        Phasellus volutpat, arcu ac malesuada porttitor"))
  })
  
}


shinyApp(ui, server)

[lenafm]

@ddazal this is fixed now right?

[ddazal]

@lenafm Kind of. As far as I know the tooltip now shows on front but its (x, y) position is messed up.

[ddazal]

@CamilaAchuri