为单个 bsTooltip (shinyBS) 元素设置样式答案

【问题标题】：Style individual bsTooltip (shinyBS) elements为单个 bsTooltip (shinyBS) 元素设置样式
【发布时间】：2020-02-07 18:11:25
【问题描述】：

我正在尝试通过 shinyBS 包的bsTooltip() 函数为我闪亮的应用程序中的不同操作按钮添加一些工具提示，我想仅修改特定工具提示框的宽度.为此，我可以在 UI 的开头指定 HTML 标记并直接修改 CSS，但如果我使用简单元素 .tooltip {...}，我会修改代码中每个工具提示的宽度：

您可以在下面找到一个带有两个不同操作按钮的最小可重现示例：

library(shiny)
library(shinyBS)

library(shiny)

ui <- fluidPage(

  tags$head(tags$style(HTML(".tooltip {width: 300px;}"))),

  br(),

  actionButton(inputId = "button1",
               label = "First"),
  bsTooltip(id = "button1",
            title = "Bonjour!",
            placement = "right",
            trigger = "hover"),

  br(),
  br(),

  actionButton(inputId = "button2",
               label = "Second"),
  bsTooltip(id = "button2",
            title = "Hello!",
            placement = "right",
            trigger = "hover")

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

我以前也遇到过这种情况，例如当我不得不修改特定textInput() 小部件的color of the placeholder 时。为此，在我指定的 HTML() 函数中：

tags$head(tags$style(HTML("#textinput_ID::placeholder {color: #EEE1525;}")))

但这在这种情况下似乎不起作用。

非常感谢您的帮助！

【问题讨论】：

标签： html css r shiny shinybs

【解决方案1】：

您可以将 actionButton 和 bsTooltip 包装在带有 id 的 div 中。现在你可以通过它的 id 选择这个 div 并且只设置里面的工具提示。

library(shiny)
library(shinyBS)

ui <- fluidPage(

  tags$head(tags$style(HTML("#button1_div .tooltip {width: 300px;}"))),

  br(),
  div(id='button1_div',
      actionButton(inputId = "button1",
                   label = "First"),
      bsTooltip(title = "Bonjour!",
                placement = "right",
                trigger = "hover")),

  br(),
  br(),

  actionButton(inputId = "button2",
               label = "Second"),
  bsTooltip(id = "button2",
            title = "Hello!",
            placement = "right",
            trigger = "hover")

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

【讨论】：

感谢您的回复。我是初学者。我希望您至少展示一个示例如何在此之后设置 div 的样式。谢谢。