Как я могу заставить всплывающую подсказку CSS работать с данными Shiny?

Question

Я пишу блестящее приложение.Я хотел бы использовать всплывающие подсказки в таблице данных, созданной с помощью пакета DT.Я использую CSS для стилизации всплывающих подсказок.Обратите внимание, что всплывающая подсказка должна появляться, когда вы наводите курсор мыши на ОДНОСЛОВОЕ СЛОВО В КЛЕТКЕ (а не на саму ячейку).Ниже приведен минимальный обработанный пример.Я сделал это в уценке R, а не в Shiny, так как она предоставляет более аккуратный пример (не нужно указывать реактивные элементы и т.Проблема в том, что таблица 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

HTML-документ, сгенерированный rmarkdown, содержит немного CSS для управления внешним видом документа.Это зависит от опции theme: галерея тем .Это тема Bootstrap, взятая из библиотеки Bootswatch .

. Этот CSS определяет класс tooltip, а свойство этого класса - opacity:0.Вот почему вы получаете невидимый рендеринг вашей колонки.

Итак, измените имя вашего пользовательского класса на другое, отличное от .tooltip.

Обратите внимание, что вы также можете отключить опцию theme в заголовке YAML, например:

output: 
  html_document:
    theme: null