Search code examples
rshinyflexdashboard

R: Shiny Tooltip is partially hidden

I am using the package bsplus to make tool tips in a shiny/flexhdashboard environment but I'm finding some of them are hidden or hidden partially from sight. Why?

e.g.:

require(shiny)
require(flexdashboard)

   bsplus::use_bs_tooltip()
   bsplus::use_bs_popover()

shinyWidgets::sliderTextInput(inputId = "prevalence", 
                              label = "% infectious passengers  boarding:",
                              grid = TRUE, 
                              force_edges = TRUE,
                              choices = c(0.1,0.2,0.3))%>%
   shinyInput_label_embed(
     icon("info") %>%
     bs_embed_tooltip(title = "A realistic value is no more than about 0.25% or 250 in 100,000")
   )

Procudes

enter image description here

Solution

  • I can't really say if this works, because you example is not fully reproducible, but according to this answer it can be solved using a data-container="body" attribute.

    Luckily bsplus make this very easy: just add container='body' to bs_embed_tooltip()

    require(shiny)
require(flexdashboard)
library(dplyr)
library(bsplus)

bsplus::use_bs_tooltip()
bsplus::use_bs_popover()

shinyWidgets::sliderTextInput(inputId = "prevalence", 
                              label = "% infectious passengers  boarding:",
                              grid = TRUE, 
                              force_edges = TRUE,
                              choices = c(0.1,0.2,0.3))%>%

shinyInput_label_embed(
    icon("info") %>%
      bs_embed_tooltip(title = "A realistic value is no more than about 0.25% or 250 in 100,000", container='body')
  )

# Results:
<div class="form-group shiny-input-container">
  <label class="control-label" for="prevalence" style="width:100%;">
    % infectious passengers  boarding:
    <div class="pull-right">
      <i class="fa fa-info" title="A realistic value is no more than about 0.25% or 250 in 100,000" data-toggle="tooltip" data-placement="top" data-container="body"></i>
    </div>
  </label>
  <input class="js-range-slider sw-slider-text" data-data-type="text" data-force-edges="true" data-from="0" data-from-fixed="false" data-from-shadow="false" data-grid="true" data-hide-min-max="false" data-keyboard="true" data-prettify-enabled="false" data-swvalues="[&quot;0.1&quot;,&quot;0.2&quot;,&quot;0.3&quot;]" data-to-fixed="false" data-to-shadow="false" id="prevalence"/>
</div>