I am trying to position a tooltip to the right of a textInput using the tippy package, however, it isn't working:
library(shiny)
library(tippy)
shinyApp(
ui = fluidPage(
with_tippy(textInput("input", "input with tooltip"), "Input text", placement = "right")
),
server = function(input, output) {}
)
The position = 'right', arrow = 'true' and theme = 'light' options also don't seem to be working.
I was wondering if this was a browser compatibility issue or if I'm missing some CSS dependencies on my end? I have tried running the app on Chrome v82.0.4068.5, Firefox 73.0.1 and Microsoft Edge 44.18362.449.0 to no avail.
Your code doesn't run because with_tippy is not a valid function.
The code below should properly show the position of the tooltip. Important to note: the tippy_this(elementId) refers back to the textInput(inputId) named THISinput here for clarity.
Instead of actually wrapping the textInput in the tippy_this, we just refer back to the input with elementId.
library(shiny)
library(tippy)
shinyApp(
ui = fluidPage(
textInput(inputId = "THISinput", "input with tooltip"),
tippy_this(elementId = "THISinput", tooltip = "Hovertext for 'THISinput' here", placement="right")
),
server = function(input, output) {}
)
Related
In the Shiny App below, I am facing a very strange behavior, where selectInput box slides downwards when I type something in this box. Also, the text inside selectInput box moves towards the right while I type in this box. I have spent a lot of time to find out the reason for this problem but could not figure it out. Can someone point out the mistake I am doing causing this strange behavior?
library(shiny)
library(shinydashboard)
library(highcharter)
siderbar <- dashboardSidebar(
sidebarMenu(
selectizeInput(inputId = "select_by", label = "Select by:", choices = NULL, multiple = FALSE, options = NULL)
)
)
body <- dashboardBody(
fluidRow(
tabBox(
side = "right",
selected = "Tab1",
tabPanel("Tab1", "Tab content 1", highchartOutput("tabset1Selected"))
)
),
)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "tabBoxes"),
siderbar,
body
),
server = function(input, output, session) {
selectedVal <- reactiveValues()
updateSelectizeInput(session, "select_by", choices = c(as.character(1:10000)), selected = 2, server = TRUE)
output$tabset1Selected <- renderHighchart({
selectedVal <- input$select_by
print(highcharts_demo())
})
}
)
We were on the right track. It has something to do with selectize.js updating the items from the server. You can verify that by setting the loadThrottle option to 5000. This option determines how long the widget waits "before requesting options from the server" (see the manual). Now you have to wait exactly 5 seconds and then the select widget flickers.
The issue seems to be caused by a CSS conflict. selectize.js adds a CSS class to the widget. If you remove that feature, the flicker goes away.
selectizeInput(inputId = "select_by", label = "Select by:",
choices = NULL, multiple = FALSE,
options = list(loadThrottle=200, loadingClass=""))
loadingClass sets a specific CSS class (default: 'loading') while loading data from the server. Purpose: to change how the widget looks and communicate to users that an update is in progress.
loadThrottle does not need to be set. It's default is 300. You can set it to any value that suits your needs.
Details
highcharter defines it's own CSS class names loading with these specs:
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
That is the reason for the CSS conflict. The widget gets a top margin and it's content moved to the center, because the browser does not distinguish the source of the class. It only sees some CSS that fits and uses it. This image shows where you need to look:
The following code can be used to show how I would want a tooltip to appear. If version=3 then the function in shinyBS works and produces the tooltip. However with version=4 it does not work. I don't want to use the shinyBS package as it seems it's still in dev mode and would rather just straight prefer to wrap my button with some HTML using tooltips from bootstrap directly as shown here.
I'm not having success in doing it this way and wonder if anyone can suggest a good way to get the tool top for my button just using the pure HTML?
library(shiny)
library(bslib)
library(shinyBS)
ui <- fluidPage(
navbarPage(
theme = bs_theme(bootswatch = "flatly", version = 4),
title = 'Methods',
tabPanel('One'),
),
mainPanel(
h1('Hello World'),
actionButton("button", "Some Button"),
bsTooltip("button", "Something to be said here", "top"),
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
I would like to add a tooltip to a button using tippy 1.0.0.
The tooltip always appears in the middle of the screen and not close to the text as expected.
I tried to specifiy the position arguments, but had no success. I was able to position the tooltips correctly in tippy version 0.1.0.
How can I position the tooltip close to the text?
library(shiny)
library(tippy)
shinyApp(
ui = fluidPage(
tippy(
element = p("Test"),
content = "Tooltip"
)
),
server = function(input, output) {}
)
Result:
This is because your tags are displayed as block in CSS. Even though the element only shows a small portion of the total width, but it is still occupying the full width of the parent node by default. This is how CSS display works. tippy works on the whole occupied width, not what you see with your eyes. Use your p tag for example to inspect:
See the blue shade that takes the entire row? tippy is displayed at the center of the shade.
We can change the display to another to force the tooltip to be positioned around p, like inline-block:
library(shiny)
library(tippy)
shinyApp(
ui = fluidPage(
tippy(
element = p(
"Test",
style = "display: inline-block"
),
content = "Tooltip"
)
),
server = function(input, output) {}
)
When you inspect, the size is what we want.
However (there is always a however), this may mess up your UI display. e.g., we want a button in the second line, but here is what you will see
library(shiny)
library(tippy)
shinyApp(
ui = fluidPage(
tippy(
element = p(
"Test",
style = "display: inline-block"
),
content = "Tooltip"
),
tags$button("Test2")
),
server = function(input, output) {}
)
To fix, you can add a wrapper outside your tooltip tag with block display,
shinyApp(
ui = fluidPage(
div(style = "display: block",
tippy(
element = p(
"Test",
style = "display: inline-block"
),
content = "Tooltip"
)
),
tags$button("Test2")
),
server = function(input, output) {}
)
Or I'd prefer an easier way:
shinyApp(
ui = fluidPage(
p(tippy(element = tags$span("Test" ), content = "Tooltip")),
tags$button("Test2")
),
server = function(input, output) {}
)
Please read more about CSS display: https://www.w3schools.com/cssref/pr_class_display.asp
I have an issue while creating a shiny web app using semantic.dashboard library.
Below is the code for my app.
library(semantic.dashboard)
# Define UI
header <- dashboardHeader(
)
sidebar <- dashboardSidebar(
side = "left",
sidebarMenu(
menuItem(tabName = "overview", text = "Overview", icon = icon("home")),
menuItem(tabName = "analysis", text = "Analysis", icon = icon("chart bar"))
)
)
body <- dashboardBody(
dateRangeInput("datepicker", NULL, start = Sys.Date()-30, end = Sys.Date()-1)
)
tabItems(
tabItem(
tabName = "overview",
fluidRow(
)
),
tabItem(
tabName = "analysis",
fluidRow(
)
)
)
ui <- dashboardPage(
header,
sidebar,
body,
title = "My Dashboard",
theme = "lumen"
)
# Define server logic
server <- function(input, output, session) {
session$onSessionEnded(stopApp)
}
# Run the application
shinyApp(ui = ui, server = server)
The result is in the screenshot below:
The main problem is that the dates inside the daterangeinput widget are just like simple text inside textbox.
I can't click on them to change the dates.
Using fluidPage() would resolve the problem, but the whole web page isn't filled totally by the app (and for this app, responsiveness isn't really useful).
Below is the screenshot of the app when I use fluidPage(), you can see that there's so much space between the sidebar and the border, and beetween the sidebar and the body.
app with fluidPage()
I'd like to know if it's possible to use daterangeinput without using fluidPage() or, if not possible, know how to remove the padding between the border and the sidebar when using fluidPage.
Thanks in advance for your help.
Above example doesn't work because it uses bootstrap framework styles - contrary to shiny.semantic or semantic.dashboard packages.
Please check my PR to shiny.semantic package. I've implemented there simple date input with usage of semantic-ui components. You can also use it to create simple date range (added quick example in PR).
I want to include a small "Help" actionLink (next to a "Render" actionButton) that acts as a popover (see here). Here's my code:
server.R:
shinyUI(pageWithSidebar(
sidebarPanel(
actionButton("renderButton", "Render"),
actionLink("link", "Help") ),
mainPanel()
))
ui.R:
shinyServer(function(input, output, session) {
# ... dealing with renderButton ...
output$link <- renderUI({
addPopover(session=session, id=output$link, title="",
content="Testing.", placement = "bottom",
trigger = "click", options = NULL)
})
})
Right now, the actionLink shows up on the sidebar, but clicking on it has no effect. Any tips? I think it may have to do with the id in addPopover, but I haven't found many examples to provide a framework. I found this, but I want to deal with the popover in server.R, not ui.R. Can it be done this way, or should I just make the popover in ui.R?
From ?Tooltips_and_Popovers:
There must be at least one shinyBS component in the UI of your app in
order for the necessary dependencies to be loaded. Because of this,
addTooltip and addPopover will not work if they are the only shinyBS
components in your app.
To get the pop over to work, you can change your actionButton into a bsButton, and modify server.R to only contain the call to addPopover. The id argument to addPopover also needs to be changed to refer to the id of the ui object you want the pop over to appear on, in your case "link", the id of the actionLink .
Here's the modified example code in a self-contained code chunk:
library(shiny)
library(shinyBS)
runApp(
# Ui
list(ui = pageWithSidebar(
headerPanel("Test App"),
sidebarPanel(
bsButton("renderButton", "Render"),
actionLink("link", "Help") ),
mainPanel("Hello World!")
),
# Server
server = function(input, output, session) {
# ... dealing with renderButton ...
addPopover(session=session, id="link", title="",
content="Testing.", placement = "bottom",
trigger = "click", options = NULL)
})
)