18

How can I create mouseover text for column names in R shiny data table display. I'm trying to provide some text for users to understand the column names. I checked in DT package also and I couldn't find a solution. I can create labels for column names and display all of them when a user checks a box, this takes a lot of real estate and I don't want that. Any tips?

Yihui Xie
  • 28,913
  • 23
  • 193
  • 419
Sri
  • 1,130
  • 1
  • 15
  • 31
  • Are you referring to javascript DataTable in Shiny ? – Shiva Jun 29 '15 at 19:53
  • Data table that I render in `Shiny` using `renderDataTable` – Sri Jun 29 '15 at 20:14
  • possibly of interest: http://stackoverflow.com/questions/16449252/tooltip-on-shiny-r – C8H10N4O2 Jun 29 '15 at 20:24
  • Could you please provide a reproducible example. Also, check this out. It might be helpful. Go to 4.3 Callbacks in Options. http://rstudio.github.io/DT/options.html – Shiva Jun 29 '15 at 20:29
  • 1
    You may use the `title` attribute of `` and create a custom table container. See the section "Custom Table Container" at http://rstudio.github.io/DT/ – Yihui Xie Jul 06 '15 at 02:34
  • I'm able to generate a string for all `th` entries with `ttile`, the problem is I'm not able to use that string inside the `tr` , so for now I manually added the value of string without double quotes and it works. Is there a way to use the string generated from paste function in the `th` ? – Sri Jul 06 '15 at 15:50
  • I created a string as `str<="thead(tr(th(...),th(...),...))` and used `eval(parse(text=str))` inside `container' to make it work. By the way when `thead` and `tr` are out side of the `str`, it doesn't work. Thanks Yihui for the idea of using container to solve this issue. – Sri Jul 08 '15 at 13:36

2 Answers2

28

To expand my comment above, here is an example showing what I meant by using the title attributes:

library(DT)
sketch = htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      th('', title = 'Row Names'),
      th('Sepal.Length', title = 'The Sepal Length'),
      th('Sepal.Width', title = 'The Sepal Width'),
      th('Petal.Length', title = 'The Petal Length'),
      th('Petal.Width', title = 'The Petal Width'),
      th('Species', title = 'Iris Species')
    )
  )
))
datatable(iris, container = sketch)

And here is another approach using JavaScript (jQuery) to add the title attributes:

library(DT)
datatable(iris, callback = JS("
var tips = ['Row Names', 'The Sepal Length', 'The Sepal Width',
            'The Petal Length', 'The Petal Width'],
    header = table.columns().header();
for (var i = 0; i < tips.length; i++) {
  $(header[i]).attr('title', tips[i]);
}
"))
Yihui Xie
  • 28,913
  • 23
  • 193
  • 419
  • Thanks for the alternate approach. – Sri Jul 20 '15 at 13:24
  • 4
    Thanks @Yihui ... what would be the corresponding approach to include a mouseover to all table cells, and not the header? I already tried around a lot but so far I didn't manage... thanks – ChriiSchee Sep 28 '16 at 11:51
  • The jquery version didn't seem to work for me -- my table didn't load at all when I tried to include this snippet. So I switched to the container approach, which worked. However I was previously using `tableHeader(table,escape= F)` to define my column names. How can I still escape the header names? – Paul Apr 19 '17 at 15:42
  • 1
    First approach worked for me. Second approach (jquery) did not. Thanks! – Matt Dzievit May 21 '20 at 14:27
2

You can probably accomplish that using optionsin the renderDataTable() function in Shiny. From the documentation page of DT in Shiny, something like this should work.

renderDataTable(head(iris, 20), options = list(
  initComplete = JS(
    "function(settings, json) {",
        "$(this.api().table().header()).on({
            mouseenter: function () {
                //stuff to do on mouse enter
            },
            mouseleave: function () {
                //stuff to do on mouse leave
            }
         });",
    "}")
))
Shiva
  • 789
  • 6
  • 15
  • This probably work for one text for entire header row, but I'm looking for a separate value for each column name. Can something be done using `colnames` in `renderDataTable` and HTML tags? – Sri Jun 30 '15 at 16:07