css R Shiny -在外部单击时隐藏工具提示

beq87vna 于 2023-02-26 发布在其他

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

背景

我试图有一个工具提示弹出窗口显示在点击信息图标，并隐藏在点击图标本身或在任何其他地方的应用程序。
到目前为止，我已经借用了this SO accepted answer来获得工具提示，以显示和隐藏点击信息图标与data-trigger="click"。然而，我还没有能够有它隐藏也点击任何其他地方的应用程序。
我尝试了data-trigger类型的不同组合，如hover click和focus，但这些都没有达到预期的效果。（例如，1(https://stackoverflow.com/a/45758228/12372421)、2(https://stackoverflow.com/a/53046534/12372421)、3(https://stackoverflow.com/a/51170811/12372421)），使用一些JS和jQuery，但我对这两种语言中的任何一种都不够熟练，无法使解决方案适应我的需要。
到目前为止我的代码的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)

ui <- function() {
  fluidPage(
    includeCSS("style.css"),
    includeScript("dynam.js"),
    br(),br(),
    span(
      "Text that might need further explanation",
      span(
        `data-toggle` = "tooltip",
        `data-placement` = "right",
        `data-trigger` = "click",
        title = "Further explanation",
        icon("info-circle")
      )
    )
  )
}

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

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

所需行为

css

来源：https://stackoverflow.com/questions/75539009/r-shiny-hide-tooltip-when-clicked-outside

1条答案

按热度按时间

yqkkidmi1#

您需要提供自己的show/hide逻辑，如下所示：

library(shiny)

js <- HTML("
$(function () {
  // initialize tooltips
  $('[data-toggle=tooltip]').tooltip();
  
  // create listener on html (`everywhere`) which will hide (all) tooltips on click
  $('html').on('click', function(el) {
     $('[data-toggle=tooltip]').tooltip('hide');
  });
  
  // create listener on tooltip elements to toggle the tooltip
  $('[data-toggle=tooltip]').on('click', function(evt) {
     // make sure the click is not bubbling up to <html> to avoid closing it right away
     evt.stopPropagation();
     // hide all other tooltips to ensure there is at most one tooltip open at a time
     $('[data-toggle=tooltip]').not($(this)).tooltip('hide');
     $(this).tooltip('toggle');
  });
  
})")

sp <- span(
   "Text that might need further explanation",
   span(
      `data-toggle` = "tooltip",
      `data-placement` = "right",
      `data-trigger` = "manual", ## make sure to activate own logic via "manual"
      title = "Further explanation",
      icon("info-circle")
   )
)

ui <- function() {
   fluidPage(
      singleton(tags$head(tags$script(js, type = "application/javascript"))),
      sp,
      br(),
      sp
   )
}

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

shinyApp(ui = ui, server = server)

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

我来回答

css R Shiny -在外部单击时隐藏工具提示

背景

所需行为

1条答案

相关问题

热门标签

最新问答