将鼠标悬停在DT :: datatable中的单元格后，在工具提示中显示单元格值 [英] Display cell value in tooltip after hovering over a cell in DT::datatable

问题描述

将鼠标悬停在DT :: datatable中的特定单元格上后，如何使用JavaScript在工具提示中显示单元格值？我决定在达到一定宽度后隐藏长文本（ overflow-x：隐藏；空白：nowrap； ），以保持整洁的格式，我想如果用户选择将鼠标悬停在给定的单元格上，则可以看到全文。

  datatable（df，
 class = compact，
 selection = none，
 rownames = F，
 colnames = NULL，
 options = list（dom = t，
 pageLength = 10 
），
 escape = F）
  

解决方案

您能尝试一下吗？

  datatable（head（iris），
 options = list（initComplete = JS（ function（settings）{var table = settings.oInstance.api（）; table。$（'td'）。each（function（）{this.setAttribute（'title'，$（this） .html（）}}}}）））））
  

这为每个单元格设置了一个工具提示。 / p>

要为单个特定单元格设置工具提示，

  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（））; 
}）））
  

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="compact",
          selection="none",
          rownames=F,
          colnames=NULL,
          options=list(dom="t",
                       pageLength=10
          ),
          escape=F)

解决方案

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());
            }")))

这篇关于将鼠标悬停在DT :: datatable中的单元格后，在工具提示中显示单元格值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！