R闪亮-多个悬停弹出窗口，每个具有不同的CSS样式

cu6pst1q 于 2023-02-27 发布在其他

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

背景

我尝试在应用程序的不同部分弹出工具提示，并希望它们的风格（字体，背景，...）是不同的一个部分到另一个。例如，在一个部分的弹出窗口背景是蓝色的，而在另一个部分是红色的。
到目前为止，我借用了this SO accepted answer，它对单一CSS样式非常有效，但是，我还不能扩展它来定义不同的样式，并将它们应用于应用程序周围的不同工具提示。
我不确定我是否理解了这个流程，因为我对CSS和JS没有太多的经验，但是根据我在代码的不同部分用"myTooltip"这样的任意名称更改"tootlip"名称所做的一些测试，我认为CSS代码所引用的"tooltip"元素来自."tooltip如果是这样的话，CSS编辑的容器的名称来自于所涉及的JSS函数的名称，我不知道如何为应用程序的不同部分定义CSS的变体。
到目前为止我的代码的MRE

- CSS文件：**style.css

.tooltip > .tooltip-inner {
  pointer-events: none;
  background-color: #2355b4;
  color: #FFFFFF;
  border: 1px solid #000000;
  padding: 10px;
  font-size: 25px;
  font-style: italic;
  text-align: justify;
  margin-left: 0;
  max-width: 1000px;
}

- JS文件：**dynam.js

$(function () {
  $('[data-toggle=tooltip]').tooltip()
})

- R闪光文件：**myApp.R

library(shiny)
library(bslib)

ui <- function() {
  fluidPage(
    theme = bs_theme(version = 4),
    includeCSS("style.css"),
    includeScript("dynam.js"),
    br(),br(),
    span(
      "Example 1 (I want this tooltip blue)",
      span(
        `data-toggle` = "tooltip",
        `data-placement` = "right",
        title = "A tooltip",
        icon("info-circle")
      )
    ),
    br(),br(),br(),
    span(
      "Example 2 (I want this tooltip red)",
      span(
        `data-toggle` = "tooltip",
        `data-placement` = "right",
        title = "A tooltip",
        icon("info-circle")
      )
    )
  )
}

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

shinyApp(ui = ui, server = server,
         options = list(display.mode = "normal"),
         enableBookmarking = "server")

- 悬停时的结果**：

第一节第一节第一节第一节第一次

r

来源：https://stackoverflow.com/questions/75515925/r-shiny-multiple-onhover-popups-each-with-different-css-style

1条答案

按热度按时间

5anewei61#

这是一个Bootstrap 3的例子（在Shiny中是默认的）。你必须使用CSS类（在这里是TOOLTIP1和TOOLTIP2）。但是我不能设置箭头的颜色（这在Bootstrap 4中有效）。

library(shiny)

css <- '
.tooltip {
  pointer-events: none;
}
.TOOLTIP1 + .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;
}
.TOOLTIP1 + .tooltip > .arrow::before {
  border-color: #73AD21;
}
.TOOLTIP2 + .tooltip > .tooltip-inner {
  pointer-events: none;
  background-color: #933337;
  color: yellow;
  border: 2px solid red;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;
  text-align: justify;
  margin-left: 0;
  max-width: 1000px;
}
.TOOLTIP2 + .tooltip > .arrow::before {
  border-bottom-color: #933337;
}
'

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

shinyApp(
  server = function(input,output,session){},
  ui = fluidPage(
    tags$head(
      tags$style(HTML(css)),
      tags$script(HTML(js))
    ),
    br(),
    span(
      "Example 1 ",
      span(
        class = "TOOLTIP1",
        `data-toggle` = "tooltip", `data-placement` = "right",
        title = "A tooltip",
        icon("info-circle")
      )
    ),
    br(),
    span(
      "Example 2 ",
      span(
        class = "TOOLTIP2",
        `data-toggle` = "tooltip", `data-placement` = "bottom",
        title = "Another tooltip",
        icon("info-circle")
      )
    )
  )
)

编辑

我终于找到了给箭头上色的方法：

.TOOLTIP1 + .tooltip.right > .tooltip-arrow {
  border-right-color: #73AD21;
}
.TOOLTIP2 + .tooltip.bottom > .tooltip-arrow {
  border-bottom-color: #933337;
}

赞(0）回复(0）举报 2023-02-27

我来回答

R闪亮-多个悬停弹出窗口，每个具有不同的CSS样式

背景

1条答案

编辑

相关问题

热门标签

最新问答