1

Is there a way to add a icon next to "Country" and when the user hover on it, it should show some text

library(shiny)

ui <- fluidPage(
  selectInput("Sel","Sel",choices = 1:100),
  htmlOutput("Sd")
)

server <- function(input, output, session) {
  output$Sd <- renderUI({
    "Country"
  })
}

shinyApp(ui, server)
manu p
  • 952
  • 4
  • 10

2 Answers2

1
library(shiny)
library(shinyBS)

ui <- fluidPage(
  selectInput("Sel","Sel",choices = 1:100),
  htmlOutput("Sd")
)

server <- function(input, output, session) {
  output$Sd <- renderUI({
    tags$span(
      "Country ", 
      tipify(
        icon("bar-chart"),
        "Hello, I am the tooltip!"
      )
    )
  })
}

shinyApp(ui, server)
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
0

With a bit of HTML and CSS Then you can use CSS to customize the hovering text

library(shiny)

ui <- fluidPage(
  
# Add CSS
  tags$head(
    tags$style(HTML("
      #an_icon .text {
      position:relative;
      bottom:30px;
      left:0px;
      visibility:hidden;
      }

      #an_icon:hover .text {
      visibility:visible;
      }
      "))
  ),
  
  selectInput("Sel","Sel",choices = 1:100),
  htmlOutput("Sd"),

# HTML for the icon
  tags$div(id = 'an_icon', 
           icon("bar-chart"),
           tags$span(class = "text", tags$p("text")))
)

server <- function(input, output, session) {
  output$Sd <- renderUI({
    "Country"
  })
}

shinyApp(ui, server)
gdevaux
  • 2,308
  • 2
  • 10
  • 19
  • Thanks. But can we keep it adjacent to Country? (Next to country) – manu p Dec 14 '21 at 10:43
  • you have several alignment methods listed here https://stackoverflow.com/questions/4938716/align-div-elements-side-by-side – gdevaux Dec 14 '21 at 12:45