javascript - Display cell value in tooltip after hovering over a cell in DT::datatable - Stack Overflow

admin管理员组

文章数量:1429539

How do I utilize javascript to display the cell value in a tooltip after hovering over a particular cell in a DT::datatable? I decided to hide the long text after a certain width is reached (overflow-x: hidden; white-space: nowrap;) to maintain a clean format, and I would like the user to be able to see the full text if they choose to hover over a given cell.

datatable(df,
          class="pact",
          selection="none",
          rownames=F,
          colnames=NULL,
          options=list(dom="t",
                       pageLength=10
          ),
          escape=F)

How do I utilize javascript to display the cell value in a tooltip after hovering over a particular cell in a DT::datatable? I decided to hide the long text after a certain width is reached (overflow-x: hidden; white-space: nowrap;) to maintain a clean format, and I would like the user to be able to see the full text if they choose to hover over a given cell.

datatable(df,
          class="pact",
          selection="none",
          rownames=F,
          colnames=NULL,
          options=list(dom="t",
                       pageLength=10
          ),
          escape=F)

• javascript
• r
• datatables
• shiny
• dt

Share Improve this question Follow asked Aug 26, 2018 at 3:28 Dale KubeDale Kube 1,46022 gold badges1515 silver badges2424 bronze badges 1

• Could you provide a MCVE? – SBista Commented Aug 29, 2018 at 4:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here is a solution with the newly available plugin ellipsis.

library(DT) # version 0.5

dat <- data.frame(
  A = c("fnufnufroufrcnoonfrncacfnouafc", "fanunfrpn frnpncfrurnucfrnupfenc"),
  B = c("DZDOPCDNAL DKODKPODPOKKPODZKPO", "AZERTYUIOPQSDFGHJKLMWXCVBN")
)

datatable(
  dat, 
  plugins = "ellipsis",
  options = list(
    columnDefs = list(list(
      targets = c(1,2),
      render = JS("$.fn.dataTable.render.ellipsis( 17, false )")
    ))
  )
)

Documentation of the plugin: https://datatables/plug-ins/dataRender/ellipsis

Could you try this:

datatable(head(iris), 
          options=list(initComplete = JS(
            "function(settings) {
            var table=settings.oInstance.api();
            table.$('td').each(function(){
              this.setAttribute('title', $(this).html())
              })
            }")))

This sets a tooltip for every cell.

To set the tooltip for a single specific cell:

datatable(head(iris), 
          options=list(initComplete = JS(
            "function(settings) {
            var table = settings.oInstance.api();
            var cell = table.cell(2,2);
            cell.node().setAttribute('title', cell.data());
            }")))

本文标签： javascriptDisplay cell value in tooltip after hovering over a cell in DTdatatableStack Overflow