正文 

当前位置： 首页 > 知识 >

将鼠标悬停在 DT::datatable 中的单元格上后，在工具提示中显示单元格值

     2023-05-07     256

关键词：

【中文标题】将鼠标悬停在 DT::datatable 中的单元格上后，在工具提示中显示单元格值【英文标题】：Display cell value in tooltip after hovering over a cell in DT::datatable 【发布时间】：2019-02-01 00:38:09 【问题描述】：

在将鼠标悬停在 DT::datatable 中的特定单元格上后，如何利用 javascript 在工具提示中显示单元格值？我决定在达到一定宽度后隐藏长文本 (overflow-x: hidden; white-space: nowrap;) 以保持格式清晰，并且我希望用户在选择将鼠标悬停在给定单元格上时能够看到全文。

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

【问题讨论】：

你能提供一个MCVE吗？ 【参考方案1】：

这是一个使用新可用插件 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 )")
    ))
  )
)

插件文档：https://datatables.net/plug-ins/dataRender/ellipsis

【讨论】：

这很棒。谢谢！【参考方案2】：

你可以试试这个：

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

这会为每个单元格设置一个工具提示。

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

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

【讨论】：

是的，第一个解决方案就是它！这为用户提供了一种将鼠标悬停在单元格上并将其完整值视为工具提示的方法。对于包含非常大/长值的列，它会派上用场；我可以通过隐藏多余的字符并允许用户使用工具提示查看完整值（如有必要）来使表格更紧凑。 @DaleKube 仅供参考，ellipsis 插件现已在 DT 的新版本中提供。我还没有尝试过，但它似乎对您的问题有用。

当用户将鼠标悬停在单元格上时显示数据验证标准(代码片段)

...户将看不到列C因此我还想要包含一个小窗口，当用户将鼠标悬停在列B中的单元格上时，该窗口显示列C中的值作为建议。你们有没有想过如果可以使用Excel中的数据验证菜单，或者是否有可以执行此操作的宏？谢谢你的帮助。答... 查看详情

鼠标悬停在rails中的按钮上时弹出内容

】鼠标悬停在rails中的按钮上时弹出内容【英文标题】：Popovercontentwhenmouseoverabuttoninrails【发布时间】：2017-06-1113:43:37【问题描述】：我有一个网格格式的单元格表。即5行，每行10个单元格。每个单元格代表一个插槽，其中包含... 查看详情

HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值

】HTML/CSS/Javascript-将鼠标悬停在不同的单元格上时更改一个表格单元格的值【英文标题】：HTML/CSS/Javascript-Changingonetablecellvalue,whenhoveringoveradifferentcell【发布时间】：2013-03-0620:11:43【问题描述】：我实际上没有任何与此相关的代码... 查看详情

如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上？

】如何将鼠标悬停在子元素上而不悬停在CSS中的父元素上？【英文标题】：HowdoIhoveroverachildelementwithouthoveringovertheparentinCSS?【发布时间】：2017-04-1909:59:51【问题描述】：是否可以将鼠标悬停在嵌套的子元素上而不触发父元素上的... 查看详情

将鼠标悬停在 nightwatchjs 中的链接上

】将鼠标悬停在nightwatchjs中的链接上【英文标题】：Hoveringoveralinkinnightwatchjs【发布时间】：2015-08-2019:17:54【问题描述】：我一直在使用nightwatch.js并且总是点击元素。有没有办法可以将鼠标悬停在链接或按钮上？【问题讨论】：... 查看详情

QTableView：如何将鼠标悬停在整行上？

】QTableView：如何将鼠标悬停在整行上？【英文标题】：QTableView:howtohoveranentirerowonmouseover?【发布时间】：2013-01-0919:56:09【问题描述】：我对QTableView、QAbstractTableModel和QItemDelegate进行了子类化。我可以将鼠标悬停在单个单元格上：... 查看详情

如果在表格单元格中，CSS悬停更改其他文本/类的样式不起作用

...2014-03-0811:43:06【问题描述】：我有一些文本，我希望在将鼠标悬停在初始文本上时，同一页面中的某些其他文本位会改变字体颜色。例如，使用下面的代码，当将鼠标悬停在“Hoveroverme”文本上时，我 查看详情

将鼠标悬停在自定义传单图例中的元素上

】将鼠标悬停在自定义传单图例中的元素上【英文标题】：HoveroverElementinCustomLeafletLegend【发布时间】：2021-01-0310:57:07【问题描述】：我创建了一个带有图例的传单地图。目标是将鼠标悬停在图例区域中的文本元素上并显示带有... 查看详情

Google chrome：当鼠标悬停在表格单元格上时如何显示全文

】Googlechrome：当鼠标悬停在表格单元格上时如何显示全文【英文标题】：Googlechrome:howtodisplayfulltextwhenthemousehoversoveratablecell【发布时间】：2018-12-0618:11:59【问题描述】：预期行为我的网页上有一个表格。在某些表格单元格中，它... 查看详情

Bootstrap 的工具提示在悬停时将表格单元格向右移动一点

...显示为工具提示。到目前为止，这行得通。但是，当我将鼠标悬停在&lt; 查看详情

如何创建 QTableview 单元格悬停功能

...52【问题描述】：我用QTableview创建了一个表。我尝试添加鼠标悬停功能（如果我将鼠标放在特定单元格上）以更改光标样式。我无法在QTableview中优化任何内置功能鼠标悬停连接功能。所以我用鼠标table.entered.connect(on_ente 查看详情

将鼠标悬停在数据表中的行上时，丰富的工具提示不会更新

】将鼠标悬停在数据表中的行上时，丰富的工具提示不会更新【英文标题】：richtooltipnotupdatingwhenhoveringonrowsindatatable【发布时间】：2012-06-2708:52:59【问题描述】：我有一个数据表，我想在将鼠标悬停在表中的列上时显示丰富的工... 查看详情

jquery 将鼠标悬停在图像上以交换上面 div 中的另一个图像

】jquery将鼠标悬停在图像上以交换上面div中的另一个图像【英文标题】：jquerymouseoveranimagetoswapanotherimageinthedivabove【发布时间】：2012-12-2517:09:06【问题描述】：我想将"-h.png"添加到&lt;divid="swap"&gt;中所有imgsrc... 查看详情

如何将工具提示添加到 jtable 中的单元格？

...，我存储了它的绝对路径。字符串有点长，我希望当我将鼠标悬停在特定单元格上时，应在鼠标旁边弹出一个工具提示，其中包含来自单元格的信息。【问题讨论】：【参考方案1】：您说您将绝对路径存储在单元格中。您可能... 查看详情

VS Code 中的功能名称是啥，您可以将鼠标悬停在变量上并查看它的定义位置？

】VSCode中的功能名称是啥，您可以将鼠标悬停在变量上并查看它的定义位置？【英文标题】：WhatisthenameofthecapabilityinVSCodewhereyoucanhoveroveravariableandseewhereit\'sdefined?VSCode中的功能名称是什么，您可以将鼠标悬停在变量上并查看它的... 查看详情

悬停时表格标题的边框底部

...nhover【发布时间】：2021-02-1814:12:06【问题描述】：当我将鼠标悬停在其中一个标题上时，我希望该单元格的边框底部为红色。不幸的是，对我来说，它在sn-p代码中工作，所以我还附上了我的问题的屏幕截图。当我将鼠标悬停在... 查看详情

当我将鼠标悬停在链接上时希望切换图像

】当我将鼠标悬停在链接上时希望切换图像【英文标题】：LookingtoswitchimagewhenIhoveroveralink【发布时间】：2021-03-0409:20:46【问题描述】：我一直在努力解决这个问题，我一直在寻找其他类似的问题，但还没有找到我的问题的答案。... 查看详情

如何使悬停信息气泡出现在 WPF 中的鼠标悬停上？

】如何使悬停信息气泡出现在WPF中的鼠标悬停上？【英文标题】：HowcanImakeahoverinfobubbleappearonmouseoverinWPF?【发布时间】：2010-12-2222:39:48【问题描述】：我想让文本气泡在鼠标悬停在TextBlock上时出现。以下代码是我能得到的最接近... 查看详情