我写一个闪亮的应用程序。我想与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)
)
)
```
通过rmarkdown
生成的HTML文件中包含一些CSS来控制文档的外观。这取决于theme
选项:theme gallery。这是从Bootswatch library绘制的自举的主题。
这CSS定义tooltip
类,这个类的一个属性是opacity:0
。这就是为什么你得到你列一个无形的渲染。
所以,你的自定义类的名称更改为比.tooltip
别的东西。
请注意,您也可以禁用theme
选项在YAML头,就像这样:
output:
html_document:
theme: null