html - 如何让 CSS 工具提示在 Shiny 数据表中工作？

Question

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

我已经在 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 header 中禁用 theme 选项，如下所示:

output: 
  html_document:
    theme: null