闪亮的 bsTooltip 中的数学模式

Question

我想知道是否可以使用 shinyBS 包中的 bsTooltip() 在工具提示标题中包含数学模式。

小例子：

rm(list = ls())
library(shiny)
library(shinyBS)

ui <- basicPage(
  headerPanel("Tooltip test"),
  bsTooltip(id = "Equation", title = "\(\bar{X} = \frac{1}{n}\sum_{p = 1}^{n}X_p\)", placement = "bottom", trigger = "hover", options = NULL),
  mainPanel(
    p("some text", htmlOutput("Equation", inline = TRUE))
  )
)

server <- shinyServer(function(input, output,session) {
  output$Equation <- renderUI({HTML("<font color='blue'><u>something which needs equation</u></font>")})
})
shinyApp(ui = ui, server = server)

成绩（数学模式）不理想：

Answer 1

'shinyBS' 不行。

这是使用 qTip2 JavaScript 库的方法。

为了使用它，您必须 download 文件 jquery.qtip.min.css 和 jquery.qtip.min.js，将这两个文件放到Shiny app的www子文件夹下。

library(shiny)

js <- "
    $(document).ready(function() {
      $('#Equation').qtip({
        overwrite: true,
        content: {
          text: $('#tooltip')
        },
        position: {
          my: 'top left',
          at: 'bottom right'
        },
        show: {
          ready: false
        },
        hide: {
          event: 'unfocus'
        },
        style: {
          classes: 'qtip-youtube qtip-rounded'
        },
        events: {
          blur: function(event, api) {
            api.elements.tooltip.hide();
          }
        }
      });
    });
"

library(shiny)

ui <- basicPage(
  tags$head(
    tags$link(rel = "stylesheet", href = "jquery.qtip.min.css"),
    tags$script(src = "jquery.qtip.min.js"),
    tags$script(HTML(js)),
  ),
  withMathJax(),
  headerPanel("Tooltip test"),

  mainPanel(
    p("some text", htmlOutput("Equation", inline = TRUE)),
    div(
      id = "tooltip", style = "display: none;",
      HTML("$$\int_0^1 f(x) dx = \pi$$")
    )
  )
)

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

  output$Equation <- 
    renderUI({HTML("<font color='blue'><u>something which needs equation</u></font>")})

})

shinyApp(ui = ui, server = server)

Answer 2

为了添加另一个选项，我们可以按照 W3 here 中的示例创建自己的工具提示 class。然后我们可以使用 {shiny} 的 withMathJax() 函数将工具提示呈现为公式。

如果我只有几个要自定义的工具提示，我通常会使用自定义工具提示。它的优点是没有额外的依赖项。此自定义工具提示的主要缺点是 (1) 它显示为子元素，而不是像使用 javascript 生成的工具提示那样显示在顶层的单独容器中，并且 (2) 您必须创建 css class每个箭头方向都有。因此，如果您有许多指向不同方向的工具提示，那么像 qTip2 这样的附加 javascript 库绝对值得依赖。

library(shiny)

ui <- fluidPage(

  tags$head(
    tags$style(HTML(
      # tooltip implementation from:
      # https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_top
      # just added a `t` to make classes unique
         ".ttooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
          }

          .ttooltip .ttooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: 150%;
            left: 50%;
            margin-left: -60px;
          }

          .ttooltip .ttooltiptext::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
          }

          .ttooltip:hover .ttooltiptext {
            visibility: visible;
          }")
      )
  ),

  headerPanel("Tooltip test"),

  mainPanel(

    p("some text", htmlOutput("Equation", inline = TRUE)),

  ))

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

  output$Equation <- renderUI({
      span(class = "ttooltip",
           style = "color: blue",
            "something which needs equation",
           span(class = "ttooltiptext",
                withMathJax("$$\bar{X} = \frac{1}{n}\sum_{p = 1}$$"))
           )
    })
})

shinyApp(ui = ui, server = server)

闪亮的 bsTooltip 中的数学模式

Math mode in bsTooltip in shiny

r

shiny

tooltip

shinybs