Question

我正在编写一个闪亮的应用程序。我想在由DT包创建的数据表中使用工具提示。我使用的CSS样式的提示。请注意，当您将鼠标悬停在单元格中的单个单词（而不是单元格本身）上时，应该会显示工具提示。下面是一个最小的工作示例。我在R markdown而不是Shiny中完成了此操作，因为它提供了更简洁的示例（无需指定反应性元素等）。

我已经在html编辑器中检查了CSS，并且看来工作正常。问题是DT表对任何CSS都是“盲目的”。有什么方法可以使工具提示在数据表中正常工作？谢谢。

---
title: "MWE_tooltip"
author: "Nick Riches"
date: "03/02/2019"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css, echo=FALSE}
   .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            }

            .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #5d5d3c;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            bottom: 100%;
            left: 50%;
            margin-left: -60px;
            }

            .tooltip:hover .tooltiptext {
            visibility: visible;
            }
```


```{r}
library(DT) # To create a datatable
library(shiny)

col1 <- c(1,2,3)
col2 <- c("<div class=\"tooltip\">
          <span style=\"background-color:#66ffff;\">
          The
          </span>
          <span class=\"tooltiptext\">DET.
          </span>
          </div>",

          "<div class=\"tooltip\">
          <span style=\"background-color:#66ffff;\">
          Man
          </span>
          <span class=\"tooltiptext\">NOUN
          </span>
          </div>",

          "<div class=\"tooltip\">
          <span style=\"background-color:#66ffff;\">
          ran
          </span>
          <span class=\"tooltiptext\">VERB
          </span>
          </div>")

table <- cbind.data.frame(col1, col2)


DT::datatable(table,
                  filter = c("top"),
                  rownames = FALSE,
                  escape = FALSE,
                  options = list(paging = FALSE, autoWidth = TRUE, searching = TRUE,
                             search = list(regex = TRUE, scrollX = TRUE)
                    )
                   )
```

Answer 1

由rmarkdown生成的HTML文档包含一些CSS，用于控制文档的外观。这取决于theme选项：theme gallery。这是从Bootswatch library提取的Bootstrap主题。

此CSS定义了一个tooltip类，该类的属性为opacity:0。这就是为什么您看不到列的原因。

因此，将自定义类的名称更改为.tooltip以外的名称。

请注意，您也可以在YAML标头中禁用theme选项，如下所示：

output: 
  html_document:
    theme: null

我怎样才能得到一个CSS工具提示的工作中一个闪亮的数据表？

1 个答案: