CODEWITHSUNDEEP
htmlcssrshinydt
Nick Riches
Nick Riches

Reputation: 401

How can I get a CSS tooltip to work in a Shiny datatable?

I am writing a shiny app. I would like to use tooltips in a datatable created with the DT package. I am using CSS to style the tooltips. Note that the tooltip is supposed to appear when you hover over A SINGLE WORD WITHIN A CELL (not the cell itself). Below is a Minimal Worked Example. I have done this in R markdown rather than Shiny as it provides a neater example (no need to specify reactive elements etc.)

I have checked the CSS in an html editor, and it appears to work fine. The issue is that the DT table is "blind" to any CSS. Is there any way to get the tooltip to work properly within the datatable? Thanks. 

---
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)
                    )
                   )
```

Upvotes: 1

Views: 654

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

A HTML document generated by rmarkdown contains some CSS to control the appearance of the document. It depends on the theme option: theme gallery. This is a Bootstrap theme drawn from the Bootswatch library.

This CSS defines a tooltip class, and a property of this class is opacity:0. This is why you get an invisible rendering of your column.

So, change the name of your custom class to something else than .tooltip.

Note that you can also disable the theme option in the YAML header, like this:

output: 
  html_document:
    theme: null

Upvotes: 1

Related Questions