如何在闪亮的数据表中设置工具提示的样式？

Question

我在闪亮的仪表板中有一个数据表，其中包含第一列中数据的工具提示。不幸的是，我无法编写有效的 CSS 代码来设置工具提示的样式，例如更改背景颜色。此外，我希望部分工具提示文本以粗体显示，例如下例中的“工具提示 1”、“工具提示 2”和“工具提示 3”，而其余文本则以正常字体粗细显示。我非常感谢您的帮助。

一个最小的例子在这里：

library(shiny)
library(DT)

df <- as.data.frame(cbind(c("Var1", "Var2", "Var3"), c(10, 5, 45)))
df 

rowCallback <- c(
  "function(row, data, num, index){",
  "  if(index === 0){",
  "    $('td:eq(0)', row).attr('title', 'Tooltip 1: some text');",
  "  } else if(index === 1){",
  "    $('td:eq(0)', row).attr('title', 'Tooltip 2: some text');",
  "  } else if(index === 2){",
  "    $('td:eq(0)', row).attr('title', 'Tooltip 3: some text');",
  "  }",
  "}"  
)


ui <- shiny::basicPage(
  
  div(dataTableOutput('table1'), 
      style="padding-left:50px; padding-right:50px")
  
)

server <- function(input, output) {
  
  output$table1 <- renderDataTable({
    datatable(df, 
              rownames=F,
              options = list(dom = 't', pageLength = 20, 
                             scrollX = T,
                             rowCallback = JS(rowCallback))) 
  })
}
  

shinyApp(ui, server)

Answer 1

这是一个使用 Bootstrap 4 的示例。

library(shiny)
library(DT)
library(bslib)


css <- '
.tooltip {
  pointer-events: none;
}
.tooltip > .tooltip-inner {
  pointer-events: none;
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 10px;
  font-size: 25px;
  font-style: italic;
  text-align: justify;
  margin-left: 0;
  max-width: 1000px;
}
.tooltip > .arrow::before {
  border-right-color: #73AD21;
}
'

initComplete <- "
function () {
  $('[data-toggle=tooltip]').tooltip();
}
"

df <- as.data.frame(cbind(c("Var1", "Var2", "Var3"), c(10, 5, 45)))
df 

rowCallback <- c(
  "function(row, data, num, index){",
  "  if(index === 0){",
  "    $('td:eq(0)', row).attr('title', '<strong>Tooltip 1:</strong> <br> some text').attr('data-toggle', 'tooltip').attr('data-placement', 'right').attr('data-html', 'true');",
  "  } else if(index === 1){",
  "    $('td:eq(0)', row).attr('title', 'Tooltip 2: some text');",
  "  } else if(index === 2){",
  "    $('td:eq(0)', row).attr('title', 'Tooltip 3: some text');",
  "  }",
  "}"  
)


ui <- fluidPage(
  theme = bs_theme(version = 4),
  tags$head(
    tags$style(HTML(css))
  ),
  
  div(DTOutput('table1'), 
      style="padding-left:50px; padding-right:50px")
  
)

server <- function(input, output) {
  
  output$table1 <- renderDT({
    datatable(df, 
              rownames = FALSE,
              options = list(dom = 't', pageLength = 20, 
                             scrollX = TRUE,
                             rowCallback = JS(rowCallback),
                             initComplete = JS(initComplete))) 
  })
}


shinyApp(ui, server)