I’m stuck with trying to include something like a tooltip or popover with additional info when the user hovers over / clicks on the row names of a datatable, so they don’t have to look up some definitions, which I currently have on a different tabPanel. Here's a working example:
library(shiny)
library(DT)
library(shinyBS)
# Define server for the Shiny app
shinyServer(function(input, output,session) {
tdata <- as.data.frame(iris)
# Render table here
output$mytable <- DT::renderDataTable(DT::datatable(
tdata[1:5,],
options = list(paging = FALSE, searching = FALSE, info = FALSE, sort = FALSE,
columnDefs=list(list(targets=1:4, class="dt-right")) ),
rownames = paste("rowname",1:5),
container = htmltools::withTags(table(
class = 'display',
thead(
tr(lapply(rep(c('ratios','name1', 'name2', 'name3','name4','name5'), 1),th))
)
))
))
}) # end of shinyServer function
library(shiny)
library(DT)
library(shinyBS)
shinyUI(
mainPanel(
DT::dataTableOutput("mytable")
)
)
Please note that I have seen the following discussion topics, but without success: R shiny mouseover text for table columns, as well as Add bootstrap tooltip to column header in shiny app So I'm thinking either something within the DT-package options, or something using the shinyBS package (like 'bsTooltip') or add some HTML or JS. This tooltip/popover feature does not seem to be naturally supported by Shiny for within datatables...!?
This code works but running in client side mode. To make it simpler I have used the first five rows of the iris dataset, but I guess the idea is clear. If you hover over the row names the tooltip will be displayed.
ui.R
library(shiny)
library(DT)
shinyUI(
mainPanel(
DT::dataTableOutput("tbl")
)
)
server.R
library(shiny)
library(DT)
shinyServer(function(input, output,session) {
output$tbl = DT::renderDataTable(
datatable(iris[1:5, ], callback = JS("
var tips = ['First row name', 'Second row name', 'Third row name',
'Fourth row name', 'Fifth row name'],
firstColumn = $('#tbl tr td:first-child');
for (var i = 0; i < tips.length; i++) {
$(firstColumn[i]).attr('title', tips[i]);
}")), server = FALSE)
})