I would like to add a tooltip for navbarMenu in Shiny app. Similar question asked here but, there is no answer.Here is my reproducible code
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu("Tab1",bsTooltip(id="Tab1", title="Short description for the tab", trigger = "hover"),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
During my research I found this solution R Shiny: Use navbarPage with bsModal by shinyBS, but for bsModel.
Also, there is a procedure mentioned here which is based in java-script.I know both solutions are for tabpanel but I believe it's the same problem, which is navbarMenu and tabpanel don't have an id.
I'm statistician and I don't have background in HTML or java-script to rewrite the attribute for the tab title or navbarMenu.
I hope I phrase my question in a clear manner. Thanks in advance for your time and kind help.
you can use HTML wenn passing the Title of the Tabs. in this case I just pt the title in a span and added the attribute titlewhich is the attribute HTML uses default for mouse-overs. For me this is much sinpler the trying to add it over shinyBS.
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu(span("Tab1",title="Short description for the tab" ),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
hope this helps!
I found another solution using javascript. Perhaps it may be more useful.
library(shiny)
shinyApp(
ui = navbarPage(
tags$script(HTML('
$( document ).on("shiny:sessioninitialized", function(event) {
$(\'span[data-toggle="tooltip"]\').tooltip({
html: true
});
});'
)),
navbarMenu(
"Menu"
,tabPanel(span("navbarTitle 1",title="XXX",`data-toggle`="tooltip"),
tabsetPanel(
tabPanel(span("Tab 1", title = "aaa",`data-toggle`="tooltip")),
tabPanel(span("Tab 2",title="bbb",`data-toggle`="tooltip")),
tabPanel(span("Tab 3",title="ccc",`data-toggle`="tooltip"))
)
)
,tabPanel( "navbarTitle 2")
)
),
server = function(input, output) {
}
)
Related
Accidentally i saw this User Interface in a website, the first thing that i tought was "oh... this is a shiny ui, seems like the developer use shinydashboard::dashboardHeader(), shinydashboard::dashboardBody() and shinydashboard::dashboardSidebar()", Well but how to do this? I never saw a function to create something similar.. i realize the actionButton() but how to do this:
library(shiny)
ui <- fluidPage(
# here
actionButton("button","Faça Login e assine")
)
server <- function(input, output, session) {
observeEvent(input$button, {
## do something
})
}
shinyApp(ui, server)
You can use the normal box() function of shiny along with hr() and do something like this:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(title="TITLE",status="primary",solidHeader=TRUE,style="",
width=2,
h1(strong("$89,90")),
h5("Some text here"),
hr(),
h4("More text"),
hr(),
h4("More text"),
hr(),
h4("More text"),
hr(),
h4("More text"),
hr(),
actionButton("button","Login and subscribe",class="btn-primary")
))
)
server <- function(input, output, session) {
observeEvent(input$button, {
## do something
})
}
shinyApp(ui, server)
This gives an output like :
After this, you can always use css to customize the colors and the fonts in your box.
I hope this answers your question!
I found the bsModal works as expected with fluidPage but not without it. Just click "View Table" button to see the difference.
The version with fluidPage:
library(shiny)
library(shinyBS)
shinyApp(
ui =
fluidPage(
sidebarLayout(
sidebarPanel(
actionButton("tabBut", "View Table")
),
mainPanel(
bsModal("modalExample", "Data Table", "tabBut", size = "large",
"distTable")
)
)
),
server =
function(input, output, session) {}
)
The version without fluidPage, the only change is that the fluidPage is replaced by tagList:
library(shiny)
library(shinyBS)
shinyApp(
ui =
tagList(
sidebarLayout(
sidebarPanel(
actionButton("tabBut", "View Table")
),
mainPanel(
bsModal("modalExample", "Data Table", "tabBut", size = "large",
"distTable")
)
)
),
server =
function(input, output, session) {}
)
Can anyboday help me explain what happened between bsModal and fluidPage?
Because fluidPage is much, much more than a simple tagList.
tagList simply takes it arguments and concatenates them (expecting each argument to be some sort of HTML tag). fluidPage literally generates an entire HTML document with bootstrap dependencies.
Your first example is figuratively "build a house with basement, floor plan and attic" with sidebarLayout explaining the layout of floors and fluidPage being the house. Remove the fluidPage and you're trying to build a house with basement, floor plan and attic, but without the foundation, walls or roof.
I successfully changed the text sizes in shiny dashboard interface by editing css file.
Or I use following structure:
div(DTOutput(outputId = "table"), style = "font-size:85%"))
However, I couldn't find the node name of shiny modals. Is it possible to change the text size in shiny modals through .css?
Are you looking for something like this?
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog")
),
server = function(input, output) {
observeEvent(input$show, {
showModal(modalDialog(
title = "Important message",
div("This is an important message!", style="font-size:160%")
))
})
}
)
ModalDialog takes as its first argument(s) UI elements. This appears to be the same kind of arguments accepted by other shiny elements. Compare for example: ?siderbarPanel and ?modalDialog. So if you can do it in the body of an app, you can probably do it in a modal.
For example, I stuck a sidebar layout inside a modal:
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog")
),
server = function(input, output) {
observeEvent(input$show, {
showModal(modalDialog(
sidebarLayout(sidebarPanel("yeah"),mainPanel("cool"))
))
})
}
)
I read all the threads about dynamic ui within the Shiny framework, but I did not find anything that work. I want to display a twitter timeline. This chunk of code works really well :
library(shiny)
library(shinydashboard)
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
a("Tweets by Andrew Ng",
class="twitter-timeline",
href = "https://twitter.com/AndrewYNg"
)
)
)
)
, server = function(input, output, session){
}
)
)
But when, I try to make it reactive, I only got a link to the twitter timeline:
library(shiny)
library(shinydashboard)
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
uiOutput("mytimeline")
)
)
)
, server = function(input, output, session){
output$mytimeline <- renderUI({
a("Tweets by Andrew Ng",
class="twitter-timeline",
href = "https://twitter.com/AndrewYNg"
)
})
}
)
)
The Twitter script only loads embedded content when it runs the first time. Since the script is in static UI but the timeline is in dynamic UI, the script will always run before the timeline is inserted.
The Twitter docs have a section about this: https://dev.twitter.com/web/javascript/initialization
You can run twttr.widgets.load() to scan the page for newly added embedded content.
One way to run execute this when inserting embedded content would be to include it in a script tag:
library(shiny)
twitterTimeline <- function(href, ...) {
tagList(
tags$a(class = "twitter-timeline", href = href, ...),
tags$script("twttr.widgets.load()")
)
}
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
uiOutput("mytimeline")
)
)
)
,
server = function(input, output, session) {
output$mytimeline <- renderUI({
twitterTimeline("https://twitter.com/AndrewYNg", "Tweets by Andrew Ng")
})
}
))
See How to enable syntax highlighting in R Shiny app with htmlOutput for a similar issue with more details
I've been trying to use shinyBS modals with dateInput. The problem is that the calendar widget is hidden behind the modal. Here is my example code:
library(shiny)
library(shinyBS)
shinyApp(
ui =fluidPage(
mainPanel(
actionButton("button", label = "Open Modal"),
bsModal("modalExample", "Data Table", "rowtogg", size = "small",
fluidPage(dateInput("dates", "Enter date")))
)
),
server = function(input, output, session) {
observeEvent({
input$button
},{
toggleModal(session, "modalExample", "open")
})
}
)
A screenshot of the problem can be found at: https://github.com/ebailey78/shinyBS/issues/46, where I already asked the question. However it seems to me like this is a more "general" problem, so I was hoping someone over here could help me out.
EDIT: Thanks to Yenne Info it works by adding:
tags$style(type = "text/css", ".datepicker{z-index: 1100 !important;}"),