Reputation: 2095
I found an old post, Add bootstrap tooltip to column header in shiny app, that basically and almost gets at what I need but I'm trying to clean it up. My questions are:
(1) how to remove the annoying pop up what appears when first invoking the below Code, as shown in the next image,
(2) will there be a way to adjust the size of, and otherwise format, the text ("HELLO") that appears when hovering over the table column header, and
(3) are there better options now for doing this sort of thing, where you get an editable, formattable pop-window (with user instructions) when you hover over a specific text string in a table?
Code:
library(shiny)
ui <- fluidPage(fluidRow(column(12,dataTableOutput('table'))))
server <- function(input, output) {
output$table <- renderDataTable(
iris,
options =
list(
pageLength = 5,
initComplete = I("function(settings, json) {alert('Done.');
$('th').each( function(){this.setAttribute('title','HELLO');});
$('th').tooltip();
}")
)
)
tags$head(tags$script("
$('table th').each(function(){ console.log( $(this).text());
$(this).attr('data-toggle','tooltip')
$(this).attr('title','example text')
$(this).tooltip();
);
"))
}
shinyApp(ui,server)
Upvotes: 0
Views: 689
Reputation: 84619
Once you have an id for the header, you can apply the shinyBS::bsPopover
function. To have an id, you can use the container
argument of DT::datatable
.
library(shiny)
library(DT)
library(shinyBS)
sketch = htmltools::withTags(
table(
class = "display",
thead(
tr(
th("Sepal length"),
th("Sepal width"),
th("Petal length"),
th("Petal width"),
th("Species", id = "header-species")
)
)
)
)
ui <- fluidPage(
br(),
DTOutput("dtable"),
bsPopover(
id = "header-species",
title = "Species",
content = "This is the species column"
)
)
server <- function(input, output, session) {
output[["dtable"]] <- renderDT({
datatable(iris, rownames = FALSE, container = sketch)
})
}
shinyApp(ui, server)
Upvotes: 1