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

pinkon5k 于 2023-07-31 发布在其他

关注(0)|答案(1)|浏览(114)

我在一个Shiny Jmeter 板中有一个数据表，其中包括第一列中数据的工具提示。不幸的是，我还没有能够编写工作的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)

字符串

r

来源：https://stackoverflow.com/questions/76784043/how-to-style-a-tooltip-in-a-shiny-data-table

1条答案

按热度按时间

p1tboqfb1#

下面是一个使用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)

字符串

的数据

赞(0）回复(0）举报 2023-07-31

我来回答

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

1条答案

相关问题

热门标签

最新问答

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

1条答案

相关问题

热门标签

最新问答

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