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

问题描述 投票:1回答:1

我写一个闪亮的应用程序。我想与DT包创建一个DataTable使用提示。我使用的CSS样式的提示。请注意,提示应该是,当你将鼠标悬停在单个字中的细胞(不是电池本身)出现。下面是一个最小的工作实施例。我已经作为R降价而不是有光泽做到了这一点,因为它提供一个整齐的例子(不需要指定抗元件等)

我已经检查在HTML编辑器的CSS,它似乎很好地工作。问题是,DT表是“盲目”的任何CSS。有没有什么办法让工具提示到DataTable中正常工作?谢谢。

---
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)
                    )
                   )
```
html css r datatables shiny
1个回答
1
投票

通过rmarkdown生成的HTML文件中包含一些CSS来控制文档的外观。这取决于theme选项:theme gallery。这是从Bootswatch library绘制的自举的主题。

这CSS定义tooltip类,这个类的一个属性是opacity:0。这就是为什么你得到你列一个无形的渲染。

所以,你的自定义类的名称更改为比.tooltip别的东西。

请注意,您也可以禁用theme选项在YAML头,就像这样:

output: 
  html_document:
    theme: null
© www.soinside.com 2019 - 2024. All rights reserved.