Add tool tip in a datatable in R Shiny

Question

I am trying to add tool tip using JS script attr function,some how the written script is not giving the desired result (adding tool tip for the 1st column of the datatable).As I am new JS Script so unable to debug the error, can anyone suggest me why the below code is not giving me the correct result. Here is the piece of code:

library(shiny)
library(DT)

shinyApp(
ui = fluidPage(

DT::dataTableOutput("table2")

),
server = function(input, output) {

output$table2<-DT::renderDataTable({
  responseDataFilter2_home<-iris[,c(4,3,1)]
  displayableData<-as.data.frame(responseDataFilter2_home, stringAsFactors = FALSe, row.names = NULL)
},server = TRUE, selection = 'single',callback = JS("table.on('dblclick.dt', 'td', function(nRow, aData){
                                                         var row=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                         Shiny.onInputChange('rows_home',[row, Math.random()]);});
                                                         table.on('click.dt', 'td', function(nRow, aData) {
                                                         var k=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                         if(table.rows('.selected').indexes().toArray()!= '' && table.rows('.selected').indexes().toArray() ==k){
                                                         k=-1;}
                                                         Shiny.onInputChange('rows_up_home',[k, Math.random()]);
                                                         });"),
escape=FALSE,options=list(paging=FALSE,searching = FALSE,ordering=FALSE,scrollY = 400,scrollCollapse=TRUE,
                          columnDefs = list(list(width = '800%', targets = c(1)))),rownames=FALSE,colnames="Name")

}
)

Could you please explain what you are exactly trying to display in your tooltip? — SBista, Jan 06 '17 at 08:43
@SBista I have trying to have concatenation of col1 and col2 and display the same as tool tip in col1 by keeping other part of JS Script untouched as there are designed for some other feature. — string, Jan 06 '17 at 09:13

score 2 · Answer 1 · edited May 23 '17 at 12:17

I have modified your code with the answer that I gave in this link so that you get the tooltip without affecting other parts of your JS code:

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(

    DT::dataTableOutput("table2")

  ),
  server = function(input, output) {

    output$table2<-DT::renderDataTable({
      responseDataFilter2_home<-iris[,c(4,3,1)]
      displayableData<-DT::datatable(data = as.data.frame(responseDataFilter2_home, stringAsFactors = FALSE, row.names = NULL),rownames = FALSE,
                                     escape = FALSE, selection = 'single', callback =  JS("table.on('dblclick.dt', 'td', function(nRow, aData){
                                                         var row=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                        Shiny.onInputChange('rows_home',[row, Math.random()]);});
                                                        table.on('click.dt', 'td', function(nRow, aData) {
                                                        var k=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                        if(table.rows('.selected').indexes().toArray()!= '' && table.rows('.selected').indexes().toArray() ==k){
                                                        k=-1;}
                                                        Shiny.onInputChange('rows_up_home',[k, Math.random()]);
                                                        });"),

                                     options = list(rowCallback = JS(
                                       "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                                       "var full_text = aData[0] + ','+ aData[1];",
                                       "$('td:eq(0)', nRow).attr('title', full_text);",
                                       "}"),paging=FALSE,searching = FALSE,ordering=FALSE,scrollY = 400,scrollCollapse=TRUE,
                                       columnDefs = list(list(width = '800%', targets = c(1))),colnames="Name") )


    })

    })

Hope it helps!

Thank you. It helps. Just one more query- As table displayed has 3 cols- 4,3,1. Now,if I need to have tool tip of col 2 & col 5 on col1, what is work around for the same. Actual Table will dispaly col-4,3,1 only but concatenation of tool tip will have 2 & 5. Keeping iris table as an example. — string, Jan 06 '17 at 13:30
Since you have extracted the data for columns 4,3 and 1 only, the datatable won't have access to the values of column 2 and 5. To do so I guess the best way would be to hide unwanted columns while displaying instead of extracting the columns from `iris` to `responseDataFilter2_home`. — SBista, Jan 06 '17 at 13:48
Thanks. Got it. To hide the cols dynamically we can add this code - columnDefs = list(list(width = '800%', visible=FALSE, targets=c(3,4))) — string, Jan 06 '17 at 14:04

score 1 · Answer 2 · answered Jan 06 '17 at 08:45

1

You can start from this minimal working example:

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(

    DT::dataTableOutput("table2")

  ),
  server = function(input, output) {

    output$table2<-DT::renderDataTable({
      responseDataFilter2_home<-iris[,c(4,3,1)]
      displayableData<-DT::datatable(responseDataFilter2_home,options = list(rowCallback = JS(
        "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
        "var full_text = aData[1] + ','+ aData[2]",
        "$('td:eq(1)', nRow).attr('title', full_text);",
        "}")
      ))#, stringAsFactors = FALSe, row.names = NULL)
    },server = TRUE, selection = 'single', escape=FALSE,options=list(paging=FALSE,searching = FALSE,ordering=FALSE,scrollY = 400,scrollCollapse=TRUE,
                          columnDefs = list(list(width = '800%', targets = c(1)))),rownames=FALSE,colnames="Name")

    }
 )

answered Jan 06 '17 at 08:45

Sandipan Dey

21,482
2
51
63

Thanks for the suggestion. When I try to integrate this with existing JS elements which are part of existing code.Tool tip didn't works. And that is the problem with my original code - Other things works but not the tool tip.any work around that? – string Jan 06 '17 at 09:12
what else do you want to do other than adding the tooltips as they are added with this minimal code? – Sandipan Dey Jan 06 '17 at 12:10
Ur code works fine for tool tip but I need to integrate the tool tip with already written JS Script in that I was having the problem. Thanks for ur effort. – string Jan 09 '17 at 12:55

Add tool tip in a datatable in R Shiny

2 Answers2

Linked

Related