R Shiny - 将鼠标悬停在图标上时弹出窗口

Question

我想简单地在简单的文本行后面的图标上添加一个悬停窗口。我找到了shinyBS包，它似乎使这成为可能，但它链接到shiny输出。在闪亮的应用程序的“ui”中添加类似下面的代码可以使按钮正常工作，但在本例中它们链接到单选按钮。

CVI <- c("Hello1", "Hello2", "Hello3")
CNI <- c("Peter1", "Peter2", "Peter3")
    
radioButtons(inputId = "Attribute",  label="Attribute", choiceValues = CVI,
               

             choiceNames = list(
                                tagList(
                                        tags$span(CNI[1]), #DoS
                                        tags$span(icon("info-circle"), id = "1_info", style = "color: gray;")
                                             ), 
                                tagList(
                                        tags$span(CNI[2]), #DoO
                                        tags$span(icon("info-circle"), id = "2_info", style = "color: gray;")
                                                         ), 
                                tagList(
                                        tags$span(CNI[3]), #Ratio
                                        tags$span(icon("info-circle"), id = "3_info", style = "color: gray;")
                                                         ))
                                      ),# radiobuttons end
                        
  Popover buttons
   bsPopover(id="1_info", title=NULL, content="Test1", trigger="hover", placement="right", options=list(container="body")),
   bsPopover(id="2_info", title=NULL, content="Test2", trigger="hover", placement="right", options=list(container="body")),
   bsPopover(id="3_info", title=NULL, content="Test3", trigger="hover", placement="right", options=list(container="body"))

我怎样才能实现类似的东西，但没有单选按钮，就像“示例”这个词，然后是一个图标，我将鼠标悬停在该图标上并弹出一个包含一些信息的窗口（见图）。

我会像这样创建它：

Example_Text <- "Example_text" # This is what comes in the popup
"Example", span(icon("info-circle"), id = "Example_Popup", style = "color: gray;")

Answer 1

本机 HTML 工具提示不可自定义。引导工具提示是。

library(shiny)
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;
}
'

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

shinyApp(
  server = function(input,output,session){},
  ui = fluidPage(
    theme = bs_theme(version = 4),
    tags$head(
      tags$style(HTML(css)),
      tags$script(HTML(js))
    ),
    br(),
    span(
      "Example",
      span(
        `data-toggle` = "tooltip", `data-placement` = "right",
        title = "A tooltip",
        icon("info-circle")
      )
    )
  )
)

Answer 2

这可以通过 来完成div(title=, style=, ...)。

shinyApp(
  server = function(input,output,session){},
  ui = fluidPage(
    span(
      "Example",
      div(style = "display:inline-block;",
          title = "A tooltip",
          icon("info-circle")))
  )
)

将鼠标悬停在该图标上，您将看到A tooltip。它的样式不像页面中的定向标注，也许这就足够了。